JS做一个显示当前时间的页面

最新推荐文章于 2024-10-01 18:51:18 发布

叫我魏什么

最新推荐文章于 2024-10-01 18:51:18 发布

阅读量587

点赞数 1

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/Lou__Lan/article/details/127674996

版权

JS做一个显示当前时间的页面，添加按钮，点击按钮可以暂停页面显示的时间，再次点击按钮页面时间恢复运行。

<!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>
    .out {
        display: inline-block;
        border: 2px solid #999;
        padding: 1px;
    }

    #timeShow {
        width: 300px;
        line-height: 200px;
        text-align: center;
        font-size: 50px;
        border: 2px solid #999;
    }

    #startStopBtn {
        margin-top: 30px;
        margin-left: 50px;
        width: 200px;
        height: 60px;
        font-size: 40px;
    }
</style>

<body onload="timeMinus()">
    <div class="out">
        <div id="timeShow"></div>
    </div><br>
    <button id="startStopBtn">暂停</button><br />

    <script>
        let timeShow = document.getElementById('timeShow');  // 获取显示时间的区域ID
        let startStopBtn = document.getElementById('startStopBtn');  // 获取按钮的ID

        let timer;  //声明一个变量，用来存储时间代码
        let isFlag = true;  // 定义开关变量
        function timeMinus() {
            var timeNow = new Date(); // 创建日期对象
            var hour = timeNow.getHours(); // 获取当前时间的 时
            hour = hour < 10 ? '0' + hour : hour  // 当时间成为个位数时在十位位置加0
            var minutes = timeNow.getMinutes(); // 获取当前时间的 分
            minutes = minutes < 10 ? '0' + minutes : minutes
            var seconds = timeNow.getSeconds(); // 获取当前时间的 秒
            seconds = seconds < 10 ? '0' + seconds : seconds
            timeShow.innerHTML = `${hour}:${minutes}:${seconds}`  // 将时间渲染在页面
        }
        timer = setInterval(() => timeMinus(), 1000)  // 定义时间函数并赋值给timer；
        startStopBtn.addEventListener('click', () => {   // 定义点击事件
            isFlag = !isFlag;                        // 当点击之后对开关进行取反
            if (isFlag) {                               // 进行判断 当isFlag 为true时 执行 时间函数
                timer = setInterval(() => timeMinus(), 1000)
                startStopBtn.innerHTML = "暂停"         // 时间向前走时把按钮文本变为暂停
            } else {             // 进行判断 当isFlag 为false时 清除时间函数，让时间暂停
                clearInterval(timer);
                startStopBtn.innerHTML = "开始"         // 时间暂停时把按钮文本变为开始
            }
        })

    </script>
</body>

</html>