一 效果展示
二 步骤
在网上下载0-9的jpg图片，将其复制粘贴到项目images文件中，注意，图片的命名一定是数字形式，例如：1.jpg，风景图也是自行下载然后粘贴到相应的文件。
三 代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
body{
background:url("./img/风景.webp")
}
.box{
position:absolute;
left:30%;
top:30%;
background:pink;
}
#shiShi{
background:rgb(255,255,255);
}
#shiGe{
background:rgb(255,255,255);
}
.dian{
width:20px;
height:50px;
}
#fenShi{
background:rgb(255,255,255);
}
#fenGe{
background:rgb(255,255,255);
}
#miaoShi{
background:rgb(255,255,255);
}
#miaoGe{
background:rgb(255,255,255);
}
</style>
<body>
<div class="box">
<img id="shiShi" src="img/0.png" width="35" height="60" alt=""/>
<img id="shiGe" src="img/0.png" width="35" height="60" alt=""/>
<img class="dian" src=" img/colon.png"/>
<img id="fenShi" src="img/0.png" width="35" height="60" alt=""/>
<img id="fenGe" src="img/0.png" width="35" height="60" alt=""/>
<img class="dian" src=" img/colon.png"/>
<img id="miaoShi" src="img/0.png" width="35" height="60" alt=""/>
<img id="miaoGe" src="img/0.png" width="35" height="60" alt=""/>
</div>
<div></div>
<script>
let images=[
" img/0.png",
" img/1.png",
" img/2.png",
" img/3.png",
" img/4.png",
" img/5.png",
" img/6.png",
" img/7.png",
" img/8.png",
" img/9.png",
];
function geWei(num){
return num%10;
}
function shiWei(num){
return (num-num%10)/10;
}
function getImage(id){
return document.getElementById(id)
}
function timeGo() {
let myDate = new Date();
let shi = myDate.getHours();
let fen = myDate.getMinutes();
let miao = myDate.getSeconds();
getImage("shiShi").src = images[shiWei(shi)];
getImage("shiGe").src = images[geWei(shi)];
getImage("fenShi").src = images[shiWei(fen)];
getImage("fenGe").src = images[geWei(fen)];
getImage("miaoShi").src = images[shiWei(miao)];
getImage("miaoGe").src = images[geWei(miao)];
}
setInterval(function() {
timeGo();
}, 1000);
</script>
</body>
</html>四 相关知识
实现步骤
- 定义了一个图片路径数组images，包含了数字0到9的图片路径。
- 定义了三个函数geWei(num)、shiWei(num)和getImage(id)，分别用于获取一个数字的个位、十位和获取指定id的图片元素对象。
- 定义了timeGo()函数，该函数获取当前时间的小时、分钟和秒，然后将对应的数字图片显示在网页上的对应位置。
- 使用setInterval()函数每隔1秒钟调用一次timeGo()函数，实现时钟的实时更新。
setInterval(function() {
timeGo();
}, 1000);
这段代码使用 JavaScript 中的 `setInterval()` 函数来定时执行 `timeGo()` 函数。
`setInterval()` 函数是 JavaScript 中的一个定时器函数，用于按照指定的时间间隔定时执行指定的函数或代码。它接受两个参数：第一个参数是要执行的函数或一段要执行的代码，第二个参数是时间间隔，以毫秒为单位。
在这个代码中，`setInterval()` 函数每隔1000毫秒（即每隔1秒）调用一次 `timeGo()` 函数。这意味着，每秒钟都会执行一次 `timeGo()` 函数，更新网页上显示的时钟，实现实时显示当前时间的效果。
