欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript實(shí)現(xiàn)時(shí)鐘功能

 更新時(shí)間：2022年06月21日 11:28:35   作者：短發(fā)少女?(ˉ?ˉ?)  
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)時(shí)鐘功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(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í)分秒還沒(méi)有獲取，所以要先獲取當(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);//處理畫(huà)面更新的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í)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論