HTML+CSS to make a colorful digital clock The
renderings are as follows:
HTML part of the code is as follows:
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数字时钟</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="clock_box">
<div class="clock">
<p id="time"></p>
</div>
</div>
<script>
// 获取页面id=time的元素（P元素<p id="time">12:12:12 AM</p>）
var time = document.querySelector("#time");
// 定义函数传入time元素
function up(time_el) {
// 获取当前时间
let date = new Date();
// 获取时分秒
let h = date.getHours();
let m = date.getMinutes();
let s = date.getSeconds();
// 上午与下午
let day_night = "AM";
// 计算上午与下午
if (h > 12) {
h = h - 12;
day_night = "PM";
}
// 如果时间小于10则前面补充0
if (h < 10) {
h = "0" + h; }
if (m < 10) {
m = "0" + m; }
if (s < 10) {
s = "0" + s; }
// 拼接时间并且赋值给time元素的文本中，从而显示
time_el.textContent = h + ":" + m + ":" + s + " " + day_night;
}
// 定时器，每秒执行一次实现更新
setInterval(() => {
up(time);
}, 1000);
</script>
</body>
</html>
The CSS part of the code is as follows:
:root {
--color2: #56d5fc;
--color4: #def700;
--color6: #fa3195;
}
* {
margin: 0;
padding: 0;
}
html {
font-size: 14px;
}
body {
width: 100vw;
height: 100vh;
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Montserrat', sans-serif, Arial, 'Microsoft Yahei';
}
.clock_box {
position: relative;
width: 380px;
height: 80px;
border-radius: 10px;
background-image: linear-gradient(135deg, var(--color2), var(--color4), var(--color6));
/* 居中 */
display: flex;
justify-content: center;
align-items: center;
animation: animate 4s linear infinite;
}
.clock_box::after, .clock_box::before {
position: absolute;
content: "";
/* 集成父级样式 */
background-image: inherit;
width: 100%;
height: 100%;
z-index: -1;
border-radius: 10px;
filter: blur(15px);
}
.clock_box::before {
filter: blur(100px);
}
.clock {
position: absolute;
left: 10px;
right: 10px;
top: 10px;
bottom: 10px;
background-color: #2b2a2a;
border-radius: 8px;
/* 居中 */
display: flex;
justify-content: center;
align-items: center;
}
.clock p {
font-size: 50px;
font-weight: bold;
color: transparent;
letter-spacing: 2px;
background-image: linear-gradient(135deg, var(--color2), var(--color4), var(--color6));
/* text不是通用样式属性值 */
background-clip: text;
/* 这个是chrome */
-webkit-background-clip: text;
}
@keyframes animate {
100% {
/* 色相变化 */
filter: hue-rotate(360deg);
}
}