热搜：前端 vuedraggable 插件 vue

使用JS+CSS3实现一个时钟

lxf2023-07-31 22:40:01

​

实现时钟功能有很多种方式，本文实例介绍了利用了js+css3的新特性进行时钟功能的实现。

 

先看效果图：

使用JS+CSS3实现一个时钟

具体内容如下：

1. 思路

  • 构建时钟的静态html结构，利用css控制时钟元素的样式和布局
  • 使用css的绝对定位和transform属性固定住秒针、分针、时针和刻度等一些元素的位置
  • 利用js控制指针元素的transform属性的rotate值，使其旋转。
  • 利用js的Date对象获取当前时间和setInterval函数来不断更新指针位置。

 2. html部分

<body>
<div class="outer-container">
  <div class="inner-container">
    <!--    时钟中心点-->
    <div class="clock-center"></div>
    <!--    垂直和水平方向的时间刻度-->
    <div class="scale  left-scale"></div>
    <div class="scale  top-scale"></div>
    <div class="scale  right-scale"></div>
    <div class="scale  bottom-scale"></div>
    <!--    普通小时的时间刻度-->
    <div class="hour-scale one-scale"></div>
    <div class="hour-scale two-scale"></div>
    <div class="hour-scale four-scale"></div>
    <div class="hour-scale five-scale"></div>
    <div class="hour-scale seven-scale"></div>
    <div class="hour-scale eight-scale"></div>
    <div class="hour-scale ten-scale"></div>
    <div class="hour-scale eleven-scale"></div>
    <!--    时针-->
    <div class="pointer hour-pointer"></div>
    <!--    分针-->
    <div class="pointer minute-pointer"></div>
    <!--    秒针-->
    <div class="pointer second-pointer"></div>
  </div>
</div>
</body>

使用JS+CSS3实现一个时钟

html部分很简单，有一个外层容器和内层容器，目的是来制作时钟的边框效果，在内层容器中有一些必要的元素标签，包括指针、刻度、中心点，都加上类名加以区分。

2.%20css部分 

%20%20%20%20html%20{
%20%20%20%20%20%20background-color:%20rgb(40,%2040,%2040);
%20%20%20%20}

%20%20%20%20.outer-container,%20.inner-container,%20.clock-center,%20.scale,%20.hour-scale%20{
%20%20%20%20%20%20position:%20absolute;
%20%20%20%20%20%20top:%2050%;
%20%20%20%20%20%20left:%2050%;
%20%20%20%20%20%20transform:%20translate(-50%,%20-50%);
%20%20%20%20%20%20border-radius:%2050%;
%20%20%20%20}

%20%20%20%20.outer-container%20{
%20%20%20%20%20%20width:%20400px;
%20%20%20%20%20%20height:%20400px;
%20%20%20%20%20%20border:%203px%20solid%20#232323;
%20%20%20%20%20%20box-shadow:%205px%205px%205px%205px%20#252525;
%20%20%20%20%20%20background-color:%20rgb(30,%2030,%2030);
%20%20%20%20}

%20%20%20%20.inner-container%20{
%20%20%20%20%20%20width:%20375px;
%20%20%20%20%20%20height:%20375px;
%20%20%20%20%20%20border:%201px%20solid%20#272626;
%20%20%20%20%20%20box-shadow:%20inset%205px%205px%205px%205px%20#272727;
%20%20%20%20%20%20background-color:%20rgb(50,%2050,%2050);
%20%20%20%20}

%20%20%20%20.clock-center%20{
%20%20%20%20%20%20background-color:%20#5c5757;
%20%20%20%20%20%20width:%2015px;
%20%20%20%20%20%20height:%2015px;
%20%20%20%20%20%20transform:%20translate(-50%,%20-50%);
%20%20%20%20%20%20z-index:%201;
%20%20%20%20}

%20%20%20%20.scale%20{
%20%20%20%20%20%20width:%208px;
%20%20%20%20%20%20height:%2030px;
%20%20%20%20%20%20position:%20absolute;
%20%20%20%20%20%20border-radius:%203px;
%20%20%20%20%20%20background-color:%20#6de84d;
%20%20%20%20}

%20%20%20%20.top-scale%20{
%20%20%20%20%20%20transform:%20translate(-50%,%20-50%)%20translateY(-160px);
%20%20%20%20}

%20%20%20%20.bottom-scale%20{
%20%20%20%20%20%20transform:%20translate(-50%,%20-50%)%20rotate(180deg)%20translateY(-160px);
%20%20%20%20}

%20%20%20%20.left-scale%20{
%20%20%20%20%20%20transform:%20translate(-50%,%20-50%)%20rotate(90deg)%20translateY(-160px);
%20%20%20%20}

