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

Posted 2023-02-05 小凡全栈日记

倒计时功能实现

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)

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