漂亮的CSS时钟

最新推荐文章于 2021-06-27 09:15:50 发布

immocha

最新推荐文章于 2021-06-27 09:15:50 发布

阅读量1k

点赞数 4

本文链接：https://blog.csdn.net/immocha/article/details/104992618

版权

本文详细介绍如何使用HTML, CSS3和JavaScript创建一个动态时钟。通过transformrotate属性，配合transform-origin设定旋转中心，实现时针、分针和秒针的实时转动。代码示例清晰，涵盖时钟布局、样式及动态更新时间。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
想到很多年前，我还是个初出茅庐的前端，只会Table切图，HTML+CSS，去面试一家公司的前端，技术面试让我说说setInterval和setTimeout，当时我说
“没用过…”，结果当然game over
很多年过去了，我也算用过了。
时间不止，步履不停。

主要使用transform rotate，通过设置transform-origin来确定旋转的中心位置。
因为加了数字，所以看起来有点长，其实很简单。

预览地址：https://codepen.io/lucidity99/pen/ZEbYEgQ

HTML

<body>
    <div class="clock">
        <div class="numbers">
            <span class="num1">1</span>
            <span class="num2">2</span>
            <span class="num3">3</span>
            <span class="num4">4</span>
            <span class="num5">5</span>
            <span class="num6">6</span>
            <span class="num7">7</span>
            <span class="num8">8</span>
            <span class="num9">9</span>
            <span class="num10">10</span>
            <span class="num11">11</span>
            <span class="num12">12</span>
        </div>
        <div class="small-circle"></div>
        <div class="middle"></div>
        <div class="pointer pointer-hour" id="pHour"></div>
        <div class="pointer pointer-minute" id="pMinute"></div>
        <div class="pointer pointer-second" id="pSecond"></div>
    </div>
</body>

let pHour = document.getElementById("pHour");
let pMinute = document.getElementById("pMinute");
let pSecond = document.getElementById("pSecond");

setInterval(function() {
  let now = new Date();

  let hour = now.getHours();
  let minute = now.getMinutes();
  let second = now.getSeconds();

  let hourDeg = ((hour % 12) + minute / 60) * 30 - 180;
  let minuteDeg = (minute + second / 60) * 6 - 180;
  let secondDeg = second * 6 - 180;

  pHour.style.transform = "rotate(" + hourDeg+ "deg)";
  pMinute.style.transform = "rotate(" + minuteDeg+ "deg)";
  pSecond.style.transform = "rotate(" + secondDeg+ "deg)";
}, 1000);

CSS

.clock {
    position: relative;
    width: 400px;
    height: 400px;
    background-image: linear-gradient(to right, #eef6fd, #c9daeb);
    border-radius: 100%;    
    box-shadow: 30px 26px 50px -30px #abbccf;
}

.small-circle {
    position: absolute;
    top: 80px;
    left: 80px;
    width: 240px;
    height: 240px;
    border-radius: 100%;
    background-image: linear-gradient(to right, #f0f7fe, #e5ecf6);
    box-shadow: 0 0 40px #d0dcec;
}

.middle {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -5px;
    margin-top: -5px;
    z-index: 10;
    width: 10px;
    height: 10px;
    background-color: lavenderblush;
    border-radius: 100%;
    box-shadow: 0 0 5px #222d60;
}

.pointer {
    position: absolute;
    top: 50%;
    left: 50%;
    background: indigo;
    opacity: .9;
    transform-origin: center 20px;
}

.pointer-hour {
    width: 6px;
    height: 88px;
    background-color: #222d60;
    z-index: 9;
    border-radius: 3px;
    margin-left: -3px;
    margin-top: -20px;
    box-shadow: 2px 0 5px #6c759b;
}

.pointer-minute {
    width: 6px;
    height: 118px;
    background-color: #c0cad9;
    z-index: 8;
    margin-left: -3px;
    margin-top: -20px;
    border-radius: 3px;
    box-shadow: 2px 0 5px #c0cad9;
}

.pointer-second {
    width: 4px;
    height: 170px;
    background-color: #ff3007;
    z-index: 7;
    margin-left: -2px;
    margin-top: -20px;
    border-radius: 2px;
    box-shadow: 2px 0 5px #f9bddd;
}

.numbers span {
    position: absolute;
    top: 20px;
    left: 50%;
    margin-left: -25px;
    display: block;
    width: 50px;
    height: 180px;
    transform-origin: center bottom;
    font-size: 32px;
    color: #fff;
    text-align: center;
    font-family: Helvetica
}

.num1 {
    transform: rotate(30deg)
}

.num2 {
    transform: rotate(60deg)
}

.num3 {
    transform: rotate(90deg)
}

.num4 {
    transform: rotate(120deg)
}

.num5 {
    transform: rotate(150deg)
}

.num6 {
    transform: rotate(180deg)
}

.num7 {
    transform: rotate(210deg)
}

.num8 {
    transform: rotate(240deg)
}

.num9 {
    transform: rotate(270deg)
}

.num10 {
    transform: rotate(300deg)
}

.num11 {
    transform: rotate(330deg)
}

.num12 {
    transform: rotate(0deg)
}