直接上图给代码
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。