圆盘时钟效果 原生JS

时间：2023-03-09 15:22:00
圆盘时钟效果 原生JS

圆盘时钟 旋转时钟 数字时钟

写在前面

仿荣耀手机时钟，设计的同款时钟效果

实现效果

圆盘时钟效果 原生JS

实现原理

数字时钟

  1. 利用Date内置对象获取当下的时间，通过处理呈现在页面上

这一步获取时间是非常简单的，通过Date下的一些属性就可以实现了

  1. 背景采用的是一个炫彩流光的效果，利用了CSS3新增的动画效果

这部分的炫彩流光效果在之前的博客中有详细讲到

炫彩流光效果

指针时钟

  1. 通过定位将三根针重叠在一起，下端对齐都摆在原点，通过transfrom-origin属性，将旋转原点定为底部，也就是，让三根针转的时候绕中心点转

  2. 在获取到时间的基础上，将时间转化为旋转的角度，每一个小时时针转30度，每分钟分钟转6度，每秒钟秒针转6度

这里有一点点的计算，需要理解一下

  1. 为了让分针和时针是缓慢移动的，而不是突然间的抖动，让秒针转的时候，实时反馈给分针，分针转的时候反馈给时针
'rotate(' + (rotateH + (rotateM / 60)) + 'deg' + ')'

就像这样把分针旋转了多少反馈给时针，60分钟一个小时，所以是除以60

旋转时钟

  1. 这里采用的是clip-path属性采取另一半的圆，圆环的效果采用的是大小圆的思路，用小圆盖在大半圆的上方
  2. 圆环的旋转和指针的旋转异曲同工，圆环是反馈秒钟的，只需根据秒钟来判断即可
  3. 为了让圆能够自转，需要将旋转原点设置为圆的中心点

实现代码

HTML结构

<!-- 转盘时钟 -->

<div class="clocker">

    <span class="long"></span>

    <span class="short"></span>

    <span class="mini"></span>

    <i class="twelve">12</i>

    <i class="three">3</i>

    <i class="six">6</i>

    <i class="nine">9</i>

    <div class="round"></div>

</div>

<!-- 旋转时钟 -->

<div class="rot">

    <div class="timing"></div>

    <div class="outer"></div>

    <div class="inner"></div>

</div>

<!-- 显示日期 -->

<div class="date">

    <p>中国标准时间</p>

    <div class="now"></div>

</div>

<!-- 数字时钟 -->

<div class = "clock">

    <span class ="hour"></span>

    <span class ="minute"></span>

    <span class ="second"></span>

</div>

CSS部分

* {

    margin: 0;

    padding: 0;

}

body {

    background-color: black;

}

@keyframes move {

    0% {

        background-position: 0%;

    }

    100% {

        background-position: 100%;

    }

}

/* 数字炫彩时钟 */

.clock {

    display: flex;

    position: relative;

    width: 400px;

    height: 100px;

    margin: 20px auto;

    background: linear-gradient(90deg,rgb(39,122,218),rgb(74,230,121),rgb(201,214,13),rgb(226,20,233),rgb(16,172,219));

    background-size: 400%;

    border-radius: 10px;

    justify-content: center;

    align-items: center;

    animation: move 3s linear infinite alternate;

}

.clock::before {

    content: '';

    position: absolute;

    top: -5px;

    left: -5px;

    width: 410px;

    height: 110px;

    background: linear-gradient(90deg,rgb(39,122,218),rgb(74,230,121),rgb(201,214,13),rgb(226,20,233),rgb(16,172,219));

    background-size: 400%;

    opacity: 1;

    border-radius: 10px;

    transition: all .6s;

    z-index: -1;

    filter: blur(10px);

    animation: move 3s linear infinite alternate;

}

.clock span {

    color: white;

    font-size: 50px;

    margin: 0px 30px;

    text-shadow: 0px 0px 12px white;

}

/* 日期样式 */

.date {

    width: 300px;

    height: 100px;

    margin: 0 auto;

}

p {

    text-align: center;

    letter-spacing: 4px;

    color: white;

    font-size: 34px;

}

.date .now {

    color: white;

    font-size: 20px;

    margin-top: 10px;

    letter-spacing: 3px;

    text-align: center;

}

/* 表盘 */

.clocker {

    /* display: none; */

    position: relative;

    width: 400px;

    height: 400px;

    border-radius: 50%;

    margin: 50px auto;

    background-color: rgb(179, 179, 179);

}

.clocker span {

    display: inline-block;

    position: absolute;

    left: 50%;

    transform-origin: bottom;

}

/* 三根针 */

.long {

    top: 30px;

    width: 4px;

    height: 170px;

    background: linear-gradient(rgb(39,122,218),rgb(226,20,233),pink);

    background-size: 400%;

    transform: translate(-2px,0);

}

.short {

    position: relative;

    top: 60px;

    width: 8px;

    height: 140px;

    border-radius: 4px;

    background-color: black;

    transform: translate(-4px,0);

}

.short::before {

    position: absolute;

    bottom: 0;

    left: 3px;

    content: '';

    width: 2px;

    height: 60px;

    background-color: white;

    border-radius: 1px;

}

.mini {

    position: relative;

    top: 100px;

    width: 10px;

    height: 100px;

    border-radius: 5px ;

    background-color: black;

    transform: translate(-3px,0);

}

.mini::before {

    position: absolute;

    bottom: 0;

    left: 4px;

    content: '';

    width: 2px;

    height: 40px;

    background-color: white;

    border-radius: 1px;

}

/* 中间的小圆圈 */

.round {

    position: absolute;

    width: 20px;

    height: 20px;

    border: px solid black;

    /* background-color: white; */

    background: linear-gradient(rgb(39,122,218),rgb(226,20,233),pink);

    border-radius: 50%;

    top: 50%;

    left: 50%;

    box-sizing: border-box;

    transform: translate(-8px,-10px);

}

