js實(shí)現(xiàn)小時(shí)鐘效果
本文實(shí)例為大家分享了js實(shí)現(xiàn)小時(shí)鐘效果的具體代碼，供大家參考，具體內(nèi)容如下
今天給大家分享一下制作小時(shí)鐘
先給大家把代碼分享出來(lái)
首先 JavaScript 代碼
<script> function setTime(){ var now = new Date(); var year = now.getFullYear(); //獲取現(xiàn)在的年份。 var mouth = now.getMonth() + 1; //獲取本年的月份，默認(rèn)的是 0-11；所以進(jìn)行加 1 操作； var date = now.getDate(); //獲取日期，號(hào) var week = now.getDay(); //獲取當(dāng)前時(shí)段的星期 var hour = now.getHours(); //獲取當(dāng)前時(shí)段的小時(shí)位 var minute = now.getMinutes(); //獲取當(dāng)前時(shí)段的分鐘位 var second = now.getSeconds(); //獲取當(dāng)前時(shí)段的秒位 var week1 = [’日’ , ’一’ , ’二’ , ’三’ , ’四’ , ’五’ , ’六’] var week2 = week1[week]; //從當(dāng)前時(shí)間中提取出 年、月、日、周、時(shí)、秒、分 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();//背景顏色隨機(jī)變化 g.style.color = Color();//字體顏色隨機(jī)變化 g.style.background = Color();//背景顏色隨機(jī)變化 } , 1000) </script>
大家可以看到，在這里我們主要用的是定時(shí)器。
// 定時(shí)器 // 根據(jù)設(shè)定的時(shí)間間隔,來(lái)循環(huán)執(zhí)行程序// 只要定時(shí)器不停止,程序就會(huì)一直執(zhí)行 // setInterval( 參數(shù)1 , 參數(shù)2 )// 參數(shù)1:要執(zhí)行的程序,必須是一個(gè)函數(shù)的形式 function(){ 定義程序 }// 參數(shù)2:執(zhí)行程序的間隔時(shí)間 單位是毫秒 // 時(shí)間間隔不能無(wú)限小,與計(jì)算機(jī)的刷新頻率有關(guān)// 60Hz 60赫茲 代表,1秒刷新60次// 1次就是 1000 / 60 ---- 16.666... 毫秒// 你定義的程序的時(shí)間間隔,不能小于 16.6666... 毫秒// 我們一般都定義最少 0.1秒,也就是 100毫秒 // 每間隔1000毫秒,也是一秒,重復(fù)執(zhí)行 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> 時(shí) <span id='f'></span> 分 <span id='g'></span> 秒 </div> <script> function setTime(){ var now = new Date(); var year = now.getFullYear(); //獲取現(xiàn)在的年份。 var mouth = now.getMonth() + 1; //獲取本年的月份，默認(rèn)的是 0-11；所以進(jìn)行加 1 操作； var date = now.getDate(); //獲取日期，號(hào) var week = now.getDay(); //獲取當(dāng)前時(shí)段的星期 var hour = now.getHours(); //獲取當(dāng)前時(shí)段的小時(shí)位 var minute = now.getMinutes(); //獲取當(dāng)前時(shí)段的分鐘位 var second = now.getSeconds(); //獲取當(dāng)前時(shí)段的秒位 var week1 = [’日’ , ’一’ , ’二’ , ’三’ , ’四’ , ’五’ , ’六’] var week2 = week1[week]; //從當(dāng)前時(shí)間中提取出 年、月、日、周、時(shí)、秒、分 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();//背景顏色隨機(jī)變化 g.style.color = Color();//字體顏色隨機(jī)變化 g.style.background = Color();//背景顏色隨機(jī)變化 } , 1000) </script> </body></html>
里面加了一些小樣式：（顏色是隨機(jī)變化的）
更多JavaScript時(shí)鐘特效點(diǎn)擊查看：JavaScript時(shí)鐘特效專(zhuān)題
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. ASP新手必備的基礎(chǔ)知識(shí)2. PHP基礎(chǔ)之生成器4——比較生成器和迭代器對(duì)象3. CentOS郵箱服務(wù)器搭建系列——SMTP服務(wù)器的構(gòu)建（ Postfix ）4. asp文件用什么軟件編輯5. JAVA 實(shí)現(xiàn)延遲隊(duì)列的方法6. Vue axios獲取token臨時(shí)令牌封裝案例7. js實(shí)現(xiàn)計(jì)算器功能8. JS中6個(gè)對(duì)象數(shù)組去重的方法9. 利用CSS制作3D動(dòng)畫(huà)10. 通過(guò)IEAD+Maven快速搭建SSM項(xiàng)目的過(guò)程(Spring + Spring MVC + Mybatis)
網(wǎng)公網(wǎng)安備