JavaScript的時鐘實現

標籤：logs   瀏覽器   oct   name   timeout   效果   function   highlight   gets   

在JavaScript中，有一個內建對象Date,它重要的一個作用就是實現了時間的時刻更新，通過代碼來創造一個實實在在的時間表。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="author" content="宋添發" /><meta name="Genarator" content="sublime"/><title>時間的實現</title><style type="text/css">       #timetxt{             width:200px;             height:200px;             background-color:gray;             border-radius: 50%;//圓角效果             font-size:45px;             line-height:200px;             margin:auto auto;             text-align:center;       }</style><script type="text/javascript">   function startTime(){      var today=new Date(); //定義時間  var h=today.getHours();  //小時  var m=today.getMinutes();  //分鐘  var s=today.getSeconds();  //秒  //調用函數   h=checkTime(h);           m=checkTime(m);   s=checkTime(s);  document.getElementById("timetxt").innerHTML=h+":"+m+":"+s; //時間顯示的格式  t=setTimeout(function(){    startTime();  },500);//500，是延時顯示的意思,即500毫秒更新一次   }   //當分鐘和秒是一位時候，需要在前面加0（才更符合要求）   function checkTime(i){     if(i<10){   i="0"+i; } return i;   }   </script></head><body onload="startTime()">   <div id="timetxt"></div></body></html>

 瀏覽器展示效果：

如果在瀏覽器中顯示的不是一個正圓，是因為CSS3的圓角效果問題，因為眾多的瀏覽器都為了一己自私，設定了太多的私人屬性，所以只要在CSS3的標籤前面加上其瀏覽器的私人首碼就可以了，在這裡給出了前端需要測試的5大瀏覽器的首碼，只要這5大瀏覽器通過了，其他的都是沒有問題的了。

JavaScript的時鐘實現