html,css,js实现的一个钟表

Posted 2020-12-01 鹰头猫

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html,css,js实现的一个钟表相关的知识，希望对你有一定的参考价值。

效果如图：

实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Clock</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 100vw;
            height: 100vh;
            background: #2e1f27;
        }
        p{
            color: #854d27;
        }
        code{
            color: #f4c950;
        }
        .clock {
            --clock-width: 50vmin;
            width: var(--clock-width);
            height: var(--clock-width);
            position: relative;
            overflow: hidden;
            border: 6px solid #f4c950;
            border-radius: 50%;
        }
        .clock:after {
            content: \'\';
            position: absolute;
            z-index: 10;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 6px;
            height: 6px;
            background: #d0b8ac;
            border-radius: 50%;
        }
        .scaleContainer {
            --scale-width: 2px;
            margin: 0;
            padding: 0;
            width: var(--scale-width);
            height: calc(var(--clock-width) / 2 + 4px);
            position: absolute;
            bottom: calc(var(--clock-width) / 2);
            left: calc((var(--clock-width) - var(--scale-width)) / 2);
            /*background: #f4c950;*/
            transform-origin: center bottom;
        }
        .scaleContainer:nth-of-type(5n + 5) {
            --scale-width: 5px;
            width: var(--scale-width);
            left: calc((var(--clock-width) - var(--scale-width)) / 2);
        }
        .scale{
            height: calc(var(--clock-width) / 22);
            background: #f4c950;
        }
        .scaleContainer:nth-of-type(5n + 5) .scale{
            height: calc(var(--clock-width) / 16);
        }
        .hand {
            --hand-width: 4px;
            --hand-length: calc(var(--clock-width) / 2 - 6px);
            width: var(--hand-width);
            height: var(--hand-length);
            background: #d0b8ac;
            position: absolute;
            bottom: calc(var(--clock-width) / 2);
            left: calc((var(--clock-width) - var(--hand-width)) / 2);
            transform-origin: center bottom;
            z-index: 20;
        }
        .hour-hand{
            height: 15vmin;
        }
        .minute-hand {
            --hand-height: 20vmin;
            height: var(--hand-height);
        }
        .second-hand {
            --hand-width: 2px;
            width: var(--hand-width);
            left: calc((var(--clock-width) - var(--hand-width)) / 2);
        }
    </style>
</head>
<body>
<div class="clock">

    <div class="hand hour-hand"></div>
    <div class="hand minute-hand"></div>
    <div class="hand second-hand"></div>
</div>
<p>Responsive dimension via CSS <code>cal</code> and <code>var</code>.</p>

<script>
    const $clock = document.querySelector(\'.clock\');
    for (let i = 1; i <= 60; i++) {
        const $scaleContainer = document.createElement(\'p\');
        $scaleContainer.classList.add(\'scaleContainer\');
        $scaleContainer.style.transform = `rotate(${6 * i}deg)`;
        const $scale = document.createElement(\'div\');
        $scale.classList.add(\'scale\');
        // $scale.textContent = `${i}`;
        $scaleContainer.appendChild($scale);
        $clock.appendChild($scaleContainer);
    }

    const $hourHand = document.querySelector(\'.hour-hand\');
    const $minuteHand = document.querySelector(\'.minute-hand\');
    const $secondHand = document.querySelector(\'.second-hand\');

    function tick() {
        const date = new Date();
        const CS = date.getSeconds();
        const Sdeg = CS / 60 * 360;
        const CM = date.getMinutes();
        const Mdeg = CM / 60 * 360 + 360 / 60 / 60 * CS;
        const Hdeg = date.getHours() / 12 * 360 + 360 / 12 / 60 * CM + 360 / 12 / 60 / 60 * CS;
        $hourHand.style.transform = `rotate(${Hdeg}deg)`;
        $minuteHand.style.transform = `rotate(${Mdeg}deg)`;
        $secondHand.style.transform = `rotate(${Sdeg}deg)`;
    }

    tick();

    setInterval(tick, 1000);
</script>
</body>
</html>

以上是关于html,css,js实现的一个钟表的主要内容，如果未能解决你的问题，请参考以下文章

JS+CSS 钟表

css+JavaScript+html实现时钟钟表时间

分享一个纯CSS写的钟表式计时器

angularJS使用ocLazyLoad实现js延迟加载

简单的JS钟表计时

css3++js钟表