<!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>
#smsz{
width: 500px;
height: 100px;
margin: 0 auto;
text-align: center;
line-height: 100px;
}
#text{
font-size: 20px;
color: rgb(122, 145, 117);
font-weight: 800;
}
</style>
</head>
<body>
<div id="smsz">
<span id="text"> 当前时间：</span>
<span id="h_img"> <img id="h_img1" src="./images/0.png" alt=""> <img id="h_img2" src="./images/0.png"
alt=""></span>时
<span id="m_img"> <img id="m_img1" src="./images/1.png" alt=""> <img id="m_img2" src="./images/0.png"
alt=""></span>分
<span id="s_img"> <img id="s_img1" src="./images/2.png" alt=""><img id="s_img2" src="./images/0.png" alt="">
</span>秒
</div>
<script>
function smsz(){
var d1 = new Date();
function addZero(d) {
if (d < 10) { d = "0" + d; }
return d;
}
var h = addZero(d1.getHours());
var m = addZero(d1.getMinutes());
var s = addZero(d1.getSeconds());
var h_img1 = document.getElementById("h_img1");
var h_img2 = document.getElementById("h_img2");
var m_img1 = document.getElementById("m_img1");
var m_img2 = document.getElementById("m_img2");
var s_img1 = document.getElementById("s_img1");
var s_img2 = document.getElementById("s_img2");
function hqsj(h, h_img1, h_img2) {
var h1 = parseInt(h / 10);
var h2 = h % 10;
h_img1.src = `./images/${h1}.png `;
h_img2.src = `./images/${h2}.png `;
}
hqsj(h, h_img1, h_img2);
hqsj(m, m_img1, m_img2);
hqsj(s, s_img1, s_img2);
}
smsz();
setInterval(smsz,1000);
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
