使用JS實現(xiàn)動態(tài)時鐘
本文實例為大家分享了JS實現(xiàn)動態(tài)時鐘的具體代碼，供大家參考，具體內(nèi)容如下
利用setTime()實現(xiàn)動態(tài)的時鐘效果
代碼如下
<html> <head> <meta charset='utf-8'> <title>正在運行的時鐘</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位，補0顯示 minute = '0' + minute;if (second < 10) //如果秒數(shù)只有1位，補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. IntelliJ IDEA導(dǎo)出項目的方法2. 刪除docker里建立容器的操作方法3. ASP.NET堆和棧三之引用類型對象拷貝和內(nèi)存分配4. Java之JSP教程九大內(nèi)置對象詳解(下篇)5. vue通過v-html指令渲染的富文本無法修改樣式的解決方案6. uni-app結(jié)合.NET 7實現(xiàn)微信小程序訂閱消息推送7. Python3+Django get/post請求實現(xiàn)教程詳解8. python 獲取計算機的網(wǎng)卡信息9. Python無法正確排序unicode。Strcoll沒有幫助10. Java靜態(tài)代碼塊加載驅(qū)動代碼實例
網(wǎng)公網(wǎng)安備