本篇文章给大家带来的内容是关于html如何实现计数器以及时钟的功能代码 ，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
在许多的网页中，我们都会看到计数器以及时钟，那么我们怎么自己实现着种功能呢？
先说计数器，计数器的逻辑功能很简单，就是秒针每秒加一，逢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