%20%20%20%20.right-scale%20{
%20%20%20%20%20%20transform:%20translate(-50%,%20-50%)%20rotate(270deg)%20translateY(-160px);
%20%20%20%20}

%20%20%20%20.hour-scale%20{
%20%20%20%20%20%20width:%205px;
%20%20%20%20%20%20height:%2022px;
%20%20%20%20%20%20background-color:%20#fff;
%20%20%20%20%20%20border-radius:%203px;

%20%20%20%20}

%20%20%20%20.one-scale%20{
%20%20%20%20%20%20transform:%20translate(-50%,%20-50%)%20rotate(30deg)%20translateY(-160px);
%20%20%20%20}

%20%20%20%20.two-scale%20{
%20%20%20%20%20%20transform:%20translate(-50%,%20-50%)%20rotate(60deg)%20translateY(-160px);
%20%20%20%20}

%20%20%20%20.four-scale%20{
%20%20%20%20%20%20transform:%20translate(-50%,%20-50%)%20rotate(120deg)%20translateY(-160px);
%20%20%20%20}

%20%20%20%20.five-scale%20{
%20%20%20%20%20%20transform:%20translate(-50%,%20-50%)%20rotate(150deg)%20translateY(-160px);
%20%20%20%20}

%20%20%20%20.seven-scale%20{
%20%20%20%20%20%20transform:%20translate(-50%,%20-50%)%20rotate(210deg)%20translateY(-160px);
%20%20%20%20}

%20%20%20%20.eight-scale%20{
%20%20%20%20%20%20transform:%20translate(-50%,%20-50%)%20rotate(240deg)%20translateY(-160px);
%20%20%20%20}

%20%20%20%20.ten-scale%20{
%20%20%20%20%20%20transform:%20translate(-50%,%20-50%)%20rotate(300deg)%20translateY(-160px);
%20%20%20%20}

%20%20%20%20.eleven-scale%20{
%20%20%20%20%20%20transform:%20translate(-50%,%20-50%)%20rotate(330deg)%20translateY(-160px);
%20%20%20%20}

%20%20%20%20.pointer%20{
%20%20%20%20%20%20position:%20absolute;
%20%20%20%20%20%20top:%2050%;
%20%20%20%20%20%20left:%2050%;
%20%20%20%20%20%20/*%20关键：控制指针旋转轴点*/
%20%20%20%20%20%20transform-origin:%2050%%20100%%200;
%20%20%20%20}

%20%20%20%20.hour-pointer%20{
%20%20%20%20%20%20width:%2010px;
%20%20%20%20%20%20height:%2080px;
%20%20%20%20%20%20background-color:%20#2a7ede;
%20%20%20%20%20%20transform:%20translate(-50%,%20-100%)%20rotate(0deg);
%20%20%20%20%20%20border-radius:%203px;
%20%20%20%20}

%20%20%20%20.minute-pointer%20{
%20%20%20%20%20%20width:%206px;
%20%20%20%20%20%20height:%20105px;
%20%20%20%20%20%20background-color:%20#62b5fc;
%20%20%20%20%20%20transform:%20translate(-50%,%20-100%)%20rotate(0deg);
%20%20%20%20%20%20border-radius:%203px;
%20%20%20%20%20%20transition:%20transform%20500ms%20ease-in;
%20%20%20%20}

%20%20%20%20.second-pointer%20{
%20%20%20%20%20%20width:%203px;
%20%20%20%20%20%20height:%20130px;
%20%20%20%20%20%20background-color:%20#ee6629;
%20%20%20%20%20%20transform:%20translate(-50%,%20-100%)%20rotate(0deg);
%20%20%20%20}

这部分比较多，但是结合类名去看css属性就很容易明白了，这里也不做过多解释

唯一需要提及的就是%20transform-origin:%2050%%20100%%200%20属性值，这个属性是用来设置元素的旋转轴心的，有三个值，第一个是轴心点的x坐标，第二个是轴心点的y坐标，第三个是轴心点的z坐标，默认是%2050%%2050%%200（中心位置），所以我这里的设置是把轴心点设置为了底部中间位置。

