likes
comments
collection
share

用HTML设计一个时钟（将前端基础发挥到极致）

作者站长头像
站长
· 阅读数 28

前言

DIY一个属于自己的时钟，难度并不高，但其中还是有许多要注意的细节，比如每根针的布局以及它们的振幅，其中背景图的摆放在此文中也有独特的想法，这是一个集前端技术于一身的练习项目。话不多说，开始我们的造钟之旅。

布局

首先，讲刻度是怎么实现的，最好的方法就是将六条线按位置摆好，再将一张更小的图盖在中间即可，这样我们就拥有了十二个刻度。然后再摆放三个指针在中间，一边必须绕着中心。这就是我们的基本思路，以下是代码实现：

<!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>

样式

使用Flexbox，通过{display: flex; justify-content: center; align-items: center;}实现时钟中心点的完美居中。这种方法简洁高效，兼容性好，是现代Web布局的首选，以下是代码实现：

*{
    margin: 0;
    padding: 0;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.clock{
    width: 300px;
    height: 300px;
    border: 7px solid #ffebdb;
    border-radius: 50%;
    background-image: url(一颗苹果OMG.jpg);
    background-size: 100%;
    padding: 20px;
    background-position: center;
}
.outer-clock-face{
    width: 100%;
    height: 100%;
    border-radius: 100%;
    position: relative;
}
.marking{
    width: 3px;
    height: 100%;
    background-color: #2aee5b;
    position: absolute;
    left:50%;
    margin-left: -1.5px;
    border-radius: 30px;
    transform-origin: 50% 50%;
}
.marking-one{
    transform:rotate(30deg);
}
.marking-two{
    transform:rotate(60deg);
}
.marking-three{
    transform:rotate(120deg);
}
.marking-four{
    transform:rotate(150deg);
}
.outer-clock-face::before,
.outer-clock-face::after{
    content:'';
    width: 10px;
    height: 100%;
    background-color: #2aee5b;
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -5px;
    border-radius: 8px;
}
.outer-clock-face::after{
    transform: rotate(90deg);
}
.inner-clock-face{
    width: 80%;
    height: 80%;
    border-radius: 100%;
    /* background-color:#ffebdb ; */
    background-image: url(一颗苹果OMG.jpg);
    position: absolute;
    z-index: 1;
    left: 50%;
    top:50%;
    transform: translate(-50%,-50%);
    background-size: 140%;
    background-position: center;
}
.hand{
    width: 50%;
    height: 6px;
    position: absolute;
    top:50%;
    right:50%;
    border-radius: 6px;
    margin-top: -3px;
    transform: rotate(90deg);
    transform-origin: 100% 50%;
}
.second-hand{
    width: 45%;
    height: 2px;
    margin-top: -1px;
    background-color: #eafa08;
}
.min-hand{
    width: 35%;
    height: 4px;
    margin-top:-2px;
    background-color: #eafa08;
}
.hour-hand{
    width: 25%;
    height: 6px;
    margin-top:-3px;
    background-color: #eafa08;
}

交互

只需要拿到当前时间，然后再对相应的时、分、秒做计算。这里有个细节，我们需要提前将它们都顺时针转90°，因为在一开始它们都是横着摆放的。以下是实现代码：

var secondHand = document.querySelector('.second-hand')
var minHand = document.querySelector('.min-hand')
var hourHand = document.querySelector('.hour-hand')

function setDate(){
    //拿到当前时间
    var now=new Date()

    //读秒
    var seconds=now.getSeconds()
    //计算旋转角度
    var secondsDeg=((seconds/60)*360)+90
    //设置秒针角度
    secondHand.style.transform=`rotate(${secondsDeg}deg)`

    //读分
    var mins=now.getMinutes()
    var minutesDeg=((mins/60)*360)+90+(seconds/3600)*360
    minHand.style.transform=`rotate(${minutesDeg}deg)`

    //读时
    var hours=now.getHours()
    var hoursDeg=((hours/12)*360)+90+(seconds/43200)*360+(mins/720)*360
    hourHand.style.transform=`rotate(${hoursDeg}deg)`
}


setInterval(setDate,1000);

实现效果

用HTML设计一个时钟（将前端基础发挥到极致） 这样就完成了一个每时每刻都在运作的时钟，感兴趣的小伙伴可以再给秒针加一些音效，让它更加逼真。

结语

这次时钟的设计，包含了css关于居中和角度偏转的知识、也有js方面的时间怎么获取以及时间如何计算最后返回相应的值，都值得新手去走一遍，可以学习到CSS布局、动画与JavaScript时间处理的基础，还能深入理解如何将两者结合以实现动态效果，同时也锻炼了解决实际问题的能力。是大佬也没关系，其中有许多细节是大佬容易疏忽的，这也是一个复习基础的好机会。

转载自:https://juejin.cn/post/7371295699269222463
评论
请登录