时光流转，背景随心：自定义背景的时钟小demo（附带源码，小白适用）

我真的很困
142 阅读6分钟

引言

时间是我们生活中不可或缺的一部分，而时钟作为时间的象征，一直以来都扮演着重要的角色。如今，随着技术的发展，我们可以通过各种设备和应用程序来查看时间。但是，为什么不将时钟变得更加个性化和有趣呢？在本文中，我们将探索一个实时时钟小demo，即使是作为一个初学前端的萌新小白，我们也将拥有自定义时钟所有元素的能力。我们将为时间赋予独特的风格和意义。

时钟.png

正文

1.页面元素分析

显示的页面自然是html，这不必多说，但是这里有个小细节，仔细观察会发现图片并不是一张，而是两张相同的照片重合。而时钟的刻度则是完整的线条，只不过是被上面的图片进行了遮挡，从而导致线条的两端只有一小部分露了出来，变成了刻度。上面的图片又有中心黑点和三根指针，分别代表了时针，分针和秒针。搞明白了这些，html页面就好写多了，代码如下：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
    <link rel="stylesheet" href="./style.css"><!-- 引入同目录下的名为style.css的文件 -->
    <!-- 不写./叫绝对路径，会在同一文件夹里找该文件 -->
</head>

<body>
    <div class="clock">
        <div class="outer-clock-face"><!-- 底下的照片 -->
            <div class="marking marking-one"></div><!-- 刻度1 -->
            <div class="marking marking-two"></div><!-- 刻度2 -->
            <div class="marking marking-three"></div><!-- 刻度3 -->
            <div class="marking marking-four"></div><!-- 刻度4 -->


            <div class="innerface-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><!-- 引入同目录下的名为index.js的文件 -->
</body>

</html>

如此一来，整个时钟的框架我们就有了，接下来我们将通过编写css代码从而将整个时钟页面美化完整

html {
    background: white;
    font-size: 10px;
    /* 浏览器最小10像素 */
}


body {
    margin: 0;
    font-size: 2rem;
    /* rem 参考根字体大小 */
    display: flex;
    align-items: center;
    height: 100vh;
    justify-content: center;
}

由于不同浏览器的边框不同，所以为了让不同浏览器用户都能得到相同体验，我们在body的css属性里将margin统一设置为0

.clock {
    width: 30rem;
    height: 30rem;
    border: 7px solid #ffebdb;
    border-radius: 50%;
    /* 超过%50就是圆 */
    box-shadow: -4px -4px 10px rgba(67, 67, 67, 0.1),
        inset 4px 4px 10px rgba(168, 145, 128, 0.6),
        inset -4px -4px 10px rgba(201, 175, 155, 0.2),
        4px 4px 10px rgba(168, 145, 128, 0.6);
    /* x轴偏移量，y轴偏移量，（右下为正）阴影扩散范围，阴影颜色rgb,a:透明度 */
    background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F7a68a2ed-3afb-47fe-a87e-d2a5b4c4db12%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1701852795&t=b6076da5df084c324fc6eb88524ed5e3');
    background-size: 190%;
    padding: 2rem;
}

border-radius: 50%;指的是一个容器的角的弧度，超过50%之后就会显示一个圆形。box-shadow:则是容器的阴影，仔细观察我们就会发现，在上面的图中，时钟的周围有一圈淡淡的阴影，会让整个时钟更逼真，获得更好的视觉效果。其中的参数分别代表：x轴偏移量，y轴偏移量，（右下为正）阴影扩散范围，阴影rgb颜色以及a:透明度。background-image: url后面接的是时钟的背景图片（底层图片），可以自由选择

.outer-clock-face {
    width: 100%;
    height: 100%;
    border-radius: 50%;

    position: relative;
}

.outer-clock-face::before {
    content: '';
    width: 10px;
    height: 100%;
    background: rgb(106, 124, 213);
    ;
    position: absolute;
    border-radius: 8px;
    left: 50%;
    margin-left: -5px;
    /* 左移五像素 */
    /* transform: translate(-50%); */
    /* 左移自身的50% */
}

