快捷導(dǎo)航

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

更新時(shí)間：2023年11月05日 08:26:41 作者：來(lái)顆奇趣蛋

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

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

我們先來(lái)觀察一下這個(gè)小鬧鐘

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

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

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

接下來(lái)我們來(lá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;
}

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

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

這段代碼的目的是通過(guò)JavaScript實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的時(shí)鐘模擬，每秒鐘更新一次時(shí)、分和秒針的位置，以顯示當(dāng)前的時(shí)間。通過(guò)獲取當(dāng)前時(shí)間并計(jì)算相應(yīng)的旋轉(zhuǎn)角度，它實(shí)現(xiàn)了時(shí)鐘指針的動(dòng)態(tài)運(yùn)行效果。

以上就是利用用JS實(shí)現(xiàn)一個(gè)實(shí)時(shí)小鬧鐘的詳細(xì)內(nèi)容，更多關(guān)于JS實(shí)時(shí)小鬧鐘的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: