制作一个可暂停的倒计时

miriz2333 / 2023-07-03 / 原文

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin: 0;padding: 0;}
        .box{width: 200px;margin: 60px auto;}
    </style>
</head>
<body>
<div class="box">
    <span>倒计时:</span>
    <span class="num">10</span><br />
    <button class="btn">停止倒计时</button>
    <button class="go">继续倒计时</button>
    <input type="number" id="shuRu">
    <audio src="" controls></audio>
</div>
</body>

</html>
<script type="text/javascript">
    let number = document.getElementsByClassName("num")[0];
    let btns = document.getElementsByClassName("btn")[0];
    let gos = document.getElementsByClassName("go")[0];
    let num1 = 10;
    var ado =document.getElementById("ado")

    var timer=null;

    //开始
    function act(){
        stopPlay();
        timer = setInterval(play,1000);//倒计时速度
    }
    //数值递减
    function play(){
        num1--;
        number.innerHTML = num1;
        if(num1<=0){
            stopPlay();
        }
    }
    //清除定时器
    function stopPlay(){
        clearInterval(timer);}
    act();
    //暂停
    btns.onclick=function(){stopPlay();}
    //继续
    gos.onclick = function(){
        act();
    }
    function boFang(){
        if (number.innerHTML==0){
            ado.play();
        }else {
            setTimeout(boFang,1000);
        }
    }
    setTimeout(boFang,1000);

</script>