If you smile when no one else is around,you really mean it.
实现效果
实现效果
图片素材
图片素材
原理分析
- 用
setInterval（fn, 1000）来循环刷新图片。 - 用
date对象的getHours()、getMinutes()、getSeconds()方法来获取当前的时、分、秒，并且拼接成字符串。 - 通过字符串的处理来改变
<img>的src，从而达到改变图片显示的目的。
代码
<body style="background:black; color: white; font-size:50px; padding: 50px 80px; ">
<img src="images/0.png" />
<img src="images/0.png" />
:
<img src="images/0.png" />
<img src="images/0.png" />
:
<img src="images/0.png" />
<img src="images/0.png" />
</body>
window.onload = function () {
//获取img元素数组
aImg = document.getElementsByTagName('img');
function tick(){
var oDate = new Date();
// 获取当前的时分秒拼接成长度为6的字符串
var str = toDou(oDate.getHours()) +
toDou(oDate.getMinutes()) +
toDou(oDate.getSeconds());
// 遍历所有img，更新src
for(var i = 0; i < aImg.length; i++){
// 第i张图片的src对应str的第i为
aImg[i].src = "images/" + str.charAt(i) + ".png";
}
}
// 设置定时器
setInterval(tick, 1000);
// 初始化
tick()
}
// 为了保证str的长度是6，用toDou()来为一位数补0
function toDou(num) {
return num < 10 ? "0" + num : "" + num;
}
分析总结
-
更新
src的整体思路是通过长度为6 的字符串str和长度为6的aImg数组对象一一对应，而获取的时分秒有可能是一位数，所以用toDou(num)来补位。 -
toDou (num)中用的是三元运算符，简化了代码。
//用if esle
function toDou(num){
if(n<10){
return "0"+num;
}else{
return ""+num;
}
}
//用三元运算符
function toDou(num) {
return num < 10 ? "0" + num : "" + num;
}
-
由于setIteval(fn, 1000)的执行顺序是先延迟，再执行函数，所以在最后单独调用一下tick()，来防止刷新页面后的第一秒显示的是00：00：00。
-
还有一点，复习下
String对象的charAt()方法：
charAt(index)方法可返回指定位置的字符（长度为1的字符串），如果index不在0和str.length之间将返回一个空字符串。
网友评论