前端开发教程：用JS实现动态网页时钟

前言

在常规的网页浏览体验中，空白页面常被视作缺乏内容的区域，仅作为待填充的空间存在。然而，引入少量简洁的元素即可激发丰富的视觉想象，甚至营造出时间静止的独特氛围。本文将探讨如何运用JavaScript技术，在网页空白处呈现一个具有交互趣味的动态时钟。

正文

首先，我们需要构建基础的HTML结构，以确立时钟的基本外观框架。

    <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"> 共同构成了时钟的内圈，负责承载时、分、秒三根指针。

<div class="hand hour-hand"></div> 对应时钟的时针组件。

<div class="hand min-hand"></div> 对应时钟的分针组件。

<div class="hand second-hand"></div> 对应时钟的秒针组件。

上述HTML代码构建了时钟的基础结构，但需配合CSS进行视觉美化，并通过JavaScript实现动态交互效果。

既然需要引入JS和CSS来实现动态效果，接下来我们需要探讨如何设计相应的CSS样式。

下面我们将分析关键CSS代码所实现的时钟样式细节。

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

.clock 类定义了时钟的整体外观，包括宽度、高度、边框、圆角、背景图像及内边距。其中，*background-image: url('./bg.jpeg');* 指定了背景图片的路径。若需更换背景，可替换为相对于当前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 类设置了外圈的尺寸、圆角及相对定位属性。
.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); 将装饰元素旋转90度，对应时钟“3”点位置。
- transform-origin: center center; 定义旋转中心为元素中心点，确保旋转效果正确应用。

完成外圈样式后，接下来定义时钟刻度的样式。

     .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 类设置了刻度的尺寸、颜色、绝对定位及水平居中方式。
- width: 3px; height: 100%; 定义了刻度的宽高，使其在竖直方向贯穿整个时钟。
- background: #596235; 设置了刻度的背景颜色。
- position: absolute; left: 50%; 将刻度相对于外圈绝对定位并水平居中。
- transform: translate(-50%); 通过向左移动自身宽度的一半，实现水平居中。
- transform-origin: center center; 定义变换中心为刻度中心点，确保旋转效果正确。
.marking-one、.marking-two、.marking-three 和 .marking-four 分别用于定义不同位置刻度的样式。
- transform: rotateZ(deg); 通过旋转刻度使其分布于时钟不同位置。例如，.marking-one 旋转30度，位于“1”点位置；.marking-two 旋转60度，位于“2”点位置，依此类推。

通过这些样式，我们在时钟外圈添加了刻度，便于用户读取时间。

最后，CSS部分定义了内圈样式以及时、分、秒指针的样式。

    .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 中定义了内圈的宽高和背景颜色，并在 .hand 中定义了指针的共同样式，包括宽高、背景色、圆角、绝对定位、水平居中及垂直偏移。

这些样式使时钟内圈和指针在页面上呈现美观且功能完整的外观，各部分样式经精心设计以确保时间显示准确。

接下来进入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()

    // 获取当前的秒数
    const seconds = now.getSeconds() // 30
    const secondsDegrees = seconds * 6 + 90
    secondHand.style.transform = `rotate(${secondsDegrees}deg)`

    // 获取到分数
    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 函数更新秒针状态，并使用 setInterval 函数每秒调用一次 setTime 函数，以保持时钟的实时更新。

代码中增加了读取分钟和小时的逻辑，并分别计算相应的旋转角度。
在 setTime 函数中，更新了分钟和小时指针的旋转角度。
在 hoursDegrees 的计算中，使用 (hours % 12) 确保小时数在12小时制下不超过12。
计算 hoursDegrees 时，考虑了分钟对时针角度的微调，使时针能够平滑过渡。

本文通过HTML、CSS和JavaScript创建了一个简单且功能完整的网页时钟。HTML定义了包括内外表盘及指针的结构；CSS美化了外观并实现了指针的动态旋转；JavaScript获取当前时间并更新指针位置，从而实现实时时钟功能。

总体而言，该网页时钟展示了HTML、CSS和JavaScript的结合力量，通过三者协作可创造出各类交互式动态网页元素。无论是前端开发学习还是网页技术入门，该项目均为良好的实践起点。

以上为使用JS实现在空白页上展示出一个有趣的时钟的详细内容，更多关于JS空白页上展示时钟的资料请关注本站其它相关文章！

利用HTML、CSS与JavaScript构建动态网页时钟

前言

正文

实用工具推荐