<!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>
<style>
*{
margin: 0;
padding: 0;
}
span{
display: inline-block;
height: 50px;
width: 50px;
background-color: black;
color: white;
line-height: 50px;
text-align: center;
}
</style>
</head>
<body>
<div>
<span class="hour">1</span>
<span class="minute">2</span>
<span class="sec">3</span>
</div>
<script>
let hour=document.querySelector(".hour")
let minute=document.querySelector(".minute")
let second=document.querySelector(".sec")
// 引入元素
let date=+new Date()
// 总毫秒数
function getnowtime(date){
// 函数
h=parseInt(date/1000/60/60%24)
h=h>10? h:"0"+h
// 三元表达式 作用是在数字前加0
m=parseInt(date/1000/60%60)
m=m>10? m:"0"+m
s=parseInt(date/1000%60)
s=s>10? s:"0"+s
// 获取了时分秒 不确定可以在控制台先打印看看
// console.log(date)
// console.log(s);
// console.log(m);
// console.log(h);
}
getnowtime(date)
// 运行函数
hour.innerHTML=h
minute.innerHTML=m
second.innerHTML=s
// 赋值
time1=setInterval(function(){
// 定时器
let date=+new Date()
getnowtime(date)
// 运行函数
hour.innerHTML=h
minute.innerHTML=m
second.innerHTML=s
// 赋值
},1000)
// console.log(date);
</script>
</body>
</html>