使用JS实现在空白页上展示出一个有趣的时钟

前言

在我们日常的网页浏览中，空白的页面往往会被视为一种无趣的事物，一片等待填充的空间。但是，有时候，一些简单的元素却能够在这片空白中点燃无限的想象，甚至让时间停止在那一刻。今天我们来学习一下如何使用JS在空白的网页上展示出一个有趣的时钟吧。

正文

• 首先我们使用一个简单的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空白页上展示时钟的资料请关注脚本之家其它相关文章！