javascript自動變動的時間日期效果
本章節分享一段代碼實例，它實現獲取當前客戶端時間日期效果。
并且它能夠實現自動變動，也就是說就像電子表一樣，能夠看到時間日期的變化。
代碼實例:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="/" />
<title>實例</title>
<style>
body, div{
margin:0;
padding:0;
}
body{
color:#fff;
font:16px/1.5 faef6fc5ed1;
}
#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 對象一章節。
相關推薦
-
js判斷變量是不是數字類型代碼實例
下面是一段能夠判斷變量是否是數字類型的代碼實例。代碼如下:function isNumbr(vl) { rturn tyof vl === numbr && isFinit(vl)
-
js實現jquery的extend()代碼實例
大家知道在jqury中xtnd()方法，這里就不多介紹了。具體可以參閱jQury.xtnd()方法一章節。下面就是一段通過原生js實現的xtnd()方法代碼實例，當然jqury的也是
-
js檢測搜狗瀏覽器、百度瀏覽器、微信瀏覽器代碼實例
本章節分享一段代碼實例，它實現了對各種瀏覽器類型的判斷功能。比如搜狗瀏覽器、百度瀏覽器、微信瀏覽器等等，這段代碼可能會隨著時間的推移并不準確，因為瀏覽器的一些標識可能會發生變化，不過在當前還是非常好用
-
使用ajax方式提交表單代碼實例
可能需要使用jx異步方式提交表單，下面就是一個代碼片段，需要的朋友可以做一下參考。代碼如下:$.jx({ url:mobilSurvyction_ddSurvy.ction,
-
防止表單提交按鈕重復點擊現象代碼實例
本章節分享一段代碼實例，它實現防止表單重復提交現象。代碼如下:$(#submit).on(click, function (vnt) { vnt.rvntDfult();
