文章目錄
- 效果圖：
- 需求分析：
- 源代碼：
- 所用圖片：
效果圖：
需求分析：
- 通過date獲取時間
- 通過間隔定時器setInterval動態獲取時間
- 間隔定時器setInterval間隔設定為1000毫秒（1秒）獲取一次時間
- 為了樣式好看，我們這是用數字圖片來代替數字的
源代碼：
- 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>
// 需求:數碼時鐘
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>
// 需求:數碼時鐘
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>
所用圖片：
由于你們沒有圖片，直接復制代碼，展示不出效果，大家可以自己找幾張圖片來代替，稍微修改下即可，只要能看得懂代碼，修改起來莫得問題啦
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/256691.html
標籤：其他
上一篇：冪塔個位數的計算（歐拉降冪板子)