HTML+JS实现简单的时钟效果

前言:想要实现时钟效果,关键就是要使用setTimeout()方法和clearTimeout()方法

 

首先搞清楚setTimeout()方法和clearTimeout()方法的用法:

1. setTimeout()方法见名知意,就是设置时间跳出,用于在指定的毫秒数后调用函数或计算表达式,有两个参数,第一个参数是要执行的函数或表达式,第二个参数是多少毫秒后执行,只会调用一次。针对时钟效果,我们就可以在函数中递归调用本方法,每1秒执行一次
2. setInterval()方法也可以实现相同效果,方法也是可按照指定的周期（以毫秒计）来调用函数或计算表达式,此处使用第一种
3. clearTimeout()主要就是结束setTimeout()返回的对象,结束时间的改变.

 

下面具体实现:

1.HTML部分的代码

我们需要两个按钮分别来控制开始和结束,两个按钮需要实现点击实现来进行对应方法的调用,还需要一个显示时间的标签,此处使用标签

	当前时间为:
	

	
	

2.JS中编写按钮点击事件中的方法

startTime()方法中需要获取当前时间,并解析后显示出来

var t;

function startTime() {
    var d = new Date();
    //年月日
    var year = d.getFullYear();
    var mouth = d.getMonth() + 1;
    var day = d.getDate();
    //时分秒
    var h = d.getHours();
    var m = d.getMinutes();
    var s = d.getSeconds();				
				
    if(s<10){
        s = "0"+s;
    }

    document.getElementById("time").innerHTML = "
" +
    year + "年" + mouth + "月" + day + "日  " + h + ":" + m + ":" + s + "
";
    t = setTimeout("startTime()", 1000);
}

endTime()将setTimeout()方法返回的对象清除即可

function endTime() {
	clearTimeout(t);
}

此处即可实现简单的时钟效果