怎样在html中加入计数器?(2),html如何实现计数器以及时钟的功能代码

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

}

这样，时钟就完成了！

相关推荐：