简易计时器

先生不会画画

已于 2023-08-04 15:50:42 修改

阅读量164

点赞数

分类专栏： JavaScript 文章标签： js 计时器

于 2019-11-02 11:34:57 首次发布

本文链接：https://blog.csdn.net/qq_43604753/article/details/102870030

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

JS实现简单计时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    div{height:200px;width:200px;border:1px solid #000;text-align: center;font:30px/200px "";margin:100px auto;}
    input{display:block;width:200px;height:50px;border:1px solid #000;text-align: center;margin:0 auto;}
</style>
<body>
    <div id ="box">4</div>
    <input type="button" id="btn" value="开始"/>    
</body>
<script>
    var btn = document.getElementById("btn");
    var box = document.getElementById("box");
    var type = 0;
    var num = box.innerHTML;
    var b = box.innerHTML;
    var s; 

    btn.onclick =function(){ 
        if(type == 0){
        clearInterval(s);
        s = setInterval(function(){
            if(num == 1){
                num="结束了";
                clearInterval(s);
                btn.value="复位";
                type =2;
            }else{
            num--;
            }
        box.innerHTML = num;  
        },1000);
        btn.value="暂停";
        type = 1;
        }else if(type === 1){
            clearInterval(s);
            type = 0;
            btn.value="继续";
        }else{
            num = b;
            box.innerHTML = b;
            btn.value="开始";
            type =0;    //这个是复位后重复执行
        }
    }
</script>
</html>