JavaScript編寫開發動態時鐘
阿新 • • 發佈：2020-07-30
本文例項為大家分享了JavaScript編寫開發動態時鐘的具體程式碼，供大家參考，具體內容如下
效果圖：
實質上就是呼叫時間庫，再新增一個顏色陣列，給顯示的時間巢狀一個div盒子，再將顏色陣列的顏色設定隨機變化，這樣就使得時間變化的時候顏色也會發生變化。
完整原始碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>網頁時鐘</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;
//顏色陣列
var color = ['red','green','yellow','blue','black','gold','orange','gray','pink','maroon']; //鐘錶顏色陣列
var radom = Math.floor(Math.random() * color.length ); //隨機數
spanTip.style.color = color[radom]; //設定隨機顏色
}
window.setInterval("genDate()",1000);
</script>
</html>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。