时间的旋律:用JavaScript打造优雅简洁的数字时钟

小陈要努力呦

已于 2024-06-30 15:45:09 修改

阅读量881

点赞数 14

分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript

于 2024-06-08 22:15:04 首次发布

本文链接：https://blog.csdn.net/weixin_56440777/article/details/139552087

版权

JavaScript 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

前言

在本文中,我将向大家详细介绍如何利用JavaScript的基础语法和API,逐步编写出一个既美观又实用的数字时钟。无论你是初学者还是有一定编程基础,相信都能从中学到不少有趣的东西。让我们一起进入这场时间的旋律吧!

实现

效果展示

实现过程

html

<body>
    <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>
    <script src="./index.js"></script>
</body>

<div class="clock"> : 这是一个最外层的容器,用于包裹整个时钟的结构。
<div class="outer-clock-face"> : 这是时钟的外框架,用于放置时钟的刻度和指针。
<div class="marking marking-one">~<div class="marking marking-four"> : 这四个div元素代表时钟的刻度，另外的两根粗的刻度使用的是伪元素。
<div class="inner-clock-face"> : 这是时钟的内框架,用于放置时钟的时、分、秒指针。
<div class="hand hour-hand">、<div class="hand min-hand">、<div class="hand second-hand"> : 这三个div元素分别代表时针、分针和秒针。

外框架其实是在内框架的下面，将<div class="marking marking-one">~<div class="marking marking-four">中间部分遮挡了就形成了刻度

css

.clock {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: 7px solid #ffebdb;
    background-image: url(./背景.jpeg);
    background-size: 110%;
    padding: 20px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50% , -50%);
}

.outer-clock-face {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    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;
}

.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);
}

.inner-clock-face {
    width: 80%;
    height: 80%;
    border-radius: 50%;
    background-image: url(./背景.jpeg);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    background-size: 110%;
}

.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;
}

比较重要的部分就是

.outer-clock-face {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    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相对定位，.outer-clock-face::before, .outer-clock-face::after相对定位调整刻度的位置

js（重点）

// 获取秒针
var secondHand = document.querySelector('.second-hand')
// 获取时针
var hourHand = document.querySelector('.hour-hand')
//获取分针
var minHand = document.querySelector('.min-hand')

function setTime() {
    var now = new Date();

    // 读取秒
    var seconds = now.getSeconds();
    var secondsDegress = seconds * 6 + 90
    secondHand.style.transform = `rotate(${secondsDegress}deg)`
    // 读取分
    var mins = now.getMinutes();
    var minsDegress = mins * 6 + 90
    minHand.style.transform = `rotate(${minsDegress}deg)`
    //读取时
    var hours = now.getHours();
    console.log(hours);
    var hoursDegress = hours * 30 + 90 + (mins / 60) * 30
    hourHand.style.transform = `rotate(${hoursDegress}deg)`
}

setTime()
// 定时器
setInterval(setTime, 1000)

首先获取当前的时间(new Date()),并从中提取出秒、分和时的值。
然后根据秒、分和时的值计算出相应的旋转角度。
最后通过修改指针元素的 transform 样式属性,实现指针的旋转动画效果。
setInterval(setTime, 1000): 每隔1000毫秒(1秒)执行一次 setTime() 函数,实现时钟的动态更新。

为什么计算秒针旋转度数时是var secondsDegress = seconds * 6 + 90？

由于最开始的指针情况为下图所示

首先需要让指针到0点位置，所以得加90度，由于一秒指针走6度，故为seconds * 6 + 90，分钟和时钟同理

总结

这个使用JavaScript实现的数字时钟具有设计优雅、代码结构清晰、功能实用等特点,是一个非常不错的前端项目实践案例。对于前端新手或者有兴趣学习JavaScript的同学来说,这是一个很好的入门练习项目，大家可以拿来练练手咯

完整代码

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <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>
    <script src="./index.js"></script>
</body>

</html>