html如何实现计数器以及时钟的功能代码

互联网 18-8-30

本篇文章给大家带来的内容是关于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>

这样，时钟就完成了！

html如何实现计数器以及时钟的功能代码

相关资讯

标签推荐