快捷導(dǎo)航

利用用JS實現(xiàn)一個實時小鬧鐘

更新時間：2023年11月05日 08:26:41 作者：來顆奇趣蛋

天我們來聊聊如何使用JS來創(chuàng)建一個實時的小鬧鐘,這個小鬧鐘十分的有趣,小伙伴們可以運行一下,看看跟你電腦上的時間是否對的上呢,文章通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下

結(jié)構(gòu)設(shè)計

我們先來觀察一下這個小鬧鐘

我們先將它整體命名為clock,這個鬧鐘可以分為兩個部分，一個外表盤，一個內(nèi)表盤，我們將它們命名為outer-clock-face和inner-clock-face。

接下來我們先來觀察外表盤，發(fā)現(xiàn)有刻度，我們用marking marking-one、marking marking-two、marking marking-three、marking marking-four四個容器將它們表示出來。

接下來我們來看內(nèi)表盤，發(fā)現(xiàn)里面有時針、秒針、分針這三根針，我們用<div class="hand hour-hand">，<div class="hand min-hand">，和<div class="hand second-hand">，來代表它們，最后使用JS使它們呈現(xiàn)動態(tài)的效果。

接下來我們來看html部分的代碼

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./style.css" rel="external nofollow" >
</head>
<body>
  <div class="clock">
    <div class="outer-clock-face">
      <div class="marking marking-one"></div>
      <div class="marking marking-two"></div>
      <div class="marking marking-three"></div>
      <div class="marking marking-four"></div>

      <div class="inner-clock-face">
        <div class="hand hour-hand"></div>
        <div class="hand min-hand"></div>
        <div class="hand second-hand"></div>
      </div>

    </div>
  </div>

  <script src="./index.js"></script>
</body>
</html>

CSS

首先我們附上代碼

html {
  background: #CCCCFF;
  font-size: 10px;
}

