用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>