使用JS實現(xiàn)動態(tài)時鐘
本文實例為大家分享了JS實現(xiàn)動態(tài)時鐘的具體代碼，供大家參考，具體內(nèi)容如下
利用setTime()實現(xiàn)動態(tài)的時鐘效果
代碼如下
<html> <head> <meta charset='utf-8'> <title>正在運(yùn)行的時鐘</title> <style type='text/css'> /*設(shè)置樣式：無邊框的文本框*/ input, #clock {width: 390;font-size: 30px;font-weight: 900;color: #FFFFFF;background-color: #930;border: 8px double #900; } </style> </head> <body onLoad='disptime( ) '> <form name='myform'> <input name='myclock' type='text' value='' size='20'> </form> <span id='clock'></span> <script language='JavaScript'> function disptime() {var time = new Date(); //獲得當(dāng)前時間var year = time.getFullYear(); //獲得年月日var month = time.getMonth(); //獲得年月日var date = time.getDate(); //獲得年月日var hour = time.getHours(); //獲得小時、分鐘、秒var minute = time.getMinutes();var second = time.getSeconds();if (minute < 10) //如果分鐘只有1位，補(bǔ)0顯示 minute = '0' + minute;if (second < 10) //如果秒數(shù)只有1位，補(bǔ)0顯示 second = '0' + second;/*設(shè)置文本框的內(nèi)容為當(dāng)前時間*/document.getElementById(’clock’).innerHTML = year + '年' + month + '月' + date + '日' + hour + ':' + minute + ':' + seconddocument.myform.myclock.value = year + '年' + month + '月' + date + '日' + hour + ':' + minute + ':' + second/*設(shè)置定時器每隔1秒（1000毫秒），調(diào)用函數(shù)disptime()執(zhí)行，刷新時鐘顯示*/var myTime = setTimeout('disptime()', 1000); } </script> </body></html>
效果如圖
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. 理解PHP5中static和const關(guān)鍵字2. Android table布局開發(fā)實現(xiàn)簡單計算器3. python 代碼實現(xiàn)k-means聚類分析的思路(不使用現(xiàn)成聚類庫)4. IntelliJ IDEA安裝插件的方法步驟5. Java如何基于反射機(jī)制獲取不同的類6. php模擬實現(xiàn)斗地主發(fā)牌7. Vue封裝一個TodoList的案例與瀏覽器本地緩存的應(yīng)用實現(xiàn)8. Android 在 res/layout 文件夾 下創(chuàng)建一個 子文件夾實例9. PHP安全-命令注入10. Vuex localStorage的具體使用
網(wǎng)公網(wǎng)安備