原生JS實(shí)現(xiàn)數(shù)碼表特效
更新時(shí)間：2021年10月15日 08:39:23 作者：aiguangyuan
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)數(shù)碼表特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文分享一個(gè)用原生JS實(shí)現(xiàn)的數(shù)碼時(shí)鐘特效，效果如下：
上面的數(shù)字是用的圖片生成的，共10張圖片如下：
實(shí)現(xiàn)代碼如下，歡迎大家復(fù)制粘貼。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生JS實(shí)現(xiàn)數(shù)碼表特效</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');
//獲取本地進(jìn)間對(duì)象
var oDate = new Date();
//小時(shí)+分鐘+秒
var prevStr = toZero(oDate.getHours()) +
toZero(oDate.getMinutes()) +
toZero(oDate.getSeconds());
//聲明下一次時(shí)間的字符串變量
var nextStr = '';
//同一時(shí)間變化的不僅僅秒數(shù),有可能是多位數(shù)，建數(shù)組存儲(chǔ)
var arr = [];
var timer = null;
//第i個(gè)img圖片的src地址為img下當(dāng)前時(shí)間第i位數(shù)所對(duì)應(yīng)的圖片名稱
//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';
};
//設(shè)置定時(shí)器，1秒鐘執(zhí)行1次toChange方法
setInterval(toChange, 1000);
//獲取下一次的時(shí)間
function toChange() {
//獲取本地進(jìn)間對(duì)象
var oDate = new Date();
//小時(shí)+分鐘+秒
nextStr = toZero(oDate.getHours()) +
toZero(oDate.getMinutes()) +
toZero(oDate.getSeconds());
//將上一次的時(shí)間和下一次的時(shí)間做對(duì)比
toCom(prevStr, nextStr);
//把下1秒的時(shí)間賦給當(dāng)前，不斷變化
prevStr = nextStr;
};
//上一次的時(shí)間和下一次的時(shí)間對(duì)比函數(shù)
function toCom(str1, str2) {
//比較之前，將之前的清空，重新賦值
arr = [];
//遍歷第1次時(shí)間的每1位數(shù)字
for (var i = 0; i < str1.length; i++) {
//如果有1位字符與下一次時(shí)間對(duì)應(yīng)的字符不同
if (str1.charAt(i) != str2.charAt(i)) {
//將它壓入數(shù)組中
arr.push(i);
}
}
//執(zhí)行圖片翻轉(zhuǎn)
startMove();
};
//圖片翻轉(zhuǎn)函數(shù)
function startMove() {
//圖片高度36px,設(shè)定第次減少-4px
var iSpeed = -4;
//設(shè)定定時(shí)器
timer = setInterval(function () {
//循環(huán)遍歷數(shù)組中上一次時(shí)間和下一次時(shí)間發(fā)生變化的字符串
for (var i = 0; i < arr.length; i++) {
//如果數(shù)組中不同的字符所對(duì)應(yīng)名稱的圖片高度等于0
if (aImg[arr[i]].offsetHeight == 0) {
//將變化速度設(shè)為增加4px
iSpeed = 4;
//不同的字符所對(duì)應(yīng)名稱的圖片位置等于img里下一次時(shí)間第i位數(shù)所對(duì)應(yīng)的圖片名稱
//i代表兩次時(shí)間變化所在的數(shù)字位數(shù),arr[i]得出具體數(shù)字
aImg[arr[i]].src = 'images/' + nextStr.charAt(arr[i]) + '.png';
}
//數(shù)組中不同的字符所對(duì)應(yīng)名稱的圖片的高度等于它內(nèi)容高度每次減4px
//注意style.height和offsetHeight的高度
aImg[arr[i]].style.height = aImg[arr[i]].offsetHeight + iSpeed + 'px';
//數(shù)組中不同的字符所對(duì)應(yīng)名稱的圖片的top值等于它內(nèi)容高度1半減18px
//以保證每次變化圖片都可以居中顯示
aImg[arr[i]].style.top = aImg[arr[i]].offsetHeight / 2 - 18 + 'px';
//當(dāng)圖片的高度達(dá)到最大高度36px時(shí)
if (aImg[arr[i]].offsetHeight == 36) {
//清除定時(shí)器
clearInterval(timer);
}
}
}, 10);
};
//獲取本地時(shí)間個(gè)位數(shù)不滿10，而十位數(shù)為0是沒有的，此處封裝函數(shù)補(bǔ)全
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>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
細(xì)說JavaScript中的this指向與綁定規(guī)則
本文主要詳細(xì)介紹了JavaScript中的this指向與綁定規(guī)則，默認(rèn)綁定，隱式綁定，顯示綁定，new綁定這四個(gè)規(guī)則，文中有相關(guān)的代碼示例供大家參考，感興趣的同學(xué)可以閱讀下2023-05-05
js獲得指定控件輸入光標(biāo)的坐標(biāo)兼容IE,Chrome,火狐等多種主流瀏覽器
js獲得指定控件光標(biāo)的坐標(biāo)，兼容IE,Chrome,火狐等多種主流瀏覽器，實(shí)現(xiàn)代碼及調(diào)用代碼如下，感興趣的朋友可以參考下哈，希望對(duì)你有所幫助2013-05-05
原生JS實(shí)現(xiàn)$.param() 函數(shù)的方法
這篇文章主要介紹了原生JS實(shí)現(xiàn)$.param() 函數(shù)的方法，由于遇到相關(guān)序列化的問題，但是vue項(xiàng)目中由于減少隊(duì)jquery引用的限制，導(dǎo)致不能用$.param來序列化參數(shù)，下面小編給大家分享了實(shí)例代碼，需要的朋友參考下吧2018-08-08
為網(wǎng)站代碼塊pre標(biāo)簽增加一個(gè)復(fù)制代碼按鈕代碼
寫文章的時(shí)候，作為一名專業(yè)的碼農(nóng)，經(jīng)常會(huì)在文章中粘貼一些代碼。有的時(shí)候代碼塊比較長(zhǎng)，在后期使用中需要復(fù)制這段代碼就比較麻煩2021-11-11
Bootstrap學(xué)習(xí)筆記之進(jìn)度條、媒體對(duì)象實(shí)例詳解
這篇文章主要介紹了Bootstrap進(jìn)度條、媒體對(duì)象實(shí)例詳解,進(jìn)度條包括基礎(chǔ)進(jìn)度條，多彩進(jìn)度條，條紋狀進(jìn)度條等內(nèi)容，具體實(shí)現(xiàn)代碼大家參考下本文2017-03-03
javascript實(shí)現(xiàn)日期按月份加減
JavaScript實(shí)現(xiàn)日期加減計(jì)算功能代碼實(shí)例，因?yàn)樵趈s中沒有類似C#中的AddDays方法，所以要想實(shí)現(xiàn)日期加減的話，就需要自己寫函數(shù)來實(shí)現(xiàn)。這里分享給大家，有需要的小伙伴可以參考下2015-05-05
移動(dòng)端JS實(shí)現(xiàn)拖拽兩種方法解析
這篇文章主要介紹了移動(dòng)端JS實(shí)現(xiàn)拖拽兩種方法解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-10-10
javascript將數(shù)字轉(zhuǎn)換整數(shù)金額大寫的方法
這篇文章主要介紹了javascript將數(shù)字轉(zhuǎn)換整數(shù)金額大寫的方法,通過自定義函數(shù)中的數(shù)組替換實(shí)現(xiàn)數(shù)字轉(zhuǎn)換整數(shù)金額大寫的功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了JavaScript中的變量提升和函數(shù)提升，在js中對(duì)變量進(jìn)行操作后打印值經(jīng)常會(huì)出現(xiàn)undefined的現(xiàn)象。其實(shí)原因是因?yàn)閖s中有一個(gè)叫做變量提升的功能2022-07-07
本文主要介紹了js轉(zhuǎn)換對(duì)象為xml的方法。具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02