<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<p>在页面显示一个时钟</p>
<p id="demo"></p>
</body>
<script>
var myVar = setInterval(function () {
myTimer(); //赋值函数,将封装函数从外面调用
}, 1000);
//声明一个带定时器的函数,函数间隔1秒执行一次,1000毫秒=1秒;
function myTimer() {
var d = new Date();
//获得当日的日期。
var t = d.toLocaleTimeString();
// 根据本地时间把 Date 对象的时间部分转换为字符串,并赋值给t;
document.getElementById("demo").innerHTML = t;
//获取ID为“demo”的节点,并将t赋值给它
console.log(t);
//时间是一直在改变,相当于不停的用新值覆盖旧值,如果打印在控制台,会不停显示新的值
}
//页面显示的是==>>在页面显示一个时钟 20:19:37
//控制台显示的是==>> 20:25:47 20:25:48 20:25:49 20:25:50 20:25:51 。。。。。
</script>
</html>
运行结果