js實現小時鐘效果
本文實例為大家分享了js實現小時鐘效果的具體代碼，供大家參考，具體內容如下
今天給大家分享一下制作小時鐘
先給大家把代碼分享出來
首先 JavaScript 代碼
<script> function setTime(){ var now = new Date(); var year = now.getFullYear(); //獲取現在的年份。 var mouth = now.getMonth() + 1; //獲取本年的月份，默認的是 0-11；所以進行加 1 操作； var date = now.getDate(); //獲取日期，號 var week = now.getDay(); //獲取當前時段的星期 var hour = now.getHours(); //獲取當前時段的小時位 var minute = now.getMinutes(); //獲取當前時段的分鐘位 var second = now.getSeconds(); //獲取當前時段的秒位 var week1 = [’日’ , ’一’ , ’二’ , ’三’ , ’四’ , ’五’ , ’六’] var week2 = week1[week]; //從當前時間中提取出 年、月、日、周、時、秒、分 a.innerHTML = year; b.innerHTML = mouth; c.innerHTML = date; d.innerHTML = week; e.innerHTML = hour; f.innerHTML = minute; g.innerHTML = second; } setTime(); //背景顏色 function Color(){ var w = parseInt(Math.random()*256); var j = parseInt(Math.random()*256); var t = parseInt(Math.random()*256); return `rgb(${w},${j},${t})`; } l.style.background = Color(); setInterval(function(){ setTime(); l.style.background = Color();//背景顏色隨機變化 g.style.color = Color();//字體顏色隨機變化 g.style.background = Color();//背景顏色隨機變化 } , 1000) </script>
大家可以看到，在這里我們主要用的是定時器。
// 定時器 // 根據設定的時間間隔,來循環執行程序// 只要定時器不停止,程序就會一直執行 // setInterval( 參數1 , 參數2 )// 參數1:要執行的程序,必須是一個函數的形式 function(){ 定義程序 }// 參數2:執行程序的間隔時間 單位是毫秒 // 時間間隔不能無限小,與計算機的刷新頻率有關// 60Hz 60赫茲 代表,1秒刷新60次// 1次就是 1000 / 60 ---- 16.666... 毫秒// 你定義的程序的時間間隔,不能小于 16.6666... 毫秒// 我們一般都定義最少 0.1秒,也就是 100毫秒 // 每間隔1000毫秒,也是一秒,重復執行 function(){}中的程序
下面的是全部的代碼
<!DOCTYPE html><html lang='en'> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title> <style> div{ width: 750px; margin: 100px auto; text-align: center; background-color: cyan; border-radius: 20px; padding: 50px 10px; font-size: 30px; } span{ display: inline-block; background-color: gainsboro; font-size: 30px; padding: 10px 5px; border-radius: 4px; } </style> </head> <body> <div id='l'> <span id='a'></span> 年 <span id='b'></span> 月 <span id='c'></span> 日 星期 <span id='d'></span> <span id='e'></span> 時 <span id='f'></span> 分 <span id='g'></span> 秒 </div> <script> function setTime(){ var now = new Date(); var year = now.getFullYear(); //獲取現在的年份。 var mouth = now.getMonth() + 1; //獲取本年的月份，默認的是 0-11；所以進行加 1 操作； var date = now.getDate(); //獲取日期，號 var week = now.getDay(); //獲取當前時段的星期 var hour = now.getHours(); //獲取當前時段的小時位 var minute = now.getMinutes(); //獲取當前時段的分鐘位 var second = now.getSeconds(); //獲取當前時段的秒位 var week1 = [’日’ , ’一’ , ’二’ , ’三’ , ’四’ , ’五’ , ’六’] var week2 = week1[week]; //從當前時間中提取出 年、月、日、周、時、秒、分 a.innerHTML = year; b.innerHTML = mouth; c.innerHTML = date; d.innerHTML = week2; e.innerHTML = hour; f.innerHTML = minute; g.innerHTML = second; } setTime(); //背景顏色 function Color(){ var w = parseInt(Math.random()*256); var j = parseInt(Math.random()*256); var t = parseInt(Math.random()*256); return `rgb(${w},${j},${t})`; } l.style.background = Color(); setInterval(function(){ setTime(); l.style.background = Color();//背景顏色隨機變化 g.style.color = Color();//字體顏色隨機變化 g.style.background = Color();//背景顏色隨機變化 } , 1000) </script> </body></html>
里面加了一些小樣式：（顏色是隨機變化的）
更多JavaScript時鐘特效點擊查看：JavaScript時鐘特效專題
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
1. React+umi+typeScript創建項目的過程2. ASP調用WebService轉化成JSON數據，附json.min.asp3. php測試程序運行速度和頁面執行速度的代碼4. php網絡安全中命令執行漏洞的產生及本質探究5. ASP.NET Core 5.0中的Host.CreateDefaultBuilder執行過程解析6. 無線標記語言(WML)基礎之WMLScript 基礎第1/2頁7. Warning: require(): open_basedir restriction in effect,目錄配置open_basedir報錯問題分析8. ASP中常用的22個FSO文件操作函數整理9. SharePoint Server 2019新特性介紹10. 三個不常見的 HTML5 實用新特性簡介
網公網安備