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)頁時(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 class="center" 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í)有所幫助,也希望大家多多支持腳本之家。
- javascript canvas時(shí)鐘模擬器
- javascript實(shí)現(xiàn)簡(jiǎn)易數(shù)碼時(shí)鐘
- js實(shí)現(xiàn)時(shí)鐘定時(shí)器
- JS實(shí)現(xiàn)網(wǎng)頁時(shí)鐘特效
- js實(shí)現(xiàn)小時(shí)鐘效果
- js實(shí)現(xiàn)一個(gè)簡(jiǎn)單的數(shù)字時(shí)鐘效果
- html5 canvas js(數(shù)字時(shí)鐘)實(shí)例代碼
- 五步輕松實(shí)現(xiàn)JavaScript HTML時(shí)鐘效果
- JavaScript實(shí)現(xiàn)簡(jiǎn)單的時(shí)鐘實(shí)例代碼
- js+css3實(shí)現(xiàn)炫酷時(shí)鐘
相關(guān)文章
js實(shí)現(xiàn)鼠標(biāo)滑動(dòng)到某個(gè)div禁止?jié)L動(dòng)
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)鼠標(biāo)滑動(dòng)到某個(gè)div禁止?jié)L動(dòng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-09-09基于JavaScript實(shí)現(xiàn)數(shù)值型坐標(biāo)軸刻度計(jì)算算法(echarts的y軸刻度計(jì)算)
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)數(shù)值型坐標(biāo)軸刻度計(jì)算算法(echarts的y軸刻度計(jì)算),文章圍繞主題展開詳細(xì)的內(nèi)容介紹,感興趣的朋友可以參考與一下2022-06-06javascript自然分類法算法實(shí)現(xiàn)代碼
這篇文章介紹了javascript自然分類法算法實(shí)現(xiàn)代碼,有需要的朋友可以參考一下2013-10-10一個(gè)JavaScript去除字符串末尾的空白實(shí)例代碼
這是一個(gè)JavaScript去除字符串末尾的空白實(shí)例代碼,很簡(jiǎn)單,但很實(shí)用,喜歡的朋友可以參考下2014-09-09ie下動(dòng)態(tài)加態(tài)js文件的方法
接觸過相關(guān)知識(shí)的都知道,動(dòng)態(tài)向DOM中添加js的script標(biāo)簽時(shí),在各種瀏覽器下會(huì)有不同的表現(xiàn)。2011-09-09基于JavaScript實(shí)現(xiàn)移除(刪除)數(shù)組中指定元素
在Array對(duì)象中有給定的函數(shù)可以刪除數(shù)組中指定的元素,雖然非常好用,但是總感覺看不到摸不著的比較別扭,下面就分享一個(gè)自定義的刪除數(shù)組指定索引值元素的函數(shù),希望給大家一個(gè)全新的思路2016-01-01