前言

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

正文

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

    <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">: 這是整個(gè)時(shí)鐘的容器。

<div class="outer-clock-face">: 這是時(shí)鐘的外圈。

<div class="marking marking-one"></div>: 這是外圈上的一個(gè)標(biāo)記，可能代表小時(shí)或分鐘的刻度 <div class="marking marking-two"></div> <div class="marking marking-three"></div> <div class="marking marking-four"></div> <div class="inner-clock-face">: 這是時(shí)鐘的內(nèi)圈，用于放置時(shí)、分、秒的指針。

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

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

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

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

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

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

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

.clock: 這個(gè)類設(shè)置了時(shí)鐘的整體樣式，包括寬度、高度、邊框、圓角、背景圖像以及填充。其中我們?cè)?*background-image: url('./bg.jpeg');*中填入了我們指定的背景圖片的路徑。如果大家想設(shè)置自己想要的背景圖片，可以填入自己的相對(duì)于當(dāng)前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;
  }

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

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

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

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

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

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

• 在為時(shí)鐘外圈添加了樣式后，我們可以來對(duì)時(shí)空刻度樣式進(jì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: 這個(gè)類設(shè)置了刻度的樣式，包括寬度、高度、背景顏色、絕對(duì)定位和水平居中。

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

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

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

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

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

    .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;
  }

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

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

• 最后我們來到了JS部分，如何讓這個(gè)時(shí)鐘具有動(dòng)態(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()

    // 獲取當(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)

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

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

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

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

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