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>

 

posted @ 2019-10-28 22:50  鹰头猫  阅读(974)  评论(0)  编辑  收藏  举报