在許多的網頁中，我們都會看到計數器以及時鐘，那么我們怎么自己實現著種功能呢？

先說計數器，計數器的邏輯功能很簡單，就是秒針每秒加一，逢60進一就可以。代碼如下：

 !DOCTYPE html  html  head  meta charset= utf-8 /  title /title  /head  body  div /div  script  var index = 0; var i=0; * 對時間進行預先處理，逢60進一 function counter(){ second = index; minute=i; index++; if(second==60){ second=0; i++; index=0; if(second 10){ second = 0 +second; if(minute 10){ minute= 0 +minute; return time = minute + : +second; * 將獲得的時間插入到div的區域 function show(){ var time = counter(); document.getElementsByTagName( div )[0].innerHTML=time; * 每秒鐘獲得一次時間，實現計數功能 function set(){ setInterval( show() ,1000); show(); set(); /script  /body  /html 

這樣，一個簡單的計數器就完成了。

時鐘功能的代碼：

 !DOCTYPE html  html  head  meta charset= UTF-8  title /title  script  * 向Date類中添加獲取當前時間的方法 Date.prototype.currentTime = function(){ var year = this.getFullYear(); var month = this.getMonth()+1; var day = this.getDate(); var week = this.getDay(); week = 星期 + 日一二三四五六 .charAt(week); month = month 10 ? 0 +month : month; day = day 10 ? 0 +day : day; var hour = this.getHours(); var second = this.getSeconds(); var minute = this.getMinutes(); hour = hour 10 ? 0 +hour : hour; second = second 10 ? 0 +second : second; minute = minute 10 ? 0 +minute : minute; return year+ - +month+ - +day+ +week+ +hour+ : +minute+ : +second; function showTime(){ var time = new Date().currentTime(); document.getElementById( show ).innerHTML = time; function setTime(){ showTime(); setInterval( showTime() ,1000); window.onload = function(){ setTime(); /script  /head  body  span id= show /span  /body  /html 

這樣，時鐘就完成了！

相關推薦：

js如何使用定時器實現倒計時功能

jQuery+css實現的時鐘效果(兼容各瀏覽器)_jquery

以上就是html如何實現計數器以及時鐘的功能代碼的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。