前言

今天我们来实现一下使用JS实现简单的计时器的效果

1.静态页面

<div>
 	<p class="countdown">10:00 场距结束</p>
 	<span class="timer">
    	<span id="hour"></span>
    	<span id="minutes"></span>
    	<span id="second"></span>
    </span>
</div>


提示：以下是本篇文章正文内容，下面案例可供参考


2.获取span标签的内容

var hour = document.getElementById('hour')
var minutes = document.getElementById('minutes')
var second = document.getElementById('second')

3.获取当前时间

window.onload = function () {
    setInterval(function () {
        var nowTime = new Date();//获取当前时间

4.创建日期对象

var endTime = new Date("2024-4-1 00:00:00");
        var seconds = parseInt((endTime.getTime() - nowTime.getTime()) / 1000);//两个时间点的时间差(秒)
        // var d = parseInt(seconds / 3600 / 24);//得到天数
        var h = timeCal(parseInt(seconds / 3600 % 24));//小时
        var m = timeCal(parseInt(seconds / 60 % 60));//分钟
        var s = timeCal(parseInt(seconds % 60));//秒

5.将得到的数传给span标签

 hour.innerHTML = h
        // console.log(h);
        minutes.innerHTML = m
        second.innerHTML = s

总结

还有补零函数哦

function timeCal(time) {
    if (time < 10) {
        return '0' + time
    } else {
        return time
    }
}