3.%20js部分 
(function(){
%20%20%20%20//%20时针对象
%20%20%20%20const%20hourPointer%20=%20{
%20%20%20%20%20%20dom:%20document.querySelector('.hour-pointer'),
%20%20%20%20%20%20setPosition:%20function%20(currentMinute)%20{
%20%20%20%20%20%20%20%20const%20newHour%20=%20new%20Date().getHours()
%20%20%20%20%20%20%20%20//%20时针会随着当前的分钟数偏移
%20%20%20%20%20%20%20%20const%20deg=(360%20*%20newHour%20/%2012)+(30*currentMinute/60)
%20%20%20%20%20%20%20%20this.dom.style.transform%20=%20`translate(-50%,%20-100%)%20rotate(${deg}deg)`
%20%20%20%20%20%20}
%20%20%20%20}
%20%20%20%20//%20分针对象
%20%20%20%20const%20minutePointer%20=%20{
%20%20%20%20%20%20dom:%20document.querySelector('.minute-pointer'),
%20%20%20%20%20%20//当前分钟数
%20%20%20%20%20%20currentMinute:%20-1,
%20%20%20%20%20%20setPosition:%20function%20()%20{
%20%20%20%20%20%20%20%20const%20newMinute%20=%20new%20Date().getMinutes()
%20%20%20%20%20%20%20%20//%20判断当前分钟数是否和新的分钟数相等，如果相等，就不需要偏移
%20%20%20%20%20%20%20%20if(this.currentMinute===newMinute){
%20%20%20%20%20%20%20%20%20%20return
%20%20%20%20%20%20%20%20}
%20%20%20%20%20%20%20%20this.currentMinute%20=%20newMinute
%20%20%20%20%20%20%20%20this.dom.style.transform%20=%20`translate(-50%,%20-100%)%20rotate(${360%20*%20this.currentMinute%20/%2060}deg)`
%20%20%20%20%20%20%20%20//分针每一次偏移，都需要调用时针偏移
%20%20%20%20%20%20%20%20hourPointer.setPosition(newMinute)
%20%20%20%20%20%20}
%20%20%20%20}
%20%20%20%20//%20秒针对象
%20%20%20%20const%20secordPointer%20=%20{
%20%20%20%20%20%20dom:%20document.querySelector('.second-pointer'),
%20%20%20%20%20%20//当前秒数
%20%20%20%20%20%20currentSecords:%20-1,
%20%20%20%20%20%20setPosition:%20function%20()%20{
%20%20%20%20%20%20%20%20const%20newSecords%20=%20new%20Date().getSeconds()
%20%20%20%20%20%20%20%20//%20判断是否为新的一秒，不是则return
%20%20%20%20%20%20%20%20if(this.currentSecords%20===%20newSecords)%20{
%20%20%20%20%20%20%20%20%20%20return
%20%20%20%20%20%20%20%20}
%20%20%20%20%20%20%20%20this.currentSecords%20=%20newSecords
%20%20%20%20%20%20%20%20this.dom.style.transform%20=%20`translate(-50%,%20-100%)%20rotate(${360%20*%20this.currentSecords%20/%2060}deg)`
%20%20%20%20%20%20%20%20//%20秒针每次偏移都会调用一下分针的偏移
%20%20%20%20%20%20%20%20minutePointer.setPosition()
%20%20%20%20%20%20},
%20%20%20%20%20%20start:%20function%20()%20{
%20%20%20%20%20%20%20%20//%20启动时立即调用一次，设置其位置
%20%20%20%20%20%20%20%20this.setPosition()
%20%20%20%20%20%20%20%20setInterval(()%20=>%20{
%20%20%20%20%20%20%20%20%20%20this.setPosition()
%20%20%20%20%20%20%20%20},%20250)
%20%20%20%20%20%20%20%20//%20这里使用250ms的间隔时间是为了提高时钟的显示效果。
%20%20%20%20%20%20}
%20%20%20%20}
%20%20%20%20//%20开启秒针转动
%20%20%20%20secordPointer.start()
%20%20})()

 4.%20效果展示

使用JS+CSS3实现一个时钟​

 一个漂亮的时钟就制作出来啦。

​

本网站是一个以CSS、JavaScript、Vue、HTML为核心的前端开发技术网站。我们致力于为广大前端开发者提供专业、全面、实用的前端开发知识和技术支持。 在本网站中，您可以学习到最新的前端开发技术，了解前端开发的最新趋势和最佳实践。我们提供丰富的教程和案例，让您可以快速掌握前端开发的核心技术和流程。 本网站还提供一系列实用的工具和插件，帮助您更加高效地进行前端开发工作。我们提供的工具和插件都经过精心设计和优化，可以帮助您节省时间和精力，提升开发效率。 除此之外，本网站还拥有一个活跃的社区，您可以在社区中与其他前端开发者交流技术、分享经验、解决问题。我们相信，社区的力量可以帮助您更好地成长和进步。 在本网站中，您可以找到您需要的一切前端开发资源，让您成为一名更加优秀的前端开发者。欢迎您加入我们的大家庭，一起探索前端开发的无限可能!

本文是由"秘密武器开发者中心"本站原创整理，所有内容的版权归原作者所有。

相关专题