Renderings:
Man of few words said, the code has notes! ! !
Source:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数码时钟</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
width: 800px;
height: 100px;
margin: 100px auto;
text-align: center;
}
li{
width: 100px;
height: 100px;
float: left;
list-style: none;
}
img{
width: 80px;
height: 100px;
}
li:nth-child(3),li:nth-child(6){
width: 100px;
height: 100px;
/* 时分秒之间的 冒号 是用背景图实现的 */
background: url(./images/mao.png) no-repeat center 20px;
background-size: 100% 100%;
}
</style>
</head>
<body>
<ul>
<li><img src="images/0.png" alt=""></li>
<li><img src="images/0.png" alt=""></li>
<li></li> <!-- 用于存放时 分之间的 冒号 -->
<li><img src="images/0.png" alt=""></li>
<li><img src="images/0.png" alt=""></li>
<li></li> <!-- 用于存放分 秒之间的 冒号 -->
<li><img src="images/0.png" alt=""></li>
<li><img src="images/0.png" alt=""></li>
</ul>
<script>
window.onload = function(){ //页面加载完毕后，执行函数
//启动定时器
setInterval(function(){
var time = new Date() //定义一个日期对象
var h = time.getHours() //获取当前小时数字
var m = time.getMinutes() //获取当前分钟数字
var s = time.getSeconds() //获取当前秒数 数字
var timeArray = [parseInt(h/10), h%10, parseInt(m/10), m%10, parseInt(s/10), s%10] //将时间上的每个数字按照顺序放在数组里
var imgs = document.getElementsByTagName('img') //获取所有图片标签，存放在数组里
for(var i = 0; i < imgs.length; i++){
imgs[i].src = 'images/' + timeArray[i] + '.png' //改变图片的src属性，切换图片
}
},1000) //每隔一秒刷新一次
}
</script>
</body>
</html>
Picture material Source: https: //blog.csdn.net/zhuxiandan/article/details/76202609
