在本文中，我们将学习如何使用 HTML、CSS 和 JavaScript 制作一个动态时钟。我们将通过定位布局和伪元素的应用来创建时钟的外观，然后使用 JavaScript 实现时钟指针的动态效果。

时钟样式：

静态样式为：

屏幕截图 2024-05-20 171937.png

必备知识

定位布局

在CSS中，定位布局是指如何精确地放置元素在网页上的技术。这里有三个常用的定位属性：

position: absolute; 绝对定位：元素会相对于最近的已定位祖先元素进行定位，如果没有已定位的祖先元素，它会相对于文档的初始位置（通常为body）进行定位。
position: relative; 相对定位：元素会相对于其自身在文档流中的位置进行定位，可以作为其他元素的参考点。
position: fixed; 固定定位：元素会相对于浏览器窗口进行定位，即无论用户如何滚动页面，该元素都会保持在屏幕的固定位置。

伪元素

CSS中的一种特殊选择器，允许开发者在元素的内容前面或后面插入生成的内容。它们不是文档中实际存在的HTML元素，而是通过CSS样式来创建的虚拟元素。

::before伪元素用于在元素的内容前面插入生成的内容。 ::after伪元素用于在元素的内容后面插入生成的内容。

元素添加

html部分代码为

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

css代码为：

    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: 7px solid #75c2eb;
    background-color: #073b73;
    background-size: 100%;
    padding: 20px;
}

.outer-clock-face {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    position: relative;
}

.outer-clock-face::before,
.outer-clock-face::after {
    content: '';
    width: 10px;
    height: 100%;
    background: #f7f30b;
    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: #e793a5;
    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: 90%;
    height: 90%;
    border-radius: 50%;
    background-color: #e5d5c7;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    background-image: url('./hp.jpg');
    background-size: 100%;
}

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

这段CSS样式表定义了时钟的外观和布局。布局介绍：

.clock: 这个类定义了时钟的整体样式，包括宽度、高度、圆角（超过50%也可以）、边框、背景颜色等。

圆角为40%时：

屏幕截图 2024-05-20 170025.png

圆角为90%时：

屏幕截图 2024-05-20 170049.png

.outer-clock-face: 这个类定义了外部时钟表盘的样式，包括宽度、高度、圆角等，并使用了伪元素::before和::after来创建时钟表盘的装饰性元素。
.marking: 这个类定义了时钟表盘上的刻度样式，包括宽度、高度、背景颜色等，并使用了绝对定位来放置在时钟表盘上。
.marking-one, .marking-two, .marking-three, .marking-four: 这些类定义了不同角度的刻度样式，通过旋转来放置在时钟表盘上。
.inner-clock-face: 这个类定义了内部时钟表盘的样式，包括宽度、高度、圆角、背景颜色等，并设置了背景图片。
.hand: 这个类定义了时钟的指针样式，包括宽度、高度、背景颜色等，并使用了绝对定位来放置在时钟表盘上。
.hour-hand, .min-hand, .second-hand: 这些类分别定义了时钟的时针、分针和秒针的样式，包括宽度、高度、背景颜色等。

功能实现

最后指针转动功能的实现：

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 / 60) * 360 + 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)

JS代码是一个简单的时钟功能实现，通过获取当前时间并根据时、分、秒的数值计算旋转角度，然后将这些角度应用到对应的时钟指针上，实现时钟的动态效果。具体思路如下：

通过document.querySelector方法获取了秒针(.second-hand)、时针(.hour-hand)和分针(.min-hand)的DOM元素。
定义了一个名为setTime的函数，用于更新时钟的指针位置。在函数内部：
- 获取当前时间now。
- 计算秒针的旋转角度secondsDegress，分针的旋转角度minsDegress，时针的旋转角度hoursDegress。
- 将计算得到的角度值应用到对应的时钟指针元素的transform属性上，实现指针的旋转效果。
调用setTime函数一次，以确保页面加载时时钟指针的位置正确。
使用setInterval方法每隔1秒（1000毫秒）调用一次setTime函数，实现时钟的实时更新效果。

总结

通过本文，我们学习了如何使用 HTML、CSS 和 JavaScript 制作一个动态时钟。我们探讨了定位布局、伪元素的应用以及时钟指针的动态效果实现。希望这个教程能帮助您更好地理解前端开发中的布局和动态效果实现。

如果您认为本文有帮助，请随时留言。谢谢阅读！

html+css+js时钟与定位布局笔记

必备知识

定位布局

伪元素

元素添加

功能实现

总结