JavaScript編寫開發(fā)動態(tài)時鐘
更新時間：2020年07月29日 14:30:41 作者：https://blog.csdn.net/qq_46537431/article/details/107613758
這篇文章主要為大家詳細介紹了JavaScript編寫開發(fā)動態(tài)時鐘，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JavaScript編寫開發(fā)動態(tài)時鐘的具體代碼，供大家參考，具體內(nèi)容如下
效果圖：
實質(zhì)上就是調(diào)用時間庫，再添加一個顏色數(shù)組，給顯示的時間嵌套一個div盒子，再將顏色數(shù)組的顏色設置隨機變化，這樣就使得時間變化的時候顏色也會發(fā)生變化。
完整源代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>網(wǎng)頁時鐘</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>
//格式化時間 給前面加個0；
function addZero(num){ return num < 10? '0' + num : num; }
function genDate(){
var date = new Date();
//獲取時間
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 ); //隨機數(shù)
spanTip.style.color = color[radom]; //設置隨機顏色
}
window.setInterval("genDate()",1000);
</script>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了js實現(xiàn)鼠標滑動到某個div禁止?jié)L動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
下面小編就為大家?guī)硪黄宄秊g覽器緩存的幾種方法總結(必看)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-12-12
基于JavaScript實現(xiàn)數(shù)值型坐標軸刻度計算算法(echarts的y軸刻度計算)
這篇文章主要介紹了基于JavaScript實現(xiàn)數(shù)值型坐標軸刻度計算算法(echarts的y軸刻度計算),文章圍繞主題展開詳細的內(nèi)容介紹，感興趣的朋友可以參考與一下2022-06-06
這篇文章介紹了javascript自然分類法算法實現(xiàn)代碼，有需要的朋友可以參考一下2013-10-10
這是一個JavaScript去除字符串末尾的空白實例代碼，很簡單，但很實用，喜歡的朋友可以參考下2014-09-09
這篇文章主要介紹了JavaScript?模塊化詳解，塊的內(nèi)部數(shù)據(jù)與實現(xiàn)是私有的,?只是向外部暴露一些接口(方法)與外部其它模塊通信，下面一起進入文章來接更多詳細內(nèi)容2021-12-12
接觸過相關知識的都知道，動態(tài)向DOM中添加js的script標簽時，在各種瀏覽器下會有不同的表現(xiàn)。2011-09-09
基于JavaScript實現(xiàn)移除(刪除)數(shù)組中指定元素
在Array對象中有給定的函數(shù)可以刪除數(shù)組中指定的元素，雖然非常好用，但是總感覺看不到摸不著的比較別扭，下面就分享一個自定義的刪除數(shù)組指定索引值元素的函數(shù)，希望給大家一個全新的思路2016-01-01
在Javascript中,每個對象都有一個指向另一個對象的鏈接,這個鏈接被稱為原型鏈,原型鏈是Javascript的一種繼承機制,它通過鏈接對象的原型對象來實現(xiàn)屬性和方法的繼承,本文小編就來和大家一起深度探索JavaScript中的原型鏈機制2023-09-09
這篇文章主要介紹了詳解如何提升JSON.stringify()的性能，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-06-06