時鐘實作
實作這個時鐘時間需要解決以下三個問題：
- 獲得目前時間，并格式化
- 如何可以在頁面中顯示時間
- 讓時間動起來
1、獲得目前時間，并格式化
要獲得目前時間，可以使用JavaSctipt的Date對象，預設構造函數會傳回目前時間。存儲日期為自 1970 年 1 月 1 日 00:00:00以來的毫秒數。
setXxx 這些方法用于設定時間和日期值
getXxx 這些方法用于擷取時間和日期值
實作代碼如下：
| function getnow(){ //1、獲得目前時間，格式化時間 var now=new Date(); var year=now.getFullYear(); var month=now.getMonth()+1; if(month<10){ month="0"+month; } var date=now.getDate(); if(date<10){ date="0"+date; } var hour=now.getHours(); if(hour<10){ hour="0"+hour; } var minute=now.getMinutes(); if(minute<10){ minute="0"+minute; } var second=now.getSeconds(); if(second<10){ second="0"+second; } var nowstr=year+"年"+month+"月"+date+"日 "+hour+":"+minute+":"+second; alert(nowstr); } |
在body标簽中使用onLoad事件綁定這個函數，使頁面一加載就運作這個時鐘。
| <body οnlοad="getnow()"> </body> |
運作代碼就可以看到如下效果：
2、如何可以在頁面中顯示時間
目的當然不是要通過彈出框的方式顯示時間，而是讓他在頁面中顯示，可以在頁面中定義一個span标簽顯示時間，如何可以使用JavaScript操作标簽的内容呢？這裡就需要用到内置對象document了，它提供了一個getElementById方法，可以根據id獲得标簽對象，然後就可以修改這個對象了。現在doby中頂一個一個span對象，并定義id屬性，值為nowspan，代碼如下：
| <body οnlοad=" <span id="nowspan" > </span> </body> |
修改上面的javascript代碼，獲得這個對象并把格式化好的時間賦給它。
| // alert(nowstr); //2、顯示時間 html //獲得标簽對象 var nowspan=document.getElementById("nowspan"); nowspan.innerHTML=nowstr; |
3、讓時間動起來
要讓時間動起來可以使用setTimeout("函數",毫秒數) 設定定時器：經過指定毫秒值後執行某個函數。實作代碼如下：
| //3、使時間動起來 setTimeout("getnow()", 1000); |
完整代如下：
| <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Test</title> </head> <script type="text/javascript"> function getnow(){ //1、獲得目前時間，格式化時間 var now=new Date(); var year=now.getFullYear(); var month=now.getMonth()+1; if(month<10){ month="0"+month; } var date=now.getDate(); if(date<10){ date="0"+date; } var hour=now.getHours(); if(hour<10){ hour="0"+hour; } var minute=now.getMinutes(); if(minute<10){ minute="0"+minute; } var second=now.getSeconds(); if(second<10){ second="0"+second; } var nowstr=year+"年"+month+"月"+date+"日 "+hour+":"+minute+":"+second; //alert(nowstr); //2、顯示時間 html //獲得标簽對象 var nowspan=document.getElementById("nowspan"); nowspan.innerHTML=nowstr; //3、使時間動起來 setTimeout("getnow()", 1000); } </script> <body onLoad="getnow()"> <span id="nowspan" /> </body> </html> |
運作代碼效果：
