如何用JS实现动态时钟
大致效果：
CSS+HTML+JS如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 设置样式 */
div {
width: 100vw;
height: 100vh;
text-align: center;
font-size:100px;
font-weight: 900;
color: aqua;
}
</style>
</head>
<body>
<!-- 添加div盒子 -->
<div id="time"></div>
</body>
<script>
// 获取元素
var gss = document.getElementById('time');
// 封装一个函数
var getTime = function() {
// 获取最新时间
var date = new Date();
var hour = date.getHours() < 10 ? '0' : date.getHours();
var min = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
var sec = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
// 拼接数据，并设置一个变量来存储拼接好的数据
var time = `${hour}:${min}:${sec}`;
// 改变元素内容
gss.innerHTML = time
}
// 添加定时器，用以定时更新
setInterval(() => {
// 调用函数
getTime()
}, 1000)
</script>
</html>
