JavaScript自動更新時間效果詳解
很多網站的頁面某個地方,會有一個能夠自動更新的時間,這也算是比較人性化的舉措,不過有沒有對使用者影響不大,因為電腦本身就會帶有時間,並且這個時間也基本是讀取的本機時間。
程式碼如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #time{ width:240px; height:50px; margin:0px auto; } </style> <script type="text/javascript"> function getDateDemo(){ var myDate=new Date(); var year=myDate.getFullYear(); var month=myDate.getMonth() + 1; var date=myDate.getDate(); var hours=myDate.getHours(); var minutes=myDate.getMinutes(); var seconds=myDate.getSeconds(); //月份的顯示為兩位數字如09月 if(month < 10 ){ month = "0" + month; } if(date < 10 ){ date = "0" + date; } var dateTime=year+"年"+month+"月"+date+"日"+hours+"時"+minutes+"分"+seconds+"秒"; var divNode = document.getElementById("time"); divNode.innerHTML = dateTime; } window.setInterval(getDateDemo,1000); </script> </head> <body> <div id="time"></div> </body> </html>
以上程式碼實現了我們的要求,下面介紹一下它的實現過程。
一.實現原理:
原理非常的簡單,因為要實時顯示時間,所以首先構造一個函式,此函式可以獲取當前的事件,然後使用定時器函式每隔一秒執行一下此函式,於是在視覺上就會產生實時變化的效果,具體就不多說了,可以參閱程式碼註釋。
二.程式碼註釋:
(1).function getDateDemo(){},顯示當前的時間日期,定時器函式每隔一秒呼叫一次就實現預期效果。
(2).var myDate=new Date(),建立當前時間物件。
(3).var year=myDate.getFullYear(),獲取當前年份。
(4).var month=myDate.getMonth() + 1,獲取當前月份,getMonth()獲取的值是從0開始的所以要加1。
(5).var date=myDate.getDate(),獲取當前的天。
(6).var hours=myDate.getHours(),獲取當前的小時。
(7).var minutes=myDate.getMinutes(),獲取當前的分鐘。
(8).var seconds=myDate.getSeconds(),獲取當前的秒。
(9).if(month < 10 ){ month = "0" + month;},如果月份小於10,前面加0,生成"05"這樣的形式。
(11).var dateTime=year+"年"+month+"月"+date+"日"+hours+"時"+minutes+"分"+seconds+"秒",將時間日期連線起來。
(12).var divNode = document.getElementById("time"),獲取div物件。
(13).divNode.innerHTML = dateTime,將時間字串作為div的內容。
(14).window.setInterval(getDateDemo,1000),每隔一秒執行一次函式。
三.相關閱讀:
(1).getFullYear方法參閱javascript getFullYear()一章節。
(2). getMonth方法參閱javascript getMonth()一章節。
(3).getDate方法參閱javascript getDate()一章節。
(4).getHours方法參閱JavaScript getHours()一章節。
(5).getMinutes方法參閱JavaScript getMinutes()一章節。
(6).getSeconds方法參閱javascript getSeconds()一章節。
(7). setInterval方法參閱setInterval()一章節。
相關文章
- JavaScript 自動更新時間JavaScript
- javascript自動變動的時間日期效果JavaScript
- PostgreSQL自動更新時間戳SQL時間戳
- Linux自動更新時間Linux
- Linux系統自動更新時間Linux
- sqlalchemy實現時間列自動更新SQL
- javascript實現的動態時間日期效果JavaScript
- JavaScript計算時間差詳解JavaScript
- JavaScript 動態進度條效果詳解JavaScript
- javascript div元素滑鼠拖動效果詳解JavaScript
- oracle 時間欄位自動更新問題Oracle
- JavaScript動態圓形鐘錶效果詳解JavaScript
- 側欄導航自動定位效果詳解
- js預設一個月時間差的時間段效果詳解JS
- JavaScript 自動重新整理的時間日期JavaScript
- JavaScript 打字機效果詳解JavaScript
- JavaScript抽獎效果詳解JavaScript
- JavaScript 秒錶效果詳解JavaScript
- jQuery輸入時間日期自動格式化效果jQuery
- win10如何設定自動更新時間 win10時間不自動同步Win10
- javascript層自動關閉效果JavaScript
- JavaScript 雪花飄舞效果詳解JavaScript
- JavaScript省市級聯效果詳解JavaScript
- JavaScript選項卡效果詳解JavaScript
- win10系統電腦時間不能自動更新的解決方法Win10
- 原生JavaScript 自動變化的時間日期程式碼JavaScript
- js能夠自動變動的時間日期效果程式碼例項JS
- JavaScript數字分頁效果詳解JavaScript
- JavaScript彈幕效果程式碼詳解JavaScript
- javascript tab選項卡效果詳解JavaScript
- jQuery抖動效果詳解jQuery
- JavaScript 動態時間日期JavaScript
- JavaScript動態時間日期JavaScript
- windows10系統設定時間自動更新的方法Windows
- WPS自動更新怎麼關閉? 詳解WPS自動更新的關閉方法步驟
- JavaScript焦點圖輪播效果詳解JavaScript
- jQuery 倒數計時效果詳解jQuery
- JS時間軸效果(類似於qq空間時間軸效果)JS