使用JS實現動態時鐘
本文實例為大家分享了JS實現動態時鐘的具體代碼，供大家參考，具體內容如下
利用setTime()實現動態的時鐘效果
代碼如下
<html> <head> <meta charset='utf-8'> <title>正在運行的時鐘</title> <style type='text/css'> /*設置樣式：無邊框的文本框*/ 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(); //獲得當前時間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位，補0顯示 minute = '0' + minute;if (second < 10) //如果秒數只有1位，補0顯示 second = '0' + second;/*設置文本框的內容為當前時間*/document.getElementById(’clock’).innerHTML = year + '年' + month + '月' + date + '日' + hour + ':' + minute + ':' + seconddocument.myform.myclock.value = year + '年' + month + '月' + date + '日' + hour + ':' + minute + ':' + second/*設置定時器每隔1秒（1000毫秒），調用函數disptime()執行，刷新時鐘顯示*/var myTime = setTimeout('disptime()', 1000); } </script> </body></html>
效果如圖
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
網公網安備