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

以上就是html如何实现计数器以及时钟的功能代码的详细内容，html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。