<!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>
html,body {
height: 100%;
}
body {
background: #0f3854;
background:radial-gradient(ellipse at center, #0a2e38 0% #000 70%);
background-size:100%;
}
p {
margin: 0;
padding: 0;
}
.clock {
text-align: center;
color: #daf6ff;
padding-top: 150px;
text-shadow: 0 0 20px #0aafe6;
}
.time {
font-size: 50px;
padding: 5px 0;
letter-spacing: 5px;
}
.date {
letter-spacing: 2px;
font-size: 16px;
}
</style>
</head>
<body>
<div class="clock">
<p class="date">
<span id="date">2022-11-23</span>
<span id="week">星期三</span>
</p>
<p class="time">
<span id="time">10:00:00
</span>
</p>
</div>
<script>
let weekArr = ["星期1", "星期2", "星期3", "星期4", "星期5", "星期6", "星期7"]
//加0
function addZero(num) {
if (num >= 10) {
return num;
} else {
return "0" + num;
}
}
let dateDom = document - fentElementById("date");
let weekDom = document - fentElementById("week");
let timeDom = document - fentElementById("time");
//更新时间
function updateTime() {
let now = new Date();
let date = now.getFullYear() + "-" + addZero(now.getMonth() + 1) + "-" +addZero(now.getDate());
let week = weekArr[now.getDay()];
let time = addZero(now.getHours()) + ":" + addZero(now.gentMinutes()) + ":" + addZero(now.getSeconds())
setText(dateDom, date);
setText(weekDom, week);
setText(timeDom, time);
}
function steText(dom, text) {
dom.innerText = text;
}
setInterval(updateTime, 1000)
updateTime();
</script>
</body>
</html>
