JavaScript實(shí)現(xiàn)時(shí)鐘功能
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)時(shí)鐘功能的具體代碼,供大家參考,具體內(nèi)容如下
1、HTML和CSS部分
1.1 HTML部分
1.1.1先放在一個(gè)容器中clock,存放 用來(lái)存放時(shí)針、分鐘、秒鐘的容器
<div class = "clock"></div>
1.1.2 用來(lái)存放時(shí)針、分鐘、秒鐘的容器
<div class="clock"> ? <div class="clock-face"></div> </div>
1.1.3 各個(gè)時(shí)針、分針、秒鐘的容器
<div class="clock"> ? <div class="clock-face"> ? ? <div class="hand hour-hand"></div> ? ? <div class="hand min-hand"></div> ? ? <div class="hand second-hand"></div> ? </div> </div>
1.2 CSS部分
1.2.1 背景、布局
html { ?? ?background: #018DED url(https://unsplash.it/1500/1000?image=881&blur=5); ?? ?background-size: cover; ?? ?font-family: 'helvetica neue'; ?? ?text-align: center; ?? ?font-size: 10px; } body { ?? ?margin: 0; ?? ?font-size: 2rem; ?? ?display: flex; ?? ?flex: 1; ?? ?min-height: 100vh; ?? ?align-items: center; }
1.2.2 設(shè)置時(shí)鐘的外圓邊框
.clock{ ?? ?width:30rem; ?? ?height:30rem; ?? ?border:20px solid white; ?? ?border-radius:50%; ?? ?margin:50px auto; ?? ?position:relative; ?? ?padding:2rem; ?? ?box-shadow: ? ? ? ? ? ? 0 0 0 4px rgba(0,0,0,0.1), ? ? ? ? ? ? inset 0 0 0 3px #EFEFEF, ? ? ? ? ? ? inset 0 0 10px black, ? ? ? ? ? ? 0 0 10px rgba(0,0,0,0.2); }
1.2.3 設(shè)置存放時(shí)分秒的容器
.clock-face{ ?? ?position:relative; ?? ?width:100%; ?? ?height:100%; ?? ?transform:translateY(-3px); } .clock-face:after{ ?? ?content:''; ?? ?width:30px; ?? ?height:30px; ?? ?border-radius:100%; ?? ?background-color:white; ?? ?display:block; ?? ?top:50%; ?? ?left:50%; ?? ?transform:translate(-50%,-50%); ?? ?position:absolute; }
1.2.4設(shè)置時(shí)分秒對(duì)應(yīng)的容器
.hand{ ?? ?position:absolution; ?? ?width:100%; ?? ?height: 100%; } .second-hand:after{ ? ? content: ''; ? ? display: block; ? ? width: 5px; ? ? height: 50%; ? ? background-color: black; ? ? left: 50%; ? ? bottom: 50%; ? ? transform: translate(-50%,0%); ? ? position: absolute; ? } ? .min-hand:after{ ? ? content: ''; ? ? display: block; ? ? width: 10px; ? ? height: 40%; ? ? background-color: gray; ? ? left: 50%; ? ? bottom: 50%; ? ? transform: translate(-50%,0%); ? ? position: absolute; ? } ? .hour-hand:after{ ? ? content: ''; ? ? display: block; ? ? width: 15px; ? ? height: 20%; ? ? background-color: white; ? ? left: 50%; ? ? bottom: 50%; ? ? transform: translate(-50%,0%); ? ? position: absolute; ? }
transform布局的方式
2、 JS部分(IIFE立即函式,不會(huì)外露)
(1)首先要實(shí)現(xiàn)的是獲取當(dāng)前的時(shí)間和針
(2)設(shè)置時(shí)間的轉(zhuǎn)動(dòng)
2.1 先獲取每個(gè)針
let second = document.querySelector('.second-hand'); let min = document.querySelector('.min-hand'); let hour = document.querySelector('.hour-hand');
2.2 時(shí)針的指向
2.2.1 獲取當(dāng)前的時(shí)間
function setDate(){ ?? ?//首先先獲取時(shí)間,用Data() ?? ?let data = new Data(); }
2.2.2 讓上面獲取的指針等于Data()的時(shí)間
1.這里要使用到transform:rotate()函數(shù),獲得要轉(zhuǎn)動(dòng)的角度。
second.style.transform = `rotate(數(shù)字/變量+Deg)`; min.style.transform = `rotate(數(shù)字/變量+Deg)`; hour.style.transform = `rotate(數(shù)字/變量+Deg)`;
2.由于當(dāng)前時(shí)間的時(shí)分秒還沒有獲取,所以要先獲取當(dāng)前時(shí)分秒的時(shí)間,當(dāng)成變量賦值給rotate函數(shù)
let secondDeg = data.getSeconds(); let minDeg = data.getMinutes(); let hourDeg = data.getHours();
3.由于rotate需要獲得的是角度而不是時(shí)間,所以你需要分別計(jì)算出時(shí)分秒走動(dòng)一次需要多少的角度。
let secondDeg = data.getSeconds() * 6; let minDeg = data.getMinutes() * 6; let hourDeg = data.getHours() *30;
4.完整的賦值
let second = document.querySelector('.second-hand') let min = document.querySelector('.min-hand') let hour = document.querySelector('.hour-hand') function setClock(){ ? let data = new Date(); ? let secondDeg = data.getSeconds() * 6 // (deg = 360/60) ? let minDeg = data.getMinutes() * 6 // (deg = 360/60) ? let hourDeg = data.getHours() * 30 // (deg = 360/12) ? second.style.transform = `rotate(${secondDeg}deg)` ? min.style.transform = `rotate(${minDeg}deg)` ? hour.style.transform = `rotate(${hourDeg}deg)` } setClock();
2.2 設(shè)置計(jì)時(shí)器讓他們走動(dòng)
/**多種計(jì)時(shí)器的方法 ? ? ?* 1. setInterval(函數(shù),時(shí)間) ? ? ?* 2. setTimeout(函數(shù),時(shí)間) ? ? ?* 3. window.requestAnimationFrame(函數(shù))這個(gè)不需要設(shè)置時(shí)間,它會(huì)根據(jù)你硬件的速度來(lái)更改時(shí)間 ? ? ?* */ setInterval(setDate, 1000); //設(shè)定間隔,執(zhí)行很多次 /*function timeoutHandler(){ ? setDate(); ? setTimeout(timeoutHandler,1000);//這樣就可以連續(xù)執(zhí)行了 } setTimeout(timeoutHandler,1000);//延遲多久執(zhí)行一次*/ /*function animationHandler(){ ? setDate(); ? window.requestAnimationFrame(animationHandler);//處理畫面更新的setTimeout } window.requestAnimationFrame(animationHandler);*/
2.3 發(fā)現(xiàn)問(wèn)題
發(fā)現(xiàn)分針和時(shí)針會(huì)等到秒鐘走完一圈后才移動(dòng)一個(gè),我們應(yīng)該讓他緩慢的移動(dòng),所以需要在時(shí)分后面算上分秒的角度
*一分鐘走60秒,而分針走一小格的角度是6°,所以一度走幾秒算出來(lái),單位是度/秒。最后乘以時(shí)間,所以單位是度/秒 秒 = 度。
let secondDeg = data.getSeconds() * 6; //(360/60) let minDeg = data.getMinutes() * 6 + data.getSeconds() *6/60; //(360/60) let hourDeg = data.getHours() * 30 + data.getMinutes() * 30/60;//(360/12)
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- js實(shí)現(xiàn)一個(gè)簡(jiǎn)單的數(shù)字時(shí)鐘效果
- JavaScript實(shí)現(xiàn)抖音羅盤時(shí)鐘
- html5 canvas js(數(shù)字時(shí)鐘)實(shí)例代碼
- 五步輕松實(shí)現(xiàn)JavaScript HTML時(shí)鐘效果
- 一個(gè)簡(jiǎn)易時(shí)鐘效果js實(shí)現(xiàn)代碼
- JavaScript實(shí)現(xiàn)簡(jiǎn)單的時(shí)鐘實(shí)例代碼
- 基于javascript實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘效果
- Javascript實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘效果
- javascript入門·動(dòng)態(tài)的時(shí)鐘,顯示完整的一些方法,新年倒計(jì)時(shí)
- js時(shí)鐘翻牌效果實(shí)現(xiàn)代碼分享
相關(guān)文章
ESC之ESC.wsf可以實(shí)現(xiàn)javascript的代碼壓縮附使用方法
可以對(duì)javascript的大小進(jìn)行壓縮。使javascript的加載速度變快。2007-05-05mock.js模擬數(shù)據(jù)的實(shí)現(xiàn)
在沒有后端提供數(shù)據(jù)的情況下,前端人員在自己寫demo或者練手項(xiàng)目的時(shí)候可以使用mock.js來(lái)模擬數(shù)據(jù),本文主要介紹了mock.js模擬數(shù)據(jù)的實(shí)現(xiàn),感興趣的可以了解一下2023-11-11webpack實(shí)現(xiàn)熱加載自動(dòng)刷新的方法
本文介紹了webpack實(shí)現(xiàn)熱加載自動(dòng)刷新的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07JavaScript中錯(cuò)誤正確處理方式小結(jié)你用對(duì)了嗎
本文將會(huì)討論客戶端JavaScript中的錯(cuò)誤處理。主要介紹JavaScript中的易犯錯(cuò)誤、錯(cuò)誤處理、異步代碼編寫等內(nèi)容。下面就讓我們一起看看如何正確處理JavaScript中的錯(cuò)誤2017-10-10TS報(bào)錯(cuò):Parameter?'xxx'?implicitly?has?an?'
這篇文章主要給大家介紹了關(guān)于TS報(bào)錯(cuò):Parameter?'xxx'?implicitly?has?an?'any'?type的解決方式,文中將產(chǎn)生錯(cuò)誤的原因及解決方法都介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10js實(shí)現(xiàn)指定時(shí)間倒計(jì)時(shí)效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)指定時(shí)間倒計(jì)時(shí)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-08-08基于HTML+JavaScript實(shí)現(xiàn)中國(guó)象棋
這篇文章主要為大家詳細(xì)介紹了如何利用HTML+CSS+JS實(shí)現(xiàn)中國(guó)象棋游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-08-08javascript實(shí)現(xiàn)圖片循環(huán)漸顯播放的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)圖片循環(huán)漸顯播放的方法,涉及javascript操作圖片的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02