【白嫖】JS实战轻松玩转demo——时钟（随意更换背景）💥

阳阳羊
146 阅读6分钟

QQ录屏20231107185520_-original-original.gif

前言

本文章将介绍我一个小白，实现从零到一的全部过程，现在，我将这个时钟小demo分享给大家！首先我们要创建HTML、CSS和JavaScript三个文件，用HTML文件设计时钟框架，CSS文件定义样式，这个时钟会显示当前实时的时间，并且时钟的指针会实时移动，指示当前的时、分、秒，这就要通过JS文件来实现。接下来，让我们开始设计这个时钟吧！

1. HTML结构

首先，我们需要一个HTML文件来定义时钟的结构。创建一个index.html文件，并添加以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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>
  • <div class="clock">: 这个div元素代表整个时钟的容器，包含了外部时钟面板的样式。
  • <div class="outer-clock-face">: 这个div元素代表外部时钟面板的容器。它包含了时钟的标记和指针。
  • <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元素代表外部时钟面板上的标记。它们分别位于时钟的12点、3点、6点和9点位置。
  • <div class="inner-clock-face">: 这个div元素代表内部时钟面板的容器。它包含了时、分、秒指针。
  • <div class="hand hour-hand"></div>, <div class="hand min-hand"></div>, <div class="hand second-hand"></div>: 这些div元素代表时钟的指针。它们分别表示时针、分针和秒针。
  • <script src="./index.js"></script> 引入一个JavaScript文件 index.js。

2. CSS样式

接下来，我们使用CSS来样式化时钟的外观。在同一目录下创建一个styles.css文件，并添加以下代码：

html{
    background: #fff;
    font-size: 10px;/*字体最小就是10px*/
}
body{
    margin: 0;
    font-size: 2rem;   /*html是根标签，rem相对于html的px，因此2rem是20px*/
    display: flex;  /*弹性容器，里面的属性很多*/
    justify-content: center;
    align-items: center;
    height: 100vh;/*view height 浏览器的高度*/
}
.clock{
    width: 30rem;
    height: 30rem;
    border: 7px solid #9bc5d8;
    border-radius: 50%;/*>50都是圆形*/   /*原点在左上角，x右正，y下正 阴影扩散范围 阴影颜色*/
    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);
    background-image: url('./p.jpg');//更换图片
    background-size: 111%;
    padding: 2rem;/*内边距*/
}
.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: #084365;
    position: absolute;
    border-radius: 8px;
    left: 50%;
    margin-left: -5px;
}
.outer-clock-face::after{
    transform: rotate(90deg);
    transform-origin: center center;
}
.marking{
    width: 3px;
    height: 100%;
    background: rgb(6, 89, 134);
    position: absolute;
    left: 50%;
    margin-left: -1.5px;
}
.marking-one{
    transform: rotateZ(30deg);
    transform-origin: center center;
}
.marking-two{
    transform: rotateZ(60deg);
    transform-origin: center center;
}
.marking-three{
    transform: rotateZ(120deg);
    transform-origin: center center;
}
.marking-four{
    transform: rotateZ(150deg);
    transform-origin: center center;
}
.inner-clock-face{
    position: absolute;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
    background-color: bisque;
    z-index: 2;/*层级提高*/
    border-radius: 50%;
    background-image: url('./p.jpg');//更换图片
    background-size: 125%;
}
.inner-clock-face::before{
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: black;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 2;
}
.hand{
    width: 50%;
    height: 6px;
    background: rgb(1, 57, 85);
    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;
    background: rgb(53, 53, 49);
}
.second-hand{
    background: rgb(52, 46, 46);
    width: 45%;
    height: 2px;
}
  • html 元素的背景颜色设置为白色，字体大小最小为10px。
  • body 元素的字体大小设置为2rem，相当于20px，使得整个时钟在不同设备上具有良好的可读性。
  • body 使用弹性布局，使时钟在页面中水平和垂直方向上居中显示。
  • 页面的高度设置为100vh，确保时钟始终占据浏览器视窗的整个高度。
  • .clock 类定义了时钟的基本样式，包括宽度、高度、边框、圆角、阴影和背景图。时钟采用圆形的外观，并且有内外两层阴影效果。用户可以改变background-image属性更换时钟外层图片。
  • .outer-clock-face 类定义了外部时钟面板的样式。它是一个圆形容器，内部包含了时钟的标记和指针。
  • .marking 类定义了外部时钟面板上的标记样式，包括宽度、高度、背景颜色和位置。
  • .marking-one, .marking-two, .marking-three, .marking-four 类分别定义了四个标记的旋转角度，使它们分别位于时钟的12点、3点、6点和9点位置。
  • .inner-clock-face 类定义了内部时钟面板的样式，包括位置、宽度、高度、背景颜色和层级，在background-image属性中，我们可以根据自己需要更换时钟内层图片。
  • .inner-clock-face::before 伪元素创建了内部时钟面板的中心圆点，用于标识时钟的中心位置。
  • .hand 类定义了时钟指针的共有样式，包括宽度、高度、背景颜色、边框半径和初始旋转角度。
  • .hour-hand, .min-hand, .second-hand 类分别定义了时、分、秒指针的特定样式。它们的宽度、高度和背景颜色不同，代表时钟的不同指针。
  • 这些样式的复杂性来自于它们的组合和相互作用，通过CSS属性的调整，实现了时钟外观的精细设计。

