JavaScript編寫開發(fā)動(dòng)態(tài)時(shí)鐘
本文實(shí)例為大家分享了JavaScript編寫開發(fā)動(dòng)態(tài)時(shí)鐘的具體代碼，供大家參考，具體內(nèi)容如下
效果圖：
實(shí)質(zhì)上就是調(diào)用時(shí)間庫(kù)，再添加一個(gè)顏色數(shù)組，給顯示的時(shí)間嵌套一個(gè)div盒子，再將顏色數(shù)組的顏色設(shè)置隨機(jī)變化，這樣就使得時(shí)間變化的時(shí)候顏色也會(huì)發(fā)生變化。
完整源代碼：
<!DOCTYPE html><html> <head> <meta charset='utf-8'> <title>網(wǎng)頁(yè)時(shí)鐘</title> <style> </style> </head> <style> .center{ background: url(img/shizhong.jpg) no-repeat center; font-size: 50px; height: 600px; line-height: 620px; text-align: center; } </style> <body> <div id = 'spanTip'></div> </body> <script> //格式化時(shí)間 給前面加個(gè)0； function addZero(num){ return num < 10? ’0’ + num : num; } function genDate(){ var date = new Date(); //獲取時(shí)間 var dateStr =addZero(date.getHours()) +':'+addZero(date.getMinutes())+':'+addZero(date.getSeconds()); var spanTip = document.getElementById('spanTip'); spanTip.innerHTML = dateStr; //顏色數(shù)組 var color = [’red’, ’green’, ’yellow’, ’blue’, ’black’, ’gold’, ’orange’, ’gray’, ’pink’, ’maroon’]; //鐘表顏色數(shù)組 var radom = Math.floor(Math.random() * color.length ); //隨機(jī)數(shù) spanTip.style.color = color[radom]; //設(shè)置隨機(jī)顏色 } window.setInterval('genDate()',1000);</script></html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. Python獲取抖音關(guān)注列表封號(hào)賬號(hào)的實(shí)現(xiàn)代碼2. ajax請(qǐng)求添加自定義header參數(shù)代碼3. Python數(shù)據(jù)分析之pandas函數(shù)詳解4. 解決Python 進(jìn)程池Pool中一些坑5. php測(cè)試程序運(yùn)行速度和頁(yè)面執(zhí)行速度的代碼6. 無(wú)線標(biāo)記語(yǔ)言(WML)基礎(chǔ)之WMLScript 基礎(chǔ)第1/2頁(yè)7. 三個(gè)不常見的 HTML5 實(shí)用新特性簡(jiǎn)介8. 使用.net core 自帶DI框架實(shí)現(xiàn)延遲加載功能9. php網(wǎng)絡(luò)安全中命令執(zhí)行漏洞的產(chǎn)生及本質(zhì)探究10. Warning: require(): open_basedir restriction in effect,目錄配置open_basedir報(bào)錯(cuò)問題分析
網(wǎng)公網(wǎng)安備