實時變化的時鐘效果程式碼例項

admin發表於2017-04-12

本章節分享一段程式碼例項，它實現了簡單的時鐘效果。

它能夠實時的根據本地時間進行變化。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript">
window.onload = function () {
  var oBody = document.body;
  var oP = document.getElementById("time");
  setInterval(fnTime, 1000);
  fnTime();
  function fnTime() {
    var myTime = new Date();
    var iHours = myTime.getHours();
    var iMin = myTime.getMinutes();
    var iSec = myTime.getSeconds();
    var str = toTwo(iHours)+":"+toTwo(iMin)+":"+ toTwo(iSec);
    oP.innerHTML = str;
  }
}
function toTwo(n) {
  return n < 10 ? '0' + n : '' + n;
}
</script>
</head>
<body>
<p id="time"></p>
</body>
</html>

程式碼確實比較簡單，這裡不多介紹，更多內容可以參閱相關閱讀。

相關閱讀:

（1）.innerHTML可以參閱innerHTML一章節。

（2）.時間物件更多內容可以參閱JavaScript Date物件一章節。

（3）.setInterval()可以參閱setInterval()一章節。

相關文章