本篇文章给大家带来的内容是关于html如何实现计数器以及时钟的功能代码 ，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
在许多的网页中，我们都会看到计数器以及时钟，那么我们怎么自己实现着种功能呢？
先说计数器，计数器的逻辑功能很简单，就是秒针每秒加一，逢60进一就可以。代码如下：
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();
这样，一个简单的计数器就完成了。
时钟功能的代码：
/** * 向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(); }
这样，时钟就完成了！
立即学习“前端免费学习笔记（深入）”；
相关推荐：
js如何使用定时器实现倒计时功能
jQuery+css实现的时钟效果(兼容各浏览器)_jquery
以上就是html如何实现计数器以及时钟的功能代码的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1546789.html
微信扫一扫 
支付宝扫一扫 
