JavaScript 定时器与简单时钟设计_javascript使用定时器调用计时器函数模拟时钟特效-优快云博客

本文链接：https://blog.youkuaiyun.com/LiLi_code/article/details/86493819

本文介绍了JavaScript中的定时器，包括setInterval用于周期性执行任务，setTimeout则是一次性执行。通过递归调用setTimeout可以模拟setInterval的效果。文章还提到了如何使用JavaScript设计一个时钟，并强调在脚本中使用window.onload确保页面完全加载后再执行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先定义一个方法：

function show(){
    console.log('执行了')
}

一、可直接运行定时器，定时器 setInterval(x,y)每隔y毫秒运行x方法。此定时器会一直运行。

setInterval(show,1000)

可通过以下方法消除定时器：当然此时，运行时间就要注意了，1000毫秒的话，可能定时器还没有开始运行，就已经先被消除掉了

// 定义一个变量记录定时器
let s = setInterval(show,1000)

// 清除定时器
clearInterval(s)

二、另外一种定时器： setTimeout(x,y) 每隔 y毫秒后运行x （相似于定时炸弹，到时间只会运行一次）

setTimeout(show,1000)

可通过递归的方式，使其出现与setInterval(x,y) 一样的效果

show1()
function show1(){
    show()
    setTimeout(show1,1000) //递归调用自己
}

因此，可联想每隔一秒执行一次，实现时钟设计

1、JavaScript脚本文件，严格上要求在其内写：window.onload = function(){ } 保证整个页面先全部加载好

<script>
        //页面加载完毕后触发
        window.onload = function(){
            show() //首先运行一次，保证页面初始加载时就出现结果而不用等待一秒
            function show(){
                let date = new Date(); //自己取值拼接
                let year = date.getFullYear()
                let day = date.getDate()
                let month = date.getMonth() + 1
                let hour = date.getHours()
                let min = date.getMinutes()
                let sec = date.getSeconds()
                let show = year + '-' + month + '-' + day + ' ' + hour + ':' + min + ':' + sec; 
                /*dom的一种调用方式，通过ID取值, 不断重复加载，从而能在一个页面上动态显示，不同于document.write()*/
                document.getElementById("time").innerHTML = show 
            }
            //法一：用setInterval做时钟
            //setInterval(show,1000)


            //法二：用setTimeout做时钟
            show1()
            function show1(){
                show()
                setTimeout(show1,1000)
            }
        }
</script>

2、整个时钟.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #time {
            width: 200px;
            margin: 0 auto;
            font-size: 20px;
            font-weight: bold;
            color: #ff883c;
        }
    </style>
    <script>
        //页面加载完毕后触发
        window.onload = function(){
            show()
            function show(){
                let date = new Date();
                let year = date.getFullYear()
                let day = date.getDate()
                let month = date.getMonth() + 1
                let hour = date.getHours()
                let min = date.getMinutes()
                let sec = date.getSeconds()
                let show = year + '-' + month + '-' + day + ' ' + hour + ':' + min + ':' + sec;
                document.getElementById("time").innerHTML = show
            }
            //用setInterval做时钟
            //setInterval(show,1000)
            //用setTimeout做时钟
            show1()
            function show1(){
                show()
                setTimeout(show1,1000)
            }
        }
    </script>
</head>
<body>
    <div id="time"> </div>
</body>
</html>

3、结果展示