用Javascript实现中秋节倒计时

发布于:2022-12-26 ⋅ 阅读:(419) ⋅ 点赞:(0)

用Javascript实现中秋节倒计时

思路:我们知道,倒计时是由未来的时间减去目前的时间得出的时间差来计算的,可是在JS里时间不能直接做运算,那么接下来跟着我的思路一起做一个倒计时吧。

- HTML部分

<span id="cont"></span>

- JS部分

1.定义一个d1变量存储new Date()的时间

var d1 = new Date('2022/9/10')

2.用getTime()转换d1,与当前时间相减(注意这里的单位是毫秒),然后定义一个d变量存储该值

var d = d1.getTime() - Date.now()

此时在控制台下打印出来的值是一个刷新会变化的超级大的值

在这里插入图片描述

3.我们将它转换成秒,再保留整数

d = parseInt(d / 1000)

4.用这个差值与60取余,就可以得到剩余的秒

var seconds = d % 60

5.用这个差值与3600(也就是小时)取余,再除以60(此时得到的是分钟),保留整数,就可以得到剩余的

var minutes = parseInt((d % 3600) / 60)

6.同理,想获取剩余的小时,就要用d与一天的秒数取余… …天数也是如此

var hours = parseInt((d % (24 * 3600)) / 3600)
var day = parseInt(d / (24 * 3600))

7.最后,我们拼接所有获取到的值

var x = (`距离中秋节还有${day}${hours}小时${minutes}${seconds}`);

8.显示到页面

cont.innerHTML = x

在这里插入图片描述

代码

<body>
    <span id="cont"></span>
    <script>
        var d1 = new Date('2022/9/10')
        var d = d1.getTime() - Date.now()
        d = parseInt(d / 1000)
        var seconds = d % 60
        var minutes = parseInt((d % 3600) / 60)
        var hours = parseInt((d % (24 * 3600)) / 3600)
        var day = parseInt(d / (24 * 3600))
        var x = (`距离中秋节还有${day}${hours}小时${minutes}${seconds}`);
        cont.innerHTML = x
        // console.log(d);
    </script>
</body>

网站公告

今日签到

点亮在社区的每一天
去签到