.outer-clock-face::after {
    content: '';
    width: 10px;
    height: 100%;
    background: rgb(106, 124, 213);
    position: absolute;
    border-radius: 8px;
    left: 50%;
    /* margin-left: -5px; */
    /* 左移五像素 */
    transform: rotate(90deg);
    transform-origin: center center;
    /* 左转自身的50% */
}
/* 伪元素默认不显示 */
  • .outer-clock-face::after：这是一个CSS选择器，表示选择具有outer-clock-face类的元素的伪元素::after。
  • content: ''：这是一个CSS属性，用于设置伪元素的内容为空。
  • width: 10px：这是一个CSS属性，用于设置伪元素的宽度为10像素。
  • height: 100%：这是一个CSS属性，用于设置伪元素的高度为父元素的100%。
  • position: absolute：这是一个CSS属性，用于将伪元素的定位方式设置为绝对定位。
  • transform: rotate(90deg)：这是一个CSS属性，用于将伪元素旋转90度，使其垂直显示。
  • transform-origin: center center：这是一个CSS属性，用于设置旋转变换的原点为伪元素的中心。

这段代码的作用是创建一个垂直的、具有圆角边框的矩形，作为时钟外部表盘的一部分。通过调整代码中的属性值，你可以自定义外部表盘的样式，例如改变宽度、高度、颜色等。

.marking {
    width: 3px;
    height: 100%;
    background: rgb(234, 242, 5);
    position: absolute;
    left: 50%;
    margin-left: 1.5px;
    border-radius: 8px;
    transform-origin: center center;
}

.marking-one {
    transform: rotateZ(30deg);
}

.marking-two {
    transform: rotateZ(60deg);
}

.marking-three {
    transform: rotateZ(120deg);
}

.marking-four {
    transform: rotateZ(150deg);
}

.innerface-clock-face {
    position: absolute;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
    background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F7a68a2ed-3afb-47fe-a87e-d2a5b4c4db12%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1701852795&t=b6076da5df084c324fc6eb88524ed5e3');
    background-size: 180%;
    z-index: 2;
    border-radius: 50%;

}

这里是时钟的表层，有六根线条，其中两根为了凸显十二点，三点，六点和九点，所以设置的宽度更高，颜色也不一样，同时为了不让整体看起来太突兀，建议将表层图片与底层图片设置为一样

.innerface-clock-face::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: black;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.hand {
    width: 50%;
    height: 6px;
    background: red;
    border-radius: 6px;
    position: absolute;
    top: 50%;
    right: 50%;
    margin-top: -3px;
    transform-origin: 100% 50%;
    transform: rotate(90deg);
}

.hour-hand {
    width: 30%;
}

.min-hand {
    width: 40%;
    height: 3px;
}

.second-hand {
    background-color: grey;
    width: 45%;
    height: 2px;
}

这里定义了时钟表层上的中心点，时针，分针和秒针，根据现实世界中钟表的情况，在这里给他们定义了不同的长宽。以上就是所有的css代码，剩下的就是较为简单的js，只需写出三根指针的运动情况即可

const secondHnad = document.querySelector('.second-hand')
const minHnad = document.querySelector('.min-hand')
const hourHnad = document.querySelector('.hour-hand')

先拿到三根指针

function setDate1() {
    const now = new Date()
    const s = now.getSeconds()
    const secondDegress = s * 6 + 90
    secondHnad.style.transform = `rotate(${secondDegress}deg)`

    const m = now.getMinutes()
    const minDegress = m * 6 + 90
    minHnad.style.transform = `rotate(${minDegress}deg)`

    const h = now.getHours()
    const hourDegress = h * 30 + 90 + (m / 60) * 30
    hourHnad.style.transform = `rotate(${hourDegress}deg)`
}
setDate1()
setInterval(setDate1, 1000)

这里利用了时间戳的方式得出当前时间，再进行计算得出三根指针的确切位置，在通过setInterval（）函数使setDate1间隔一秒自动执行一次从而实现指针的自动转动

总结

通过自定义背景的实时时钟小demo，我们可以为时间赋予更多的意义和个性化。无论是在个人使用还是商业应用中，这个小demo都可以为用户带来乐趣和便利。希望本文能够激发你的创造力，尝试开发自己的实时时钟小demo，并为时间增添一份独特的魅力。希望这篇文章能够为你提供一些参考和灵感。

avatar
文章
阅读
粉丝