前端创意闹钟

最新推荐文章于 2024-08-25 09:57:22 发布

小周同学_丶

最新推荐文章于 2024-08-25 09:57:22 发布

阅读量497

点赞数 7

文章标签：前端

本文链接：https://blog.csdn.net/weixin_69174819/article/details/141379595

版权

简言

作为时间管理大师的我们，长安今天就设计一个闹钟，便于小伙伴们来更好的规划时间。根据前端的布局加上简单的分，时，秒针计算，便可以得出实时闹钟了，请看长安的布局：

这里长安先介绍一下定位布局的概念：

相对定位（Relative Positioning）

相对定位是指元素相对于其正常位置进行定位，但仍然占据原始文档流中的空间。通过设置 position: relative; 属性，元素可以在相对于自身原来的位置上进行移动。

特点：

元素相对于其原始位置移动，但不会影响其他元素的布局。
元素的相对位置是相对于其正常位置计算的，而不是相对于整个页面或父元素。

绝对定位（Absolute Positioning）

绝对定位是指元素相对于其最近的已定位祖先元素进行定位，如果没有已定位的祖先元素，则相对于初始包含块（通常是 <html> 元素）进行定位。通过设置 position: absolute; 属性，元素可以根据父级容器的位置进行定位。

特点：

元素脱离了文档流，不再占据原来的空间，不影响其他元素的布局。
元素的位置是相对于最近的已定位祖先元素的位置计算的，如果没有已定位的祖先元素，则相对于页面的初始包含块。

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

用div标签定义一个clock闹钟，对于 <div class="outer-clock-face">：这是外部时钟表面的容器，用来承载时钟的刻度和指针。

<div class="marking marking-one"></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>：这些是时钟的指针元素，分别表示时针、分针和秒针。

3. 用CSS样式来进行边框的布局

html {
    background: #CCCCFF;
    font-size: 10px;
}

body {
    height: 100vh;
    margin: 0;
    font-size: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.clock {
    width: 30rem;
    height: 30rem;
    border: 7px solid #ffebdb;
    border-radius: 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);
    background-image: url("bg.jpeg");
    background-size: 108%;
    padding: 2rem;
}

.outer-clock-face {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.outer-clock-face::before,
.outer-clock-face::after {
    content: '';
    width: 10px;
    height: 100%;
    background: #596230;
    position: absolute;
    border-radius: 8px;
}

.outer-clock-face::after {
    transform: rotate(90deg);
}

.marking {
    width: 3px;
    height: 100%;
    background: #596230;
    position: absolute;
}

/*通过旋转实现背景图上六根分隔线将时钟分隔的效果*/
.marking-one {
    transform: rotateZ(30deg);
}

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

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

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

.inner-clock-face {
    position: absolute;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
    background-color: #fffebd;
    z-index: 2;
    border-radius: 50%;
    /*导入外部图片，也就是时钟的背景图*/
    background-image: url("bg.jpeg");
    background-size: 108%;
}

.inner-clock-face::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #4d4b63;
    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修改旋转中心*/
    transform-origin: 100% 50%;
    transform: rotate(90deg);
}

.hour-hand {
    width: 30%;
}

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

.second-hand {
    background: #b3b3b3;
    width: 45%;
    height: 2px;
}

html 和 body 选择器设置了页面的背景颜色和字体大小，并将页面内容居中显示。
clock 类设置了时钟的样式，包括宽度、高度、边框、圆角、阴影、背景图和内边距。
.outer-clock-face 类设置了外部时钟表面的样式，使用了相对定位来容纳时钟标记。
.outer-clock-face::before 和 .outer-clock-face::after 伪元素被用来创建时钟的两条分隔线。
.marking 类用于创建时钟的刻度标记。
.inner-clock-face 类设置了内部时钟表面的样式，包括位置、尺寸、背景颜色和背景图。
.hand 类定义了时钟的指针样式，包括颜色、尺寸、形状和位置。

这些 CSS 规则一起创建了一个具有背景图和指针的时钟样式。

4. 使用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() // 30
    const secondsDegrees = seconds * 6 + 90
    secondHand.style.transform = `rotate(${secondsDegrees}deg)`

    // 获取到分数
    const mins = now.getMinutes() // 40
    const minsDegrees = mins * 6 + 90
    minHand.style.transform = `rotate(${minsDegrees}deg)`

    // 获取到时
    const hour = now.getHours() // 21
    const hourDegrees = hour * 30 + 90 + (mins / 60) * 30
    hourHand.style.transform = `rotate(${hourDegrees}deg)`
}

setTime()
setInterval(setTime, 1000)

const secondHand = document.querySelector('.second-hand')、const minHand = document.querySelector('.min-hand')、const hourHand = document.querySelector('.hour-hand')：这些语句用于获取 HTML 中对应类名的元素，分别表示秒针、分针和时针的 DOM 元素。
function setTime() { ... }：这是一个名为 setTime 的函数，用于设置时钟的指针位置。
const now = new Date()：创建一个 Date 对象，表示当前时间。
const seconds = now.getSeconds()、const mins = now.getMinutes()、const hour = now.getHours()：分别获取当前的秒数、分钟数和小时数。
const secondsDegrees = seconds * 6 + 90、const minsDegrees = mins * 6 + 90、const hourDegrees = hour * 30 + 90 + (mins / 60) * 30：计算各个指针相对于时钟12点位置的旋转角度。这些计算式的目的是将时间映射到360度的圆周上。
secondHand.style.transform = rotate(secondsDegreesdeg)‘、‘minHand.style.transform=‘rotate({secondsDegrees}deg)`、`minHand.style.transform = `rotate(secondsDegreesdeg)‘、‘minHand.style.transform=‘rotate({minsDegrees}deg)、 hourHand.style.transform = rotate(${hourDegrees}deg) ：设置秒针、分针和时针的 CSS transform 属性，使其旋转到相应的角度。
setTime()：调用 setTime 函数，使时钟指针立即更新到当前时间。
setInterval(setTime, 1000)：使用 setInterval 函数每隔一秒钟调用一次 setTime 函数，实现时钟指针的动态更新。