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

 更新时间:2024年04月23日 09:05:51   作者:英缺思听  
在我们日常的网页浏览中,空白的页面往往会被视为一种无趣的事物,一片等待填充的空间,今天我们来学习一下如何使用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空白页上展示时钟的资料请关注脚本之家其它相关文章!

相关文章

  • Javascript封装DOMContentLoaded事件实例

    Javascript封装DOMContentLoaded事件实例

    这篇文章主要介绍了Javascript封装DOMContentLoaded事件实例,DOMContentLoaded是FF,Opera 9的特有的Event, 当所有DOM解析完以后会触发这个事件,需要的朋友可以参考下
    2014-06-06
  • js计算两个时间之间天数差的实例代码

    js计算两个时间之间天数差的实例代码

    这篇文章主要介绍了js计算两个时间之间天数差的实例代码,有需要的朋友可以参考一下
    2013-11-11
  • Json Web Token在前后端实践思考分析

    Json Web Token在前后端实践思考分析

    这篇文章主要为大家介绍了Json Web Token在前后端实践思考分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • Js 时间函数getYear()的使用问题探讨

    Js 时间函数getYear()的使用问题探讨

    不推荐使用getYear()这个函数,因为在火狐中显示是不正确的,所以推荐使用getFullYear() 函数,接下来为大家详细介绍下getYear函数在不同浏览下的使用问题
    2013-04-04
  • 图片格式的JavaScript和CSS速查手册

    图片格式的JavaScript和CSS速查手册

    图片格式的JavaScript和CSS速查手册...
    2007-08-08
  • js倒计时简单实现方法

    js倒计时简单实现方法

    这篇文章主要介绍了js倒计时简单实现方法,方便一些提示重要日期的来临,感兴趣的小伙伴们可以参考一下
    2015-12-12
  • JavaScript中import用法总结

    JavaScript中import用法总结

    在本篇文章里小编给大家分享了关于JavaScript中import用法知识点,有需要的朋友们可以学习下。
    2019-01-01
  • 小试JavaScript多线程

    小试JavaScript多线程

    这两天一直在弄ajax,用多了才发现了ajax 的cache问题,请求了好多次,得到了确是相同的结果,经常我想在请求的同时去做一些其它的事情,我在想javascript里有没有办法用多线程,经过在网上查找找到了结果。
    2008-11-11
  • js实现网页倒计时、网站已运行时间功能的代码3例

    js实现网页倒计时、网站已运行时间功能的代码3例

    这篇文章主要介绍了js实现网页倒计时、网站已运行时间功能的代码3例,需要的朋友可以参考下
    2014-04-04
  • JS模板编译的实现详情

    JS模板编译的实现详情

    这篇文章主要介绍了JS模板编译的实现详情,编译是一种格式变成另一种格式的过程。编译会导致好的结果,比如书写简单的代码,编译出来复杂的代码;或者提高代码的使用性能
    2022-07-07

最新评论