倒计时

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="task22-3" />
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
  
  </style>
</head>
<style>
    li{
        border: 1px solid red;
    }
</style>
<body>
<select placeholder="选择一个时间" id=myselect>
    <option value="1"  selected>1分钟</option>
    <option value="5">5分钟</option>
    <option value="10">10分钟</option>
    <option value="20">20分钟</option>
</select>
<button id=startButton>start</button>
<button id=pauseButton disabled>pause</button>
<button id=resumeButton disabled>resume</button>
<div id="outputDiv">
    
</div>
<script>
var timeLeft=10
var timer=null
function showTime(){
    outputDiv.textContent=timeLeft+'秒';
    if(timeLeft===0) return;
    --timeLeft;
    timer=setTimeout(showTime,1000)
}
startButton.onclick=function(){
    timeLeft=parseInt(myselect.value)*60
    console.log(timeLeft)
    if(timer){
        window.clearTimeout(timer)
    }
    showTime()
    pauseButton.disabled=false
}
pauseButton.onclick=function(){
    console.log(timer)
    if(timer){
        console.log("123")
        window.clearTimeout(timer)
    }
    resumeButton.disabled=false
}

resumeButton.onclick=function(){

    showTime()
    pauseButton.disabled=false
}

</script>


</body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容