js--bom计时器

最新推荐文章于 2023-06-25 16:19:00 发布

等待戈多的莱昂纳多

最新推荐文章于 2023-06-25 16:19:00 发布

阅读量211

点赞数 2

分类专栏：前端基础。

本文链接：https://blog.csdn.net/weixin_44892520/article/details/98474448

版权

前端基础。专栏收录该内容

42 篇文章 0 订阅

订阅专栏

bom:browser object model
1.计时器
setTimeout(函数,倒计时毫秒数)—两个参数

    <button>点击开始</button>
</head>
<body>
<script>
    var btn=document.querySelector("button");
    btn.onclick=function(){
        setTimeout(function(){
            console.log("计时完成");
        },3000);
        console.log("点击事件");
    }
</script>

setTimeout()是异步的，且会返回一个计时器编号。
2.清除计时器：
clearTimeout(计时器名称)—一个参数

    btn2.onclick=function(){
        clearTimeout(timer1);
    }

3.实现连续计时

    <button id="btn1">点击开始</button>
    <h1></h1>
</head>
<body>
<script>
    var timer1,num=0;
    var h1=document.querySelector("h1");
    btn1.onclick=function(){
        interval(function(){
            num++;
            h1.innerHTML=num;
        },1000);
    }

    function interval(callback,duration) {
       var timer1= setTimeout(function(){
            callback();
            interval(callback,duration);
        },duration);
    }

</script>