原生JS实现数码表特效
更新时间：2021年10月15日 08:39:23 作者：aiguangyuan
这篇文章主要为大家详细介绍了原生JS实现数码表特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文分享一个用原生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;
}
#div1 {
width: 220px;
height: 36px;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: 1px #FFF solid;
}
#div1 img {
width: 25px;
height: 36px;
position: relative;
}
</style>
<script>
window.onload = function () {
//获取所有的图片
var aImg = document.getElementsByTagName('img');
//获取本地进间对象
var oDate = new Date();
//小时+分钟+秒
var prevStr = toZero(oDate.getHours()) +
toZero(oDate.getMinutes()) +
toZero(oDate.getSeconds());
//声明下一次时间的字符串变量
var nextStr = '';
//同一时间变化的不仅仅秒数,有可能是多位数，建数组存储
var arr = [];
var timer = null;
//第i个img图片的src地址为img下当前时间第i位数所对应的图片名称
//104604=>通过charAt(i)分别获得1到6位的字符,即1,0,4,6,0,4
for (var i = 0; i < aImg.length; i++) {
aImg[i].src = 'images/' + prevStr.charAt(i) + '.png';
};
//设置定时器，1秒钟执行1次toChange方法
setInterval(toChange, 1000);
//获取下一次的时间
function toChange() {
//获取本地进间对象
var oDate = new Date();
//小时+分钟+秒
nextStr = toZero(oDate.getHours()) +
toZero(oDate.getMinutes()) +
toZero(oDate.getSeconds());
//将上一次的时间和下一次的时间做对比
toCom(prevStr, nextStr);
//把下1秒的时间赋给当前，不断变化
prevStr = nextStr;
};
//上一次的时间和下一次的时间对比函数
function toCom(str1, str2) {
//比较之前，将之前的清空，重新赋值
arr = [];
//遍历第1次时间的每1位数字
for (var i = 0; i < str1.length; i++) {
//如果有1位字符与下一次时间对应的字符不同
if (str1.charAt(i) != str2.charAt(i)) {
//将它压入数组中
arr.push(i);
}
}
//执行图片翻转
startMove();
};
//图片翻转函数
function startMove() {
//图片高度36px,设定第次减少-4px
var iSpeed = -4;
//设定定时器
timer = setInterval(function () {
//循环遍历数组中上一次时间和下一次时间发生变化的字符串
for (var i = 0; i < arr.length; i++) {
//如果数组中不同的字符所对应名称的图片高度等于0
if (aImg[arr[i]].offsetHeight == 0) {
//将变化速度设为增加4px
iSpeed = 4;
//不同的字符所对应名称的图片位置等于img里下一次时间第i位数所对应的图片名称
//i代表两次时间变化所在的数字位数,arr[i]得出具体数字
aImg[arr[i]].src = 'images/' + nextStr.charAt(arr[i]) + '.png';
}
//数组中不同的字符所对应名称的图片的高度等于它内容高度每次减4px
//注意style.height和offsetHeight的高度
aImg[arr[i]].style.height = aImg[arr[i]].offsetHeight + iSpeed + 'px';
//数组中不同的字符所对应名称的图片的top值等于它内容高度1半减18px
//以保证每次变化图片都可以居中显示
aImg[arr[i]].style.top = aImg[arr[i]].offsetHeight / 2 - 18 + 'px';
//当图片的高度达到最大高度36px时
if (aImg[arr[i]].offsetHeight == 36) {
//清除定时器
clearInterval(timer);
}
}
}, 10);
};
//获取本地时间个位数不满10，而十位数为0是没有的，此处封装函数补全
function toZero(num) {
if (num < 10) {
return '0' + num;
} else {
return '' + num;
}
}
};
</script>
</head>
<body>
<div id="div1">
<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>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
Javascript 正确使用方法，下面为大家介绍的是一个关于如何正确使用javascript 来进行我们的程序开发,需要的朋友可以参考下2014-06-06
这篇文章主要介绍了微信小程序防止重复点击按钮的示例代码,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-10-10
这篇文章主要给大家介绍了关于JS如何实现页面截屏功能的相关资料,文中主要利用了html2canvas和canvas绘制两个方法来实现,需要的朋友可以参考下2021-06-06
这篇文章主要介绍了使用js获取身份证年龄的示例代码，帮助大家更好的理解和使用JavaScript，感兴趣的朋友可以了解下2020-12-12
这篇文章主要为大家详细介绍了js判断鼠标移入移出方向的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
本篇文章主要是对js判断url是否有效的两种方法进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-03-03
这篇文章主要介绍了JS实现悬浮球只在一侧滑动 并且是横屏状态下,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-08-08
这篇文章主要介绍了微信小程序蓝牙连接小票打印机实例代码，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-06-06
这篇文章主要介绍了关于JavaScript的内存与性能问题解决汇总，在JavaScript中，页面中事件处理程序的数量与页面整体性能直接相关，原因有很多，下面就一起来看看具体的总结吧2022-04-04
这篇文章主要介绍了深入JS继承，对继承感兴趣的同学，可以参考下2021-05-05
最新评论