练习：简单时钟

最新推荐文章于 2024-10-07 17:45:00 发布

yeahSan

最新推荐文章于 2024-10-07 17:45:00 发布

阅读量84

点赞数 1

分类专栏： JavaScript 文章标签： html css 前端

本文链接：https://blog.csdn.net/m0_65729457/article/details/127622859

版权

JavaScript 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

在页面加载完成后即刻显示时钟的解决办法：

（1）先调用函数

（2）使用事件：load —- 当浏览器加载页面时触发该事件

===> 表示当页面加载时就运行showTime函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box{
        width: 500px;
        height: 150px;
        /* border: 1px solid #ccc; */
        margin: 20px auto;
        line-height: 150px;
        text-align: center;
    }
    #clock{
        width: 300px;
        height: 100px;
        border: 1px solid #ccc;
    }
</style>
<body>
    <div class="box">
        <div id="clock"></div>
        <p>
            <button id="btn_start">开始</button>
        </p>
    </div>
    <script>
        //1.创建变量
        var timer = null   //定时器变量
        var flag = true //标记变量：用来标识当前按钮是'开始'还是'暂停'
        showTime()
        //2.定义函数：用于显示时间
        function showTime(){
            //2.1、创建日期对象-- 当前日期
            let now = new Date()
            //2.2、取出日期的时间
            let h = now.getHours()
            let m = now.getMinutes()
            let s = now.getSeconds()
            h = h<10?'0'+h : h
            m = m<10?'0'+m : m
            s = s<10?'0'+s : s
            //2.3、将时间写入div中
            document.getElementById('clock').innerHTML = h + ':' + m + ':' + s
        }
        //3.给按钮注册click事件，在事件的处理程序中创建定时器
        let start = document.getElementById('btn_start')
        start.addEventListener('click',function(){
            //3.1、判断标记变量flag,若为true表示时间正在运行，按钮显示'暂停'
            if(flag){
                timer = setInterval(showTime,1000) //创建定时器
                flag = !flag //取反
                this.innerHTML = '暂停' //this代表的是当前的按钮start
            }else{
                clearInterval(timer) //清除定时器
                flag = !flag
                this.innerHTML = '开始'
            }
        })
    </script>
</body>
</html>