前言

在我們?nèi)粘５木W(wǎng)頁瀏覽中，空白的頁面往往會被視為一種無趣的事物，一片等待填充的空間。但是，有時候，一些簡單的元素卻能夠在這片空白中點燃無限的想象，甚至讓時間停止在那一刻。今天我們來學習一下如何使用JS在空白的網(wǎng)頁上展示出一個有趣的時鐘吧。

正文

• 首先我們使用一個簡單的HTML結(jié)構(gòu)，用于創(chuàng)建一個時鐘的外觀

    <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>

<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">: 這是時鐘的內(nèi)圈，用于放置時、分、秒的指針。

<div class="hand hour-hand"></div>: 這是時針。

<div class="hand min-hand"></div>: 這是分針。

<div class="hand second-hand"></div>: 這是秒針。

這段HTML代碼創(chuàng)建了一個簡單的時鐘外觀的結(jié)構(gòu)，但是它還需要通過CSS來添加樣式，以及通過JavaScript來實現(xiàn)時鐘的動態(tài)效果。

既然還需要添加JS和CSS樣式來實現(xiàn)動態(tài)效果，那我們先思考一下如何使用怎樣的CSS樣式呢？

• 我們來分析一下下面這些CSS代碼實現(xiàn)了哪些時鐘的樣式呢

