简单的倒计时(不用时间戳),两种方法

70 阅读1分钟
<!DOCTYPE html>
<html lang = "en" >
<head >
    <meta charset = "UTF-8" >
    <meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
    <title >Document</title >
    <script src = "https://code.jquery.com/jquery-3.6.0.min.js" ></script >
</head >
<body >
    <p></p>
    <p></p>
    <p></p>

<script !src = "" >
    let p=document.querySelectorAll("p")
    let xs=p[0];
    let fz=p[1]
    let m=p[2]

    //初始值
    //s控制几个小时,数字几就是几小时
    let s=3;
    let f=0;
    let i=0;
    //第一种方法
    // var timer=setInterval(function (){
    //     if(i>0){
    //         i--
    //     }else if(i==0&&f>0){
    //         f--;i=59;
    //     }else if(i==0&&f==0&&s>0){
    //         s--;
    //         f=59;
    //         i=59;
    //     }else {
    //         clearInterval(timer)
    //     }
    //
    //     xs.innerHTML=s>9?s:"0"+s
    //     fz.innerHTML=f>9?f:"0"+f
    //     m.innerHTML=i>9?i:"0"+i
    // },1000)



    //第二种方法
    var ms=s*60*60+f*60+i
    var temer =setInterval(function (){
        if(ms>0){
            ms--
        }else {
            clearInterval(temer)
        }

        var s=parseInt(ms/(60*60));
        var f=parseInt((ms-s*60*60)/60);
        var i=ms-s*60*60-f*60
        xs.innerHTML=s>9?s:"0"+s
        fz.innerHTML=f>9?f:"0"+f
        m.innerHTML=i>9?i:"0"+i
    },100)
</script >
</body >
</html >