JS实现倒计时效果

2023-12-25 16:07| 来源: 网络整理| 查看: 265

JS实现倒计时效果如下：

主要是需要条件如下：

var nowTime = +new Date(); //获取当前总毫秒数

var inputTime = +new Date(time); //用户输入的总毫秒数

times = (inputTime - nowTime) / 1000; //剩余的总秒数

然后将总剩余秒数转换成天时分秒

通过setInterval()方法设置定时器，待倒计时为0时，判断并使用clearInterval()清除定时器

全部代码如下：

Document body { font-size: 10vw; text-align: center; }

//倒计时主要得到用户输入的时间减掉当前总毫秒数 //将times剩下总时间设置全局变量方便倒计时函数可以调用 var times = null; function countDown(time) { var nowTime = +new Date(); //获取当前总毫秒数 var inputTime = +new Date(time); //用户输入的总毫秒数 times = (inputTime - nowTime) / 1000; //剩余的总秒数 //转换为天 var d = parseInt(times / 60 / 60 / 24); //转换为时 var h = parseInt(times / 60 / 60 % 24); //设置成时钟格式 00：00：00 利用三元运算符 h = h < 10 ? "0" + h : h //转换为分 var m = parseInt(times / 60 % 60); m = m < 10 ? "0" + m : m //转换成秒 var s = parseInt(times % 60); s = s < 10 ? "0" + s : s return d + "天 " + h + ":" + m + ":" + s; } var p = document.querySelector("p"); var timer = setInterval(function() { p.innerText = countDown('2023-03-12 12:00:00'); if (times < 0) { clearInterval(timer) } }, 1000);

time用户输入的时间可以自己设置。

【本文地址】

公司简介

联系我们