原生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>
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。