代码如下
<!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>时间</title>
<style>
/* 首先给盒子设置样式,因人而异 */
.box {
width: 230px;
height: 100px;
background-color: #fff;
box-shadow: 1px 1px 20px 4px #8888;
text-align: center;
line-height: 100px;
margin: 100px auto;
font-size: 40px;
color: #000;
display: flex;
justify-content: space-evenly;
}
</style>
</head>
<body>
<div class="box" id="box"></div> <!-- 创建一个div用来显示时间内容 -->
<script>
let box=document.getElementById('box');//获取box元素
time(); //方法写好之后先调用一遍,因为刚开始打开网页默认内容是div本身的内容
//所以就先调用一遍让它显示返回的内容
function time() {
let date = new Date(); //创建时间对象
let Hours = date.getHours(); //获取时
let Min = date.getMinutes(); //获取秒
let Sec = date.getSeconds(); //获取分
//下面3元表达式作用是,假如说当时分秒的数字是123这种类型的个数
//就会显得不好看,所以要判断,如果小于10,就在数字的前面加上一个字符串的0,
//如果大于10就直接不显示字符串的0;
Hours = Hours < 10 ? '0' + Hours : Hours;
Min = Min < 10 ? '0' + Min : Min;
Sec = Sec < 10 ? '0' + Sec : Sec;
//函数返回的结果是 box盒子innerHTML内容里面就是时分秒;
return box.innerHTML = Hours + "\t:\t" + Min + "\t:\t" + Sec;
}
setInterval(time, 1000);
//计时器,1000毫秒等于1秒,数字时钟显示的单位就是都是一秒切换一次的,所以就一秒钟执行一次
</script>
</body>
</html>