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

最新推荐文章于 2022-09-02 21:45:00 发布

原创最新推荐文章于 2022-09-02 21:45:00 发布 · 2.9k 阅读

4 ·

CC 4.0 BY-SA版权

HTML+JS 专栏收录该内容

4 篇文章

订阅专栏

博客介绍了使用setTimeout()和clearTimeout()方法实现时钟效果。先说明了setTimeout()用于指定毫秒数后调用函数，可递归调用实现每秒执行；setInterval()也有类似效果。还介绍了clearTimeout()用于结束setTimeout()返回对象。最后给出HTML和JS代码实现步骤。

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

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

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

下面具体实现:

1.HTML部分的代码

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

<body>
	当前时间为:
	<a id="time"></a><br />
	<input type="button" onclick="startTime()" value="开始" />
	<input type="button" onclick="endTime()" value="结束" />
</body>

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 = "<h1>" +
    year + "年" + mouth + "月" + day + "日  " + h + ":" + m + ":" + s + "</h1>";
    t = setTimeout("startTime()", 1000);
}

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

function endTime() {
	clearTimeout(t);
}

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