3. JavaScript逻辑

最后，我们使用JavaScript来实现时钟的动态效果。在同一目录下创建一个script.js文件，并添加以下代码：

const secondHand = document.querySelector('.second-hand')
const minHand = document.querySelector('.min-hand')
const hourHand = document.querySelector('.hour-hand')
// console.log(secondHand);

function setTime(){
    const now = new Date()
    //获取当前的秒数
    const seconds = now.getSeconds()
    const secondsDegrees = seconds * 6 + 90//从90°开始旋转
    secondHand.style.transform = `rotate(${secondsDegrees}deg)`
    //获取当前的分钟
    const minutes = now.getMinutes()
    const minutesDegrees = minutes * 6 + 90
    minHand.style.transform = `rotate(${minutesDegrees}deg)`
    //获取当前的时针
    const hour = now.getHours()
    const hoursDegrees = hour *30 + 90 + (minutes/60)*30
    hourHand.style.transform = `rotate(${hoursDegrees}deg)`
}

setTime()

setInterval(setTime, 1000)
  • const secondHand = document.querySelector('.second-hand'), const minHand = document.querySelector('.min-hand'), const hourHand = document.querySelector('.hour-hand'): 这三行代码分别获取了HTML中对应类名('.second-hand'、'.min-hand'、'.hour-hand')的元素，代表时钟的秒针、分针和时针。
  • function setTime() { ... }: 这是一个名为setTime的函数，用于获取当前时间，并将旋转角度应用到时钟的指针上，实现时钟的动态效果。
  • const now = new Date(): 这行代码创建了一个新的Date对象，表示当前的时间。
  • const seconds = now.getSeconds(): 这行代码获取了当前的秒数。
  • const secondsDegrees = seconds * 6 + 90: 这行代码将秒数转换为旋转角度。每秒钟的角度为6度（360度/60秒），并且初始时钟位置是垂直向上的（90度），所以需要加上90度，确保秒针从12点方向开始旋转。
  • secondHand.style.transform = rotate(${secondsDegrees}deg): 这行代码将计算得到的秒针旋转角度应用到.second-hand元素的CSS样式中，实现秒针的动态旋转效果。
  • 同样的逻辑被用于分针和时针：const minutes = now.getMinutes()， const minutesDegrees = minutes * 6 + 90， minHand.style.transform = rotate(${minutesDegrees}deg); ， const hour = now.getHours()， const hoursDegrees = hour * 30 + 90 + (minutes / 60) * 30， hourHand.style.transform = rotate(${hoursDegrees}deg)。分针每分钟旋转6度，时针每小时旋转30度，并且根据当前的分钟数调整时针的角度。
  • setTime(): 这行代码调用setTime函数，确保页面加载时时钟的指针立即处于正确的位置。
  • setInterval(setTime, 1000): 这行代码使用setInterval函数，每隔1秒（1000毫秒）调用一次setTime函数，实现时钟的持续更新和动态效果。

效果展示

QQ录屏20231107185520_-original-original.gif

最后

恭喜你看到最后，现在你已经学会了如何实现时钟demo，快动手试试吧！看看你的效果跟我是一样的吗？我将全部代码贴在最后啦！

我的Gitee：    CodeSpace (gitee.com)

技术小白记录学习过程，有错误或不解的地方还请评论区留言，如果这篇文章对你有所帮助请 “点赞 收藏+关注” ，感谢支持！！

avatar
文章
阅读
粉丝