.clock{
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: 7px solid #ffebdb;
    background-image: url('./bg.jpeg');
    background-size: 111%;
    padding: 20px;

.clock: 這個類設(shè)置了時鐘的整體樣式，包括寬度、高度、邊框、圓角、背景圖像以及填充。其中我們在 *background-image: url('./bg.jpeg');*中填入了我們指定的背景圖片的路徑。如果大家想設(shè)置自己想要的背景圖片，可以填入自己的相對于當前HTML文件的背景圖片路徑

    .outer-clock-face{
    width: 100%;
    height: 100%;
    border-radius: 100%;
    position: relative;
  }
  .outer-clock-face::before,
  .outer-clock-face::after{
    content: '';
    width: 10px;
    height: 100%;
    background: #596235;
    display: block;
    border-radius: 8px;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
  }
  .outer-clock-face::after{
    transform: rotateZ(90deg);
    transform-origin: center center;
  }

這段代碼為時鐘的外圈添加了樣式：

• .outer-clock-face: 這個類設(shè)置了外圈的樣式，包括寬度、高度、圓角和相對定位。

• .outer-clock-face::before 和 .outer-clock-face::after: 這兩個偽元素用來創(chuàng)建外圈的裝飾元素。

  • content: '': 這個屬性設(shè)置了偽元素的內(nèi)容為空。
  • width: 10px; height: 100%;: 這個設(shè)置了裝飾元素的寬度和高度，使其與外圈的高度一致。
  • background: #596235;: 這個設(shè)置了裝飾元素的背景顏色。
  • display: block;: 這個將偽元素設(shè)置為塊級元素，使其能夠占據(jù)外圈的完整高度。
  • border-radius: 8px;: 這個設(shè)置了裝飾元素的圓角。
  • position: absolute; left: 50%;: 這個將裝飾元素相對于外圈進行絕對定位，并水平居中。
  • transform: translate(-50%);: 這個將裝飾元素在水平方向上向左移動自身寬度的一半，以實現(xiàn)水平居中。

• .outer-clock-face::after: 這個偽元素定義了外圈的另一個裝飾元素，通過旋轉(zhuǎn)使其呈現(xiàn)出時鐘的外觀。

  • transform: rotateZ(90deg);: 這個旋轉(zhuǎn)了裝飾元素90度，使其成為時鐘的 "3" 點位置。
  • transform-origin: center center;: 這個定義了旋轉(zhuǎn)的中心點為裝飾元素的中心點，確保旋轉(zhuǎn)效果正確應用。

• 在為時鐘外圈添加了樣式后，我們可以來對時空刻度樣式進行定義

     .marking{
    width: 3px;
    height: 100%;
    background: #596235;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    transform-origin: center center;
  }
  .marking-one{
    transform: rotateZ(30deg);
  }
  .marking-two{
    transform: rotateZ(60deg);
  }
  .marking-three{
    transform: rotateZ(120deg);
  }
  .marking-four{
    transform: rotateZ(150deg);
  }

• .marking: 這個類設(shè)置了刻度的樣式，包括寬度、高度、背景顏色、絕對定位和水平居中。

  • width: 3px; height: 100%;: 這個設(shè)置了刻度的寬度和高度，使其豎直方向占據(jù)整個時鐘的高度。
  • background: #596235;: 這個設(shè)置了刻度的背景顏色。
  • position: absolute; left: 50%;: 這個將刻度相對于外圈進行絕對定位，并水平居中。
  • transform: translate(-50%);: 這個將刻度在水平方向上向左移動自身寬度的一半，以實現(xiàn)水平居中。
  • transform-origin: center center;: 這個定義了變換的中心點為刻度的中心點，確保變換效果正確應用。

• .marking-one、.marking-two、.marking-three 和 .marking-four: 這些類分別用于定義不同位置的刻度樣式。

  • transform: rotateZ(deg);: 這個通過旋轉(zhuǎn)刻度來使其分布在時鐘的不同位置。例如，.marking-one 的旋轉(zhuǎn)角度為30度，表示它位于時鐘的 "1" 點位置；.marking-two 旋轉(zhuǎn)60度，表示它位于時鐘的 "2" 點位置，以此類推。

通過這些樣式，我們可以在時鐘的外圈上添加刻度，以便于用戶讀取時間

• [ ]最后css部分我們來到了定義了時鐘的內(nèi)圈樣式以及時、分、秒指針的樣式

    .inner-clock-face{
    width: 80%;
    height: 80%;
    border-radius: 50%;
    background-color: #ffebdb;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
  }
  .hand{
    width: 50%;
    height: 6px;
    background: red;
    border-radius: 6px;
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translateY(-50%) rotateZ(90deg);
    transform-origin: 100% center;
  }
  .hour-hand{
    width: 30%;
  }
  .min-hand{
    width: 40%;
    height: 3px;
  }
  .second-hand{
    width: 45%;
    height: 2px;
    background: #b3b3b3;
  }

我們在.inner-clock-face部分對內(nèi)圈的寬度和高度，背景顏色等進行了定義，然后在.hand部分定義了時鐘指針的共同樣式，包括寬度、高度、背景顏色、邊框半徑、絕對定位、水平居中和垂直偏移。

這些樣式會使時鐘內(nèi)圈和指針在頁面上呈現(xiàn)出具有美感和功能性的外觀，并且各個部分的樣式經(jīng)過了精心設(shè)計以確保它們能夠正確地顯示時間。

• 最后我們來到了JS部分，如何讓這個時鐘具有動態(tài)效果呢？

    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()

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

    // 獲取到分數(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)

我們通過 setTime 函數(shù)來更新時鐘的秒針，并使用 setInterval 函數(shù)每秒鐘調(diào)用一次 setTime 函數(shù)來保持時鐘的實時更新。

• 添加了讀取分鐘和小時的邏輯，并分別計算出相應的旋轉(zhuǎn)角度。
• 在 setTime 函數(shù)中更新了分鐘和小時指針的旋轉(zhuǎn)角度。
• hoursDegrees 的計算中，使用了 (hours % 12) 來確保小時數(shù)在12小時制下不超過12。
• 在計算 hoursDegrees 時，考慮了分鐘對時針的微調(diào)，使得時針能夠平滑過渡。

在這篇文章中，我們通過 HTML、CSS 和 JavaScript 創(chuàng)建了一個簡單而功能性的網(wǎng)頁時鐘。通過 HTML，我們定義了時鐘的結(jié)構(gòu)，包括外部和內(nèi)部的時鐘面以及時、分、秒指針。然后，通過 CSS，我們?yōu)闀r鐘添加了樣式，使其外觀更加美觀，并且實現(xiàn)了指針的動態(tài)旋轉(zhuǎn)效果。最后，通過 JavaScript，我們獲取了當前的時間，并根據(jù)時間更新了時、分、秒指針的位置，從而實現(xiàn)了實時更新的時鐘功能。

總的來說，這個網(wǎng)頁時鐘展示了 HTML、CSS 和 JavaScript 的強大之處，通過它們的結(jié)合，我們可以創(chuàng)造出各種各樣的交互式和動態(tài)的網(wǎng)頁元素。無論是學習前端開發(fā)還是簡單地了解網(wǎng)頁技術(shù)，這個項目都是一個很好的起點。

以上就是使用JS實現(xiàn)在空白頁上展示出一個有趣的時鐘的詳細內(nèi)容，更多關(guān)于JS空白頁上展示時鐘的資料請關(guān)注腳本之家其它相關(guān)文章！