利用JavaScript写出倒计时功能超详细

Posted 萌新北笙

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了利用JavaScript写出倒计时功能超详细相关的知识,希望对你有一定的参考价值。

倒计时功能实现

html

<div id="a1"></div>

javascript

setInterval(function () 
    var xzsj = new Date().getTime();  //现在时间
    var wlsj = new Date('2022/05/26').getTime(); //未来时间
    var sysj = (wlsj - xzsj) / 1000; //未来时间减去现在时间除以1000就是把它的时间戳转换成秒  时间戳的单位是毫秒
    //剩余时间=未来时间-现在时间  倒计时的原理就是未来时间减去现在时间
    var day = parseInt(sysj / 86400); //剩余秒数除以86400取整得出剩余天数
    var h = parseInt(sysj / 3600) - 24 * day; //剩余秒数除以3600得出剩余小时 取整后的剩余小时减去24乘剩余天数
    var m = parseInt(sysj % 3600 / 60); //剩余秒数整除3600得出来的余数除以60 取整得到剩余分数
    var s = parseInt(sysj % 60); //剩余秒数整除60得出来的余数 取整得到剩余秒数
    a1.innerHTML = day + "天" + h + "小时" + m + "分" + s + "秒"; //插入a1
, 1000)

效果如下图(如需用户体验更好自行补零)


求过去时间同理

setInterval(function () 
    var xzsj = new Date().getTime();  //现在时间
    var gqsj = new Date('2022/05/24').getTime(); //过去时间
    var sysj = (xzsj - gqsj) / 1000; //现在时间减过去时间除以1000就是把它的时间戳转换成秒  时间戳的单位是毫秒
    //剩余时间=现在时间-过去时间  求过去时间的原理就是现在时间减去过去时间
    var day = parseInt(sysj / 86400); //剩余秒数除以86400取整得出剩余天数
    var h = parseInt(sysj / 3600) - 24 * day; //剩余秒数除以3600得出剩余小时 取整后的剩余小时减去24乘剩余天数
    var m = parseInt(sysj % 3600 / 60); //剩余秒数整除3600得出来的余数除以60 取整得到剩余分数
    var s = parseInt(sysj % 60); //剩余秒数整除60得出来的余数 取整得到剩余秒数
    a1.innerHTML = day + "天" + h + "小时" + m + "分" + s + "秒"; //插入a1
, 1000)

效果如下图(如需用户体验更好自行补零)

以上是关于利用JavaScript写出倒计时功能超详细的主要内容,如果未能解决你的问题,请参考以下文章

利用JavaScript写出倒计时功能超详细

JavaScript五个常用功能/案例:计时器 | 流程控制 | 闭包应用 | arguments剩余参数 | 二次封装函数

JavaScript倒计时算法(计算剩余多少天)实现

如何能获取javaScript setTimeout() 中剩余的时间?

一个付款剩余时间倒计时的功能

考试剩余时间倒计时