javascript實(shí)現(xiàn)數(shù)字時(shí)鐘效果
本文實(shí)例為大家分享了javascript實(shí)現(xiàn)數(shù)字時(shí)鐘效果的具體代碼，供大家參考，具體內(nèi)容如下
效果圖
1、通過date獲取時(shí)間2、通過間隔定時(shí)器setInterval動(dòng)態(tài)獲取時(shí)間3、間隔定時(shí)器setInterval間隔設(shè)置為1000毫秒（1秒）獲取一次時(shí)間4、為了樣式好看，我們這是用數(shù)字圖片來代替數(shù)字的
源代碼HTML部分
<div id='div'> <img src='http://m.4tl426be.cn/bcjs/img/0.png' /> <img src='http://m.4tl426be.cn/bcjs/img/0.png' /> 時(shí) <img src='http://m.4tl426be.cn/bcjs/img/0.png' /> <img src='http://m.4tl426be.cn/bcjs/img/0.png' /> 分 <img src='http://m.4tl426be.cn/bcjs/img/0.png' /> <img src='http://m.4tl426be.cn/bcjs/img/0.png' /> 秒</div>
css部分
<style>/*無*/ </style>
JavaScript部分
<script> // 需求:數(shù)碼時(shí)鐘 var date = new Date(); var imgArr = document.getElementsByTagName(’img’);//獲取img圖片的一個(gè)集合 var hours,minutes,seconds; var timre = setInterval(function () { date = new Date(); // 獲取小時(shí) hours = date.getHours(); imgArr[0].src = 'http://m.4tl426be.cn/bcjs/img/' + parseInt(hours / 10) + '.png' imgArr[1].src = 'http://m.4tl426be.cn/bcjs/img/' + hours % 10 + '.png' // 獲取分鐘 minutes = date.getMinutes(); imgArr[2].src = 'http://m.4tl426be.cn/bcjs/img/' + parseInt(minutes / 10) + '.png' imgArr[3].src = 'http://m.4tl426be.cn/bcjs/img/' + minutes % 10 + '.png' // 獲取秒 seconds = date.getSeconds(); imgArr[4].src = 'http://m.4tl426be.cn/bcjs/img/' + parseInt(seconds / 10) + '.png' imgArr[5].src = 'http://m.4tl426be.cn/bcjs/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='http://m.4tl426be.cn/bcjs/img/0.png' /> <img src='http://m.4tl426be.cn/bcjs/img/0.png' /> 時(shí) <img src='http://m.4tl426be.cn/bcjs/img/0.png' /> <img src='http://m.4tl426be.cn/bcjs/img/0.png' /> 分 <img src='http://m.4tl426be.cn/bcjs/img/0.png' /> <img src='http://m.4tl426be.cn/bcjs/img/0.png' /> 秒 </div></body></html><script> // 需求:數(shù)碼時(shí)鐘 var date = new Date(); var imgArr = document.getElementsByTagName(’img’);//獲取img圖片的一個(gè)集合 var hours,minutes,seconds; var timre = setInterval(function () { date = new Date(); // 獲取小時(shí) hours = date.getHours(); imgArr[0].src = 'http://m.4tl426be.cn/bcjs/img/' + parseInt(hours / 10) + '.png' imgArr[1].src = 'http://m.4tl426be.cn/bcjs/img/' + hours % 10 + '.png' // 獲取分鐘 minutes = date.getMinutes(); imgArr[2].src = 'http://m.4tl426be.cn/bcjs/img/' + parseInt(minutes / 10) + '.png' imgArr[3].src = 'http://m.4tl426be.cn/bcjs/img/' + minutes % 10 + '.png' // 獲取秒 seconds = date.getSeconds(); imgArr[4].src = 'http://m.4tl426be.cn/bcjs/img/' + parseInt(seconds / 10) + '.png' imgArr[5].src = 'http://m.4tl426be.cn/bcjs/img/' + seconds % 10 + '.png' }, 1000)</script>
所用圖片：
由于你們沒有圖片，直接復(fù)制代碼，展示不出效果，大家可以自己找?guī)讖垐D片來代替，稍微修改下即可，只要能看得懂代碼，修改起來莫得問題啦
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. ASP動(dòng)態(tài)網(wǎng)頁制作技術(shù)經(jīng)驗(yàn)分享2. 詳解瀏覽器的緩存機(jī)制3. vue3+ts+elementPLus實(shí)現(xiàn)v-preview指令4. jsp文件下載功能實(shí)現(xiàn)代碼5. 如何在jsp界面中插入圖片6. Xml簡介_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理7. .Net Core和RabbitMQ限制循環(huán)消費(fèi)的方法8. phpstudy apache開啟ssi使用詳解9. jsp實(shí)現(xiàn)登錄驗(yàn)證的過濾器10. JSP之表單提交get和post的區(qū)別詳解及實(shí)例
網(wǎng)公網(wǎng)安備