HTML+JavaScript实现动态时间

最新推荐文章于 2023-07-05 10:47:54 发布

smallapple111

最新推荐文章于 2023-07-05 10:47:54 发布

阅读量902

点赞数

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/smallapple111/article/details/128376515

版权

直接上图给代码

HTML代码：

<!DOCTYPE html>
<html lang="zh">
<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>
<body>
    <h1 id="clock"></h1>
    <button onclick="startClock()">打开时钟</button>
    <button onclick="stopClock()">关闭时钟</button>
    <script src="clock.js"></script>
</body>
</html>

js代码：


var t;
console.log("事件没有触发时，t的值为："+t);
function clock() {
    let date = new Date();
    let year = date.getFullYear();
    let month = date.getMonth() + 1 > 9 ? date.getMonth() + 1 : '0' + date.getMonth() + 1;
    let day = date.getDate() > 9 ? date.getDate() : '0' + date.getDate();
    let week = date.getDay();
    switch (week) {
        case 0:
            week = '日';
            break;
        case 1:
            week = '一';
            break;
        case 2:
            week = '二';
            break;
        case 3:
            week = '三';
            break;
        case 4:
            week = '四';
            break;
        case 5:
            week = '五';
            break;
        case 6:
            week = '六';
            break;
    }

    let hour = date.getHours();
    let meridiem = hour > 12 ? 'PM' : 'AM';

    hour = hour > 12 ? hour % 12 : hour;
    hour = hour > 9 ? hour : '0' + hour;

    let minute = date.getMinutes() > 9 ? date.getMinutes() : '0' + date.getMinutes();

    let second = date.getSeconds() > 9 ? date.getSeconds() : '0' + date.getSeconds();

    var time = year + '年' + month + '月' + day + '日' + ' ' + '星期' + week + ' ' + hour + ':' + minute + ':' + second + ' ' + meridiem;

    document.getElementById('clock').innerText = time;
}

function startClock() {
    //首先判断startClock()这个函数是否被执行过，如果没有被执行，那么t的类型undefined
    if(typeof(t) == "undefined"){
        t = setInterval('clock()', 1000);
        console.log('我在开启时钟，t的值为：'+t);
    }else{
    //如果startClock()已被执行过，那么t的值就是一个数字，首先要用clearInterval()清除已执行的setInterval()，不然会导致"关闭时钟"按钮失效
        clearInterval(t);
        t = setInterval('clock()', 1000);
        console.log('我在开启时钟，t的值为：'+t);
    }
    
}



function stopClock() {
    clearInterval(t);
    //控制台输出t的值
    console.log('我在关闭时钟，t的值为：'+t);
}

在写的时候，遇到一个问题：如果重复点击”打开时钟“按钮，则会导致”关闭时钟“按钮失效。想了好几天没想到为什么，后来在控制台输出setInterval()这个函数的值，找到了原因。

当我点击多次”开启时钟“，就会启动多个setInterval()函数来不断运行，因为一个setInterval()对应一个唯一的ID值，但是因为在代码中变量t不断被赋予新的ID值，所以点击”关闭时钟”按钮时，只会关掉最后一次t=7的setInterval()，而t=3、t=4、t=4、t=5、t=6没有被关闭。最后在”开始时钟“中添加了一个判断，是否已经启动过了，如果启动过了，先清除旧的setInterval()，再开启一个新的setInterval()，并且把值赋给t。