JavaScript實現(xiàn)時鐘功能
更新時間：2022年06月21日 11:28:35 作者：短發(fā)少女?(ˉ?ˉ?)
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)時鐘功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JavaScript實現(xiàn)時鐘功能的具體代碼，供大家參考，具體內容如下
1、HTML和CSS部分
1.1 HTML部分
1.1.1先放在一個容器中clock，存放 用來存放時針、分鐘、秒鐘的容器
<div class = "clock"></div>
1.1.2 用來存放時針、分鐘、秒鐘的容器
<div class="clock"> ? <div class="clock-face"></div> </div>
1.1.3 各個時針、分針、秒鐘的容器
<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 設置時鐘的外圓邊框
.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 設置存放時分秒的容器
.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設置時分秒對應的容器
.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立即函式，不會外露）
（1）首先要實現(xiàn)的是獲取當前的時間和針
（2）設置時間的轉動
2.1 先獲取每個針
let second = document.querySelector('.second-hand');
let min = document.querySelector('.min-hand');
let hour = document.querySelector('.hour-hand');2.2 時針的指向
2.2.1 獲取當前的時間
function setDate(){
?? ?//首先先獲取時間，用Data（）
?? ?let data = new Data();
}2.2.2 讓上面獲取的指針等于Data（）的時間
1.這里要使用到transform:rotate()函數(shù),獲得要轉動的角度。
second.style.transform = `rotate(數(shù)字/變量+Deg)`; min.style.transform = `rotate(數(shù)字/變量+Deg)`; hour.style.transform = `rotate(數(shù)字/變量+Deg)`;
2.由于當前時間的時分秒還沒有獲取，所以要先獲取當前時分秒的時間，當成變量賦值給rotate函數(shù)
let secondDeg = data.getSeconds(); let minDeg = data.getMinutes(); let hourDeg = data.getHours();
3.由于rotate需要獲得的是角度而不是時間，所以你需要分別計算出時分秒走動一次需要多少的角度。
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 設置計時器讓他們走動
/**多種計時器的方法
? ? ?* 1. setInterval(函數(shù)，時間)
? ? ?* 2. setTimeout(函數(shù)，時間)
? ? ?* 3. window.requestAnimationFrame(函數(shù))這個不需要設置時間，它會根據(jù)你硬件的速度來更改時間
? ? ?* */
setInterval(setDate, 1000); //設定間隔，執(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)問題
發(fā)現(xiàn)分針和時針會等到秒鐘走完一圈后才移動一個，我們應該讓他緩慢的移動，所以需要在時分后面算上分秒的角度
*一分鐘走60秒，而分針走一小格的角度是6°，所以一度走幾秒算出來，單位是度/秒。最后乘以時間，所以單位是度/秒 秒 = 度。
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)
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
ESC之ESC.wsf可以實現(xiàn)javascript的代碼壓縮附使用方法
可以對javascript的大小進行壓縮。使javascript的加載速度變快。2007-05-05
在沒有后端提供數(shù)據(jù)的情況下,前端人員在自己寫demo或者練手項目的時候可以使用mock.js來模擬數(shù)據(jù),本文主要介紹了mock.js模擬數(shù)據(jù)的實現(xiàn),感興趣的可以了解一下2023-11-11
本文介紹了webpack實現(xiàn)熱加載自動刷新的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
本文將會討論客戶端JavaScript中的錯誤處理。主要介紹JavaScript中的易犯錯誤、錯誤處理、異步代碼編寫等內容。下面就讓我們一起看看如何正確處理JavaScript中的錯誤2017-10-10
本文主要介紹了JS仿JQuery選擇器功能的實例，具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
TS報錯:Parameter?'xxx'?implicitly?has?an?'
這篇文章主要給大家介紹了關于TS報錯:Parameter?'xxx'?implicitly?has?an?'any'?type的解決方式,文中將產生錯誤的原因及解決方法都介紹的非常詳細,需要的朋友可以參考下2022-10-10
這篇文章主要為大家詳細介紹了js實現(xiàn)指定時間倒計時效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-08-08
這篇文章主要為大家詳細介紹了如何利用HTML+CSS+JS實現(xiàn)中國象棋游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
javascript實現(xiàn)圖片循環(huán)漸顯播放的方法
這篇文章主要介紹了javascript實現(xiàn)圖片循環(huán)漸顯播放的方法,涉及javascript操作圖片的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
下面小編就為大家?guī)硪黄獪\談javascript中的三種彈窗。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10