js定时器与数码时钟案例（源码及备注）

最新推荐文章于 2023-04-30 13:59:02 发布

SAKURE2210866448

最新推荐文章于 2023-04-30 13:59:02 发布

阅读量718

点赞数 2

文章标签：前端 js js定时器数码时钟原生js数码时钟

本文链接：https://blog.csdn.net/SAKURE2210866448/article/details/103341860

版权

js定时器与数码时钟案例

开启定时器

1、setInterval 间隔型

setInterval(参数一,参数二);

第一个参数是一个函数，第二个参数是时间（单位是毫秒）
意思就是每隔多长时间执行一次函数；

2、setTimeout 延时型

只执行一次

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>定时器</title>
        <script>
             let show = () =>{
    
                alert('a');
            }
            /* 无限执行 */
            setInterval(show,1000);//第一个参数是一个函数，第二个参数是时间，单位是毫秒
            //意思就是每隔1秒钟执行一次show函数

            /* 只执行一次 */
            setTimeout(show,1000);

        </script>
    </head>
</html>

两种定时器的区别

关于上述代码，setIterval(show,1000);无限弹出‘a’,而setTimeout(show,1000);只弹一次

停止定时器

想实现的功能：点击开始的时候弹’a’,点击关闭的时候停止。
首先准备两个按钮写上点击事件。
关于window.onload() 方法：
它用于在网页加载完毕后立刻执行的操作，即当 HTML 文档加载完毕后，立刻执行某个方法。
为什么要加这个方法：因为代码是从上到下加载的，但是我们的js代码写在了body前面，如果不加会找不到元素（因为那个时候body没有加载到）。

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>定时器的开启与关闭</title>
        <script>
            window.onload = ()=>{
    
                let oBtn1 = document.getElementById('btn1');
                let oBtn2 = document.getElementById('btn2');
                oBtn1.onclick = ()=>{
    
                    setInterval(() => {
    
                        alert('a');
                    }, 1000);
                }
            }
        </script>
    </head>
    <body>
        <input id="btn1" type="button" value="开启" />
        <input id="btn2" type="button" value="关闭" />

最低0.47元/天解锁文章