body {
  height: 100vh;
  margin: 0;
  font-size: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.clock {
  width: 30rem;
  height: 30rem;
  border: 7px solid #ffebdb;
  border-radius: 50%;
  box-shadow: -4px -4px 10px rgba(67, 67, 67, 0.1),
    inset 4px 4px 10px rgba(168, 145, 128, 0.6),
    inset -4px -4px 10px rgba(201, 175, 155, 0.2),
    4px 4px 10px rgba(168, 145, 128, 0.6);
  background-image: url("https://p26-passport.byteacctimg.com/img/user-avatar/6836faf9f43e8c77ef339218ab8b601b~130x130.awebp");
  background-size: 108%;
  padding: 2rem;
}

.outer-clock-face {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.outer-clock-face::before,
.outer-clock-face::after {
  content: '';
  width: 10px;
  height: 100%;
  background: #596230;
  position: absolute;
  border-radius: 8px;
}

.outer-clock-face::after {
  transform: rotate(90deg);
}

.marking {
  width: 3px;
  height: 100%;
  background: #596230;
  position: absolute;
}

/*通過旋轉(zhuǎn)實現(xiàn)背景圖上六根分隔線將時鐘分隔的效果*/
.marking-one {
  transform: rotateZ(30deg);
}

.marking-two {
  transform: rotateZ(60deg);
}

.marking-three {
  transform: rotateZ(120deg);
}

.marking-four {
  transform: rotateZ(150deg);
}

.inner-clock-face {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 80%;
  height: 80%;
  background-color: #fffebd;
  z-index: 2;
  border-radius: 50%;
  /*導(dǎo)入外部圖片，也就是時鐘的背景圖*/
  background-image: url("https://p26-passport.byteacctimg.com/img/user-avatar/6836faf9f43e8c77ef339218ab8b601b~130x130.awebp");
  background-size: 108%;
}

.inner-clock-face::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #4d4b63;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.hand {
  width: 50%;
  height: 6px;
  background: red;
  border-radius: 6px;
  position: absolute;
  top: 50%;
  right: 50%;
  margin-top: -3px;
  /*transform-origin修改旋轉(zhuǎn)中心*/
  transform-origin: 100% 50%;
  transform: rotate(90deg);
}

.hour-hand {
  width: 30%;
}

.min-hand {
  width: 40%;
  height: 3px;
}

.second-hand {
  background: #b3b3b3;
  width: 45%;
  height: 2px;
}

全局樣式（html和body） :
- html選擇器用于設(shè)置整個HTML文檔的全局樣式。
- background屬性設(shè)置了背景顏色為淺紫色。
- font-size屬性設(shè)置了字體大小為10px。
Body樣式:
- body選擇器用于設(shè)置整個網(wǎng)頁的主體樣式。
- height屬性設(shè)置頁面高度為視口高度（100vh）。
- margin屬性設(shè)置邊距為0，以確保沒有默認(rèn)邊距。
- font-size屬性設(shè)置字體大小為2rem，相對于根元素的字體大小。
- display: flex和justify-content以及align-items屬性用于將頁面內(nèi)容垂直和水平居中顯示。
時鐘容器樣式 (.clock) :
- width和height屬性設(shè)置了時鐘的寬度和高度，使其呈現(xiàn)為一個圓形。
- border屬性定義了時鐘的邊框樣式。
- border-radius屬性設(shè)置邊框為圓形。
- box-shadow屬性添加了陰影效果。
- background-image屬性設(shè)置了時鐘的背景圖像。
- background-size屬性控制了背景圖像的大小。
- padding屬性為時鐘周圍添加了內(nèi)邊距。
外部表盤樣式 (.outer-clock-face) :
- width、height和border-radius屬性定義了外部表盤的樣式。
- ::before和::after偽元素用于創(chuàng)建兩個垂直的短條形元素。
- transform屬性用于旋轉(zhuǎn)::after偽元素，實現(xiàn)垂直排列。
刻度樣式 (.marking, .marking-one, .marking-two, .marking-three, .marking-four) :
- 這些類定義了表盤上的標(biāo)記或刻度的樣式。
- 通過transform屬性的旋轉(zhuǎn)來將標(biāo)記放置在不同的位置，實現(xiàn)分隔線的效果。
內(nèi)部表盤樣式 (.inner-clock-face) :
- width、height、border-radius屬性設(shè)置內(nèi)部表盤的樣式。
- background-image屬性設(shè)置內(nèi)部表盤的背景圖像。
內(nèi)部表盤中心點樣式 (.inner-clock-face::after) :
- 偽元素::after用于創(chuàng)建時鐘內(nèi)部的中心點。
- 它通過width、height、border-radius等屬性定義了一個小圓形。
指針樣式 (.hand, .hour-hand, .min-hand, .second-hand) :
- 這些類定義了不同類型的時鐘指針的樣式。
- 它們設(shè)置了指針的寬度、高度、顏色、圓角、位置以及旋轉(zhuǎn)中心。

JS

const secondHand = document.querySelector('.second-hand')
const minHand = document.querySelector('.min-hand')
const hourHand = document.querySelector('.hour-hand')

// console.log(secondHand);

function setTime() {
  const now = new Date()

  // 獲取當(dāng)前的秒數(shù)
  const seconds = now.getSeconds() // 30
  const secondsDegrees = seconds * 6 + 90
  secondHand.style.transform = `rotate(${secondsDegrees}deg)`

  // 獲取到分?jǐn)?shù)
  const mins = now.getMinutes() // 40
  const minsDegrees = mins * 6 + 90
  minHand.style.transform = `rotate(${minsDegrees}deg)`

  // 獲取到時
  const hour = now.getHours() // 21
  const hourDegrees = hour * 30 + 90 + (mins / 60) * 30
  hourHand.style.transform = `rotate(${hourDegrees}deg)`
}

setTime()
setInterval(setTime, 1000)

const secondHand = document.querySelector('.second-hand')、const minHand = document.querySelector('.min-hand') 和 const hourHand = document.querySelector('.hour-hand')：這些代碼行通過document.querySelector方法獲取了頁面中具有特定類名的HTML元素，分別表示秒針、分針和時針的指針元素。這些元素將用于通過改變其style.transform屬性來旋轉(zhuǎn)它們以模擬時鐘的運行。
function setTime()：這是一個用于更新時鐘指針位置的JavaScript函數(shù)。函數(shù)內(nèi)部執(zhí)行以下操作：
- 獲取當(dāng)前的日期和時間：通過new Date()創(chuàng)建一個Date對象，然后使用getSeconds()、getMinutes()和getHours()方法分別獲取當(dāng)前的秒、分和時。
- 計算秒針的旋轉(zhuǎn)角度：將秒數(shù)乘以6并加上90度，這是因為12點位置對應(yīng)90度，而每秒鐘對應(yīng)6度。然后將計算得到的角度賦值給secondHand的style.transform屬性，通過rotate(deg)來旋轉(zhuǎn)秒針。
- 計算分針的旋轉(zhuǎn)角度：類似地，將分鐘數(shù)乘以6并加上90度，然后將計算得到的角度賦值給minHand的style.transform屬性。
- 計算時針的旋轉(zhuǎn)角度：將小時數(shù)乘以30并加上90度，同時考慮分鐘數(shù)對時針的微調(diào)，然后將計算得到的角度賦值給hourHand的style.transform屬性。
setTime()：首次調(diào)用setTime函數(shù)來初始化時鐘的指針位置。
setInterval(setTime, 1000)：使用setInterval函數(shù)，每隔1秒（1000毫秒）調(diào)用一次setTime函數(shù)，以不斷更新時鐘指針的位置，從而實現(xiàn)模擬時鐘的運行效果。