javascript自動變動的時間日期效果
本章節分享一段程式碼例項,它實現獲取當前客戶端時間日期效果。
並且它能夠實現自動變動,也就是說就像電子錶一樣,能夠看到時間日期的變化。
程式碼例項:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> body, div{ margin:0; padding:0; } body{ color:#fff; font:16px/1.5 \5fae\8f6f\96c5\9ed1; } #clock{ width:300px; text-align:center; background:#1a1a1a; margin:10px auto; padding:20px 0; } span{ color:#000; width:80px; line-height:2; background:#fbfbfb; border:2px solid #b4b4b4; margin:0 10px; padding:0 10px; } </style> <script> window.onload=function(){ var oClock=document.getElementById("clock"); var aSpan=oClock.getElementsByTagName("span"); setInterval(getTimes,1000); getTimes(); function getTimes(){ var oDate=new Date(); var aDate=[oDate.getHours(),oDate.getMinutes(),oDate.getSeconds()]; for(var index in aDate){ aSpan[index].innerHTML = format(aDate[index]) } } function format(a){ return a.toString().replace(/^(\d)$/, "0$1") } } </script> </head> <body> <div id="clock"> <span></span>點<span></span>分<span></span>秒 </div> </body> </html>
上面的程式碼實現了我們的要求,下面介紹一下它的實現過程。
一.程式碼註釋:
(1).window.onload=function(){},當文件完全載入完畢再去執行函式中的程式碼。
(2).var oClock=document.getElementById("clock"),獲取id屬性值為clock的元素物件。
(3).var aSpan=oClock.getElementsByTagName("span"),獲取span元素集合。
(4).setInterval(getTimes,1000),每隔一秒執行一次getTimes()函式。
(5).getTimes(),執行函式,非常重要,否則會延遲一秒才會有效果。
(6).function getTimes(){},此函式能夠獲取當前時間日期。
(7).var oDate=new Date(),獲取當前時間物件。
(8).var aDate=[oDate.getHours(),oDate.getMinutes(),oDate.getSeconds()],將當前小時、分鐘和秒存入陣列。
(9).for(var index in aDate){
aSpan[index].innerHTML = format(aDate[index])
} ,遍歷陣列,並將陣列相應的值寫入對應的span元素中,當然值是被經過格式化的。
(10).function format(a){
return a.toString().replace(/^(\d)$/, "0$1")
},如果是個位數字,那麼就在前面加0.
二.相關閱讀:
(1).getElementsByTagName()方法可以參閱document.getElementsByTagName()一章節。
(2).setInterval()方法可以參閱setInterval()一章節。
(3).replace()方法可以參閱正規表示式replace()一章節。
(4).時間日期物件可以參閱JavaScript Date 物件一章節。
相關文章
- 原生JavaScript 自動變化的時間日期程式碼JavaScript
- js能夠自動變動的時間日期效果程式碼例項JS
- javascript實現的動態時間日期效果JavaScript
- JavaScript 自動重新整理的時間日期JavaScript
- JavaScript自動更新時間效果詳解JavaScript
- JavaScript 動態時間日期JavaScript
- JavaScript動態時間日期JavaScript
- jQuery輸入時間日期自動格式化效果jQuery
- JavaScript 自動更新時間JavaScript
- JavaScript實時變化時間日期JavaScript
- 在頁面上能夠自動變動的帶有星期的時間日期程式碼
- JavaScript 時間日期操作JavaScript
- javascript層自動關閉效果JavaScript
- js正則格式化日期時間自動補0JS
- python-Pycharm中自動-新增時間-日期-作者等資訊PythonPyCharm
- JavaScript時間日期格式化JavaScript
- JavaScript 時間日期格式轉換JavaScript
- JavaScript比較時間日期大小JavaScript
- JavaScript 日期和時間的格式化JavaScript
- JavaScript實時變化的時間JavaScript
- PostgreSQL自動更新時間戳SQL時間戳
- Linux自動更新時間Linux
- JavaScript 時間日期轉換成中文JavaScript
- javascript將日期轉化成時間戳JavaScript時間戳
- JavaScript抖動效果JavaScript
- javascript比較兩個時間日期的大小JavaScript
- 簡易實用的JavaScript日期時間操作!JavaScript
- win10時間不準怎樣自動校準時間_win10自動校準時間的步驟Win10
- javascript計算指定日期增加多長時間後的日期JavaScript
- javascript如何計算兩個日期之間的時間間隔JavaScript
- JS仿QQ空間滑鼠停在長圖片時候圖片自動上下滾動效果JS
- win10怎麼自動開啟自動設定時間_win10開啟自動設定時間的步驟Win10
- centos7 時間自動同步CentOS
- mybatis自動填充時間欄位MyBatis
- Windows開機自動同步時間Windows
- javascript獲取本地時間日期程式碼JavaScript
- JavaScript自定義時間日期格式化JavaScript
- javascript實現的時間日期格式化外掛JavaScript