图片时钟案例
2021-08-04 本文已影响0人
升龙无涯
我们都知道时钟由时分秒组成，本案例使用图片来代替时分秒所用的数字，最终效果如下：
图片时钟效果
html布局代码如下：
<body>
<img src="images/0.JPG">
<img src="images/0.JPG">
<span><img src="images/colon.JPG"></span>
<img src="images/0.JPG">
<img src="images/0.JPG">
<span><img src="images/colon.JPG"></span>
<img src="images/0.JPG">
<img src="images/0.JPG">
</body>
js代码如下：
// 处理数字的函数：如果数字小于10则给前面补0,形成2位的字符串，如果数字大于等于10，则给前面添加空字符串，形成2位的字符串
function addZero(num){
if(num<10){
return '0' + num
}else{
return '' + num
}
}
function showClock(){
// 获取当前时间日期对象
var date = new Date()
// 从时间日期对象中获取到时分秒
var hours = date.getHours()
var minutes = date.getMinutes()
var seconds = date.getSeconds()
// 将时分秒拼接在一起组成固定的6位的字符串
var str = addZero(hours) + addZero(minutes) + addZero(seconds)
// 遍历字符串
for(var i=0;i<str.length;i++){
// 将 每个字符对应的图片的路径 设置为 当前这个字符数字.jpg
oImgs[i].src = './images/' + str[i] + '.jpg'
}
}
// 获取所有的数字(时分秒)图片
var oImgs = document.querySelectorAll('body>img');
// 将函数调用一次，使得一刷新页面就能显示当前时间的图片
showClock()
// 设置定时器，每秒让这个函数执行一次
setInterval(showClock,1000)
素材如下：
0.JPG
1.JPG
2.JPG
3.JPG
4.JPG
5.JPG
6.JPG
7.JPG
8.JPG
9.JPG
colon.JPG
