<!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>