/* 表盘数字的样式 */

i {

    font-style: normal;

    font-size: 24px;

    color: white;

}

.twelve {

    position: absolute;

    top: 0;

    left: 50%;

    transform: translate(-10px,0);

}

.three {

    position: absolute;

    top: 50%;

    right: 5px;

    transform: translate(0px,-10px);

}

.six {

    position: absolute;

    bottom: 10px;

    left: 50%;

    transform: translate(-10px,0);

}

.nine {

    position: absolute;

    top: 50%;

    left: 5px;

    transform: translate(0px,-10px);

}

/* 旋转时钟 */

.rot {

    display: none;

    position: relative;

    width: 400px;

    height: 400px;

    border-radius: 50%;

    margin: 50px auto;

    background-color: rgb(41, 41, 41);

}

.timing {

    position: absolute;

    width: 260px;

    height: 260px;

    text-align: center;

    line-height: 260px;

    top: 50%;

    left: 50%;

    letter-spacing: 2px;

    transform: translate(-50%,-50%);

    font-size: 65px;

    color: black;

    z-index: 2;

}

.inner {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%,-50%);

    width: 260px;

    height: 260px;

    border-radius: 50%;

    background-color: rgb(243, 236, 236);

}

.outer {

    position: absolute;

    width: 400px;

    height: 400px;

    box-sizing: border-box;

    border-radius: 50%;

    background: linear-gradient(rgb(39,122,218),rgb(226,20,233),rgb(41, 41, 41));

    clip-path: inset( 0 50% 0 0 );

    transform-origin: center center;

}

JS代码

<script>

    /* 前面数字的三个span */

    var hour = document.querySelector('.hour');

    var minute = document.querySelector('.minute');

    var second = document.querySelector('.second');

    /* 获取圆盘的三根针 */

    var hourNeedle = document.querySelector('.mini');

    var minuteNeedle = document.querySelector('.short');

    var secondNeedle = document.querySelector('.long');

    /* 获取显示日期的div */

    var date = document.querySelector('.now');

    /* 旋转时钟 */

    var timing = document.querySelector('.timing');

    var outer = document.querySelector('.outer');

    /* 获取三个时钟 */

    var clocker = document.querySelector('.clocker');

    var rot = document.querySelector('.rot');

    console.log(clocker);

    /* 先来个立即执行函数让时间在页面打开时就显示 */

    (function times() {

        var time = new Date();

        var year = time.getFullYear();

        var month = time.getMonth();

        var dates = time.getDate();

        var day = time.getDay();

        var h = time.getHours();

        var days = ['星期天','星期一','星期二','星期三','星期四','星期五','星期六'];

        var divText = (month + 1) + '月' + dates + '日' + days[day];

        date.innerHTML = divText;

        h = h < 10 ? '0' + h : h;

        var m = time.getMinutes();

        m = m < 10 ? '0' + m : m;

        var s = time.getSeconds();

        s = s < 10 ? '0' + s : s;

        hour.innerHTML = h ;

        minute.innerHTML = m;

        second.innerHTML = s;

        timing.innerHTML = h + ':' + m ;

        var rotateH = h * 30 ;

        var rotateM = m * 6;

        var rotateS = s * 6;

        hourNeedle.style.transform = 'rotate(' + rotateH + rotateM / 60 + 'deg' + ')';

        minuteNeedle.style.transform = 'rotate(' + (rotateM + (rotateS / 60)) + 'deg' + ')';

        secondNeedle.style.transform = 'rotate(' + rotateS + 'deg' + ')';

        outer.style.transform = 'rotate(' + rotateS + 'deg' + ')'

    }())

    /* 因为页面的加载需要一定的时间，所以这里会有一定的误差 */

    window.onload = function () {

    setInterval(timer,1000);

    function timer() {

        var time = new Date();

        var year = time.getFullYear();

        var month = time.getMonth();

        var dates = time.getDate();

        var day = time.getDay();

        var h = time.getHours();

        var days = ['星期天','星期一','星期二','星期三','星期四','星期五','星期六'];

        var divText = (month + 1) + '月' + dates + '日' + days[day];

        date.innerHTML = divText;

        h = h < 10 ? '0' + h : h;

        var m = time.getMinutes();

        m = m < 10 ? '0' + m : m;

        var s = time.getSeconds();

        s = s < 10 ? '0' + s : s;

        hour.innerHTML = h ;

        minute.innerHTML = m;

        second.innerHTML = s;

        timing.innerHTML = h + ':' + m ;

        var rotateH = h * 30 ;

        var rotateM = m * 6;

        var rotateS = s * 6;

        hourNeedle.style.transform = 'rotate(' + (rotateH + (rotateM / 60)) + 'deg' + ')';

        minuteNeedle.style.transform = 'rotate(' + (rotateM + (rotateS / 60)) + 'deg' + ')';

        secondNeedle.style.transform = 'rotate(' + rotateS + 'deg' + ')';

        outer.style.transform = 'rotate(' + rotateS + 'deg' + ')'

    }

    }

    clocker.onclick = function() {

        clocker.style.display = 'none';

        rot.style.display = 'block';

    }

    rot.onclick = function() {

        rot.style.display = 'none';

        clocker.style.display = 'block';

    }

</script>

由于还没有学习canvas，技术水平不足，表盘的效果没有办法实现，圆环的实现，也只是通过了简单的裁剪，想不到实现圆弧的效果

代码有点长，如需完整代码，可以留言或私信

更多CSS特效

文字抖动效果
旋转魔方效果
文字闪烁效果
加载动画效果
炫彩流光按钮
原生js轮播图效果
文字折叠效果

相关文章