快捷導(dǎo)航

JavaScript編寫開(kāi)發(fā)動(dòng)態(tài)時(shí)鐘

更新時(shí)間：2020年07月29日 14:30:41 作者：https://blog.csdn.net/qq_46537431/article/details/107613758

這篇文章主要為大家詳細(xì)介紹了JavaScript編寫開(kāi)發(fā)動(dòng)態(tài)時(shí)鐘，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了JavaScript編寫開(kāi)發(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 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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(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
清除瀏覽器緩存的幾種方法總結(jié)(必看)
下面小編就為大家?guī)?lái)一篇清除瀏覽器緩存的幾種方法總結(jié)(必看)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-12-12
基于JavaScript實(shí)現(xiàn)數(shù)值型坐標(biāo)軸刻度計(jì)算算法(echarts的y軸刻度計(jì)算)
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)數(shù)值型坐標(biāo)軸刻度計(jì)算算法(echarts的y軸刻度計(jì)算),文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，感興趣的朋友可以參考與一下
2022-06-06
javascript自然分類法算法實(shí)現(xiàn)代碼
這篇文章介紹了javascript自然分類法算法實(shí)現(xiàn)代碼，有需要的朋友可以參考一下
2013-10-10
一個(gè)JavaScript去除字符串末尾的空白實(shí)例代碼
這是一個(gè)JavaScript去除字符串末尾的空白實(shí)例代碼，很簡(jiǎn)單，但很實(shí)用，喜歡的朋友可以參考下
2014-09-09
JavaScript?模塊化詳解
這篇文章主要介紹了JavaScript?模塊化詳解，塊的內(nèi)部數(shù)據(jù)與實(shí)現(xiàn)是私有的,?只是向外部暴露一些接口(方法)與外部其它模塊通信，下面一起進(jìn)入文章來(lái)接更多詳細(xì)內(nèi)容
2021-12-12
ie下動(dòng)態(tài)加態(tài)js文件的方法
接觸過(guò)相關(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ù)組中指定的元素，雖然非常好用，但是總感覺(jué)看不到摸不著的比較別扭，下面就分享一個(gè)自定義的刪除數(shù)組指定索引值元素的函數(shù)，希望給大家一個(gè)全新的思路
2016-01-01
一文深入探究JavaScript中的原型鏈機(jī)制
在Javascript中,每個(gè)對(duì)象都有一個(gè)指向另一個(gè)對(duì)象的鏈接,這個(gè)鏈接被稱為原型鏈,原型鏈?zhǔn)荍avascript的一種繼承機(jī)制,它通過(guò)鏈接對(duì)象的原型對(duì)象來(lái)實(shí)現(xiàn)屬性和方法的繼承,本文小編就來(lái)和大家一起深度探索JavaScript中的原型鏈機(jī)制
2023-09-09
詳解如何提升JSON.stringify()的性能
這篇文章主要介紹了詳解如何提升JSON.stringify()的性能，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-06-06