分享一个用原生JS实现的数码时钟特效，效果如下：
上面的数字是用的图片生成的，共10张图片如下：
实现代码如下，欢迎大家复制粘贴。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生JS实现数码表特效</title>
<style>
body {
background: blue;
color: white;
font-size: 30px;
}
#box {
width: 220px;
height: 36px;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: 1px #FFF solid;
}
#box img {
width: 25px;
height: 36px;
position: relative;
}
</style>
</head>
<body>
<div id="box">
<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" />
</div>
<script>
window.onload = function () {
// 获取所有的图片
var imgList = document.getElementsByTagName('img');
// 获取本地时间对象
var date = new Date();
// 小时+分钟+秒
var prevStr = toZero(date.getHours()) + toZero(date.getMinutes()) + toZero(date.getSeconds());
// 下一次时间变量
var nextStr = "";
// 数组存储多位变化
var array = [];
var timer = null;
// 对应的图片名称
for (var i = 0; i < imgList.length; i++) {
imgList[i].src = 'images/' + prevStr.charAt(i) + '.png';
};
// 设置定时器
setInterval(toChange, 1000);
// 获取下一次的时间
function toChange() {
// 获取本地进间对象
var date = new Date();
// 小时+分钟+秒
nextStr = toZero(date.getHours()) + toZero(date.getMinutes()) + toZero(date.getSeconds());
// 上一次与下一次的时间对比
toCompare(prevStr, nextStr);
// 把下1秒的时间赋给当前
prevStr = nextStr;
};
// 上一次的时间和下一次的时间对比函数
function toCompare(str1, str2) {
// 比较之前，将之前的清空，重新赋值
array = [];
// 遍历第1次时间的每1位数字
for (var i = 0; i < str1.length; i++) {
// 如果有1位字符与下一次时间对应的字符不同
if (str1.charAt(i) != str2.charAt(i)) {
// 将它压入数组中
array.push(i);
}
};
// 执行动画翻转
startMove();
};
// 运动函数
function startMove() {
// 图片高度36px,设定第次减少-4px
var speed = -4;
// 设定定时器
timer = setInterval(function () {
// 循环遍历数组中上一次时间和下一次时间发生变化的字符串
for (var i = 0; i < array.length; i++) {
// 如果数组中不同的字符所对应名称的图片高度等于0
if (imgList[array[i]].offsetHeight == 0) {
// 将变化速度设为增加4px
speed = 4;
// 不同的字符所对应名称的图片位置等于img里下一次时间第i位数所对应的图片名称
// i代表两次时间变化所在的数字位数,array[i]得出具体数字
imgList[array[i]].src = 'images/' + nextStr.charAt(array[i]) + '.png';
};
// 数组中不同的字符所对应名称的图片的高度等于它内容高度每次减4px
imgList[array[i]].style.height = imgList[array[i]].offsetHeight + speed + 'px';
// 数组中不同的字符所对应名称的图片的top值等于它内容高度1半减18px
imgList[array[i]].style.top = imgList[array[i]].offsetHeight / 2 - 18 + 'px';
// 当图片的高度达到最大高度36px时
if (imgList[array[i]].offsetHeight == 36) {
// 清除定时器
clearInterval(timer);
};
}
}, 10);
};
// 是否补零
function toZero(num) {
if (num < 10) {
return '0' + num;
} else {
return '' + num;
}
}
};
</script>
</body>
</html>
