个性化时钟打造

小旺车
804 阅读6分钟

引言

在这个充满创意和DIY风潮的时代，有没有想过打造属于自己独特风格的时钟呢？在这篇博客文章中，我将向大家介绍如何亲手打造属于自己的时钟。我们将分别从HTML、CSS和JavaScript三个部分展开讨论，让你在制作时钟的过程中更加游刃有余，充满乐趣。

成品展示：

基础知识

本篇需要涉及CSS的position定位相关知识，如果你对这部分内容不熟悉的话，建议先查看我之前写的文章 布局大师的秘籍：玩转CSS定位，创造惊艳的页面布局效果！ - 掘金 (juejin.cn)。这将帮助您更好地理解本篇博客文章涉及到的CSS定位的内容，使您能更顺利地理解并运用这些知识。

HTML部分

首先，让我们来看看HTML部分。在DIY时钟中，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>

CSS部分

接下来，让我们来谈谈CSS部分。通过CSS，我们可以为时钟添加样式，使其看起来更加美观和独特。你可以选择不同的颜色、背景和布局来个性化你的时钟，让整个时钟更具时尚感和活力。记得保持样式的一致性，让时钟看起来更加专业和精致。

1. 设置时钟边框

.clock {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    /*绘制圆形表盘  >=50都为圆*/
    border: 8px solid rgb(255, 165, 0, 0.5);
    padding: 20px;
    /*利用内边距 控制刻度线与边框之间的间距*/
    margin: 0 auto;
}

该部分用来设置时钟边框，你可以根据自己的喜好更改边框的颜色，粗细以及样式等。

2. 设置外表盘

.outer-clock-face {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    /*内边距 便于刻度线定位*/
}

该部分用来设置外表盘，当然你也可以在这部分使用background-image: url();来添加背景图片。

3. 设置两根粗刻度线

对于大多数时钟而言，指向12、3、6、9的刻度总是会比其它刻度稍微粗一点，所以我们将它们分开书写，并且使用伪元素来减少HTML部分的代码书写。

/*利用伪元素  绘制两根粗一点的刻度线*/
.outer-clock-face::before,
.outer-clock-face::after {
    /* 伪元素必须属性 设置为空即可*/
    content: '';
    width: 8px;   /*刻度线宽*/
    height: 100%;   /*刻度线长与父元素一致*/
    background-color: rgb(0, 0, 0);   /*刻度线颜色*/
    display: block;   /*更改为块级元素，使其独占一行，防止之后内表盘的影响。*/
    border-radius: 8px;   /*添加一点弧度，提升美观*/
    position: absolute;
    left: 50%; 
    margin-left: -4px;
}

.outer-clock-face::after {
    transform-origin: center center; /*定义旋转的中心点，在这里是中心点*/
    transform: rotateZ(90deg);/*以Z轴旋转90度，使刻度线水平显示*/
}

将刻度线水平居中，利用绝对定位left: 50% 将左边距离父元素的水平位置设为50%，然后通过 margin-left: -4px; 让刻度线左移4px(本身宽度的一半)，实现水平居中的效果。

4. 设置四根细刻度线

.marking {
    width: 3px;
    height: 100%;
    background-color: rgb(0, 0, 0);
    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);
}
  • 减少重复代码的书写，将4根细刻度线抽取出相同的样式marking,来设置设置它们的宽度、高度、背景颜色等属性。
  • 使用绝对定位将它们放置在合适的位置上（此时位置重叠）。
  • 使用各自的类分别用于不同角度的旋转，来达到精准定位的目的。

5. 设置内表盘

.inner-clock-face {
    width: 80%;
    height: 80%;
    border-radius: 50%;
    background-image: url('./bg.jpg');
    background-color: #fff;
    background-size: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}
  • position: absolute; 将内部表盘固定在其最近的已定位祖先元素中，实现绝对定位。
  • left: 50%; top: 50%; 将内部表盘水平和垂直居中。
  • transform: translate(-50%, -50%); 进一步确保内部表盘完全居中。
  • z-index 属性控制元素的堆叠顺序。在这里，将内部表盘提升到比外部表盘更高的堆叠层级。

6. 设置时、分、秒三个指针

.hand {
    width: 50%;
    height: 6px;
    background-color: 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: 50%;
    height: 2px;
    background-color: #b3b3b3;
}

  1. .hand 类：

    • 描述指针的共同样式，包括宽度、高度、背景色等。
    • position: absolute; 用于将指针绝对定位到其容器中。
    • top: 50%; right: 50%; 将指针定位在其容器的水平中心和垂直顶部。
    • transform: translateY(-50%) rotateZ(90deg); 通过指定Y轴位移和旋转将指针垂直居中并使其指向12点位置。
    • transform-origin: 100% center; 定义旋转的中心点在指针的底部中心。

  2. .hour-hand、.min-hand、.second-hand 类：

    • 分别描述时针、分针和秒针的样式，时针比例较大，分针稍小，秒针更细。

JS部分

最后，我们来到JavaScript部分。JavaScript将赋予我们时钟功能，让它真正实现显示时间的功能。通过获取当前时间并动态更新指针的位置，让时钟能够不断显示最新时间。

var secondHand = document.querySelector('.second-hand')
var minHand = document.querySelector('.min-hand')
var hourHand = document.querySelector('.hour-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 minssDegress = (mins * 60 + seconds) / 10 + 90; //计算移动角度
    minHand.style.transform = `rotate(${minssDegress}deg)`; //旋转

    var hours = now.getHours();//获取当前时
    var hoursDegress = (hours % 12 * 3600 + mins * 60 + seconds) / 120 + 90; //计算移动角度
    hourHand.style.transform = `rotate(${hoursDegress}deg)`;//旋转


}


setTime();
setInterval(setTime, 1000);

  1. setTime() 函数：

    • 获取当前时间，并根据时间计算各指针的旋转角度。
    • secondsDegress、minssDegress 和 hoursDegress 分别计算秒针、分针和时针的旋转角度，使它们随时间变化。
    • 通过 style.transform 属性将计算后的角度应用到对应的指针元素上，实现指针的旋转效果。

  2. setInterval() 方法：

    • setInterval(setTime, 1000) 每隔1秒调用一次 setTime() 函数，实现指针的动态更新效果，使时钟指针实时移动。

结语

制作DIY时钟不仅可以培养创造力，同时也能让人体验到制作自己作品的乐趣。希望通过本文的分享，大家可以完成一枚独特的时钟作品，并在制作的过程中获得愉悦和满足感。尽情享受DIY的乐趣，展现您的个性和创意！今天的内容就到这里了。如果您觉得这篇文章有帮助或启发了您，别忘了给我一个鼓励的赞哦！

avatar
文章
阅读
粉丝