快捷導(dǎo)航

javascript實現(xiàn)數(shù)字時鐘效果

更新時間：2021年02月06日 15:50:33 作者：一顆不甘墜落的流星

這篇文章主要為大家詳細介紹了javascript實現(xiàn)數(shù)字時鐘效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了javascript實現(xiàn)數(shù)字時鐘效果的具體代碼，供大家參考，具體內(nèi)容如下

效果圖

需求分析

1、通過date獲取時間
2、通過間隔定時器setInterval動態(tài)獲取時間
3、間隔定時器setInterval間隔設(shè)置為1000毫秒（1秒）獲取一次時間
4、為了樣式好看，我們這是用數(shù)字圖片來代替數(shù)字的

源代碼

HTML部分

<div id="div">
 <img src="img/0.png" />
 <img src="img/0.png" />
 時
 <img src="img/0.png" />
 <img src="img/0.png" />
 分
 <img src="img/0.png" />
 <img src="img/0.png" />
 秒
</div>

css部分

<style>
/*無*/ 
</style>

JavaScript部分

<script>
 // 需求:數(shù)碼時鐘
 var date = new Date();
 var imgArr = document.getElementsByTagName('img');//獲取img圖片的一個集合
 var hours,minutes,seconds;
 var timre = setInterval(function () {
 date = new Date();
 // 獲取小時
 hours = date.getHours();
 
 imgArr[0].src = "img/" + parseInt(hours / 10) + ".png"
 imgArr[1].src = "img/" + hours % 10 + ".png"
 // 獲取分鐘
 minutes = date.getMinutes();
 imgArr[2].src = "img/" + parseInt(minutes / 10) + ".png"
 imgArr[3].src = "img/" + minutes % 10 + ".png"
 // 獲取秒
 seconds = date.getSeconds();
 imgArr[4].src = "img/" + parseInt(seconds / 10) + ".png"
 imgArr[5].src = "img/" + seconds % 10 + ".png"
 console.log(hours);
 console.log(minutes);
 console.log(seconds);
 }, 1000)
</script>

總代碼

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
 <div id="div">
 <img src="img/0.png" />
 <img src="img/0.png" />
 時
 <img src="img/0.png" />
 <img src="img/0.png" />
 分
 <img src="img/0.png" />
 <img src="img/0.png" />
 秒
 </div>
</body>

</html>
<script>
 // 需求:數(shù)碼時鐘
 var date = new Date();
 var imgArr = document.getElementsByTagName('img');//獲取img圖片的一個集合
 var hours,minutes,seconds;
 var timre = setInterval(function () {
 date = new Date();
 // 獲取小時
 hours = date.getHours();
 
 imgArr[0].src = "img/" + parseInt(hours / 10) + ".png"
 imgArr[1].src = "img/" + hours % 10 + ".png"
 // 獲取分鐘
 minutes = date.getMinutes();
 imgArr[2].src = "img/" + parseInt(minutes / 10) + ".png"
 imgArr[3].src = "img/" + minutes % 10 + ".png"
 // 獲取秒
 seconds = date.getSeconds();
 imgArr[4].src = "img/" + parseInt(seconds / 10) + ".png"
 imgArr[5].src = "img/" + seconds % 10 + ".png"
 }, 1000)
</script>

所用圖片：