纯html、css3、js的时钟

客官°小女子只卖身不卖艺 2022-09-25 06:16 149阅读 0赞

之前在网上看了一些使用js写的时钟，但感觉实现的方法有点麻烦，所以就自己重新写了一个例子，样子有点丑，但方法比较简单，大家就凑合看吧

![Center][]

其中采用的主要方法是原生js里面的Data（时期）对象，以及它的.getSeconds()、.getMinutes()、.getHours()以及css3之中关于旋转部分的内容，以下是所写的代码：

<!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>translate</title>
        <style>
        * {
            margin: 0;
            padding: 0;
        }
        .biao {
            width: 200px;
            height: 200px;
            margin: 0 auto;
            border: 5px solid #000;
            border-radius: 50%;
            position: relative;
        }
        ul {
            list-style: none;
            position: relative;
        }
        li {
            width: 3px;
            height: 10px;
            background: #000;
            position: absolute;
        }  
        .li1 {
            left: 99px;
            top: 0px;
        }
        .li2 {
            left: 147px;
            top: 12px;
            transform: rotate(30deg);
        }
        .li3 {
            left: 182px;
            top: 49px;
            transform: rotate(60deg);
        }
        .li4 {
            left: 195px;
            top: 97px;
            transform: rotate(90deg);
        }
        .li5 {
            left: 182px;
            top: 143px;
            transform: rotate(120deg);
        }
        .li6 {
            left: 147px;
            top: 178px;
            transform: rotate(150deg);
        }
        .li7 {
            left: 99px;
            top: 192px;
            transform: rotate(180deg);
        }
        .li8 {
            left: 49px;
            top: 178px;
            transform: rotate(210deg);
        }
        .li9 {
            left: 13px;
            top: 143px;
            transform: rotate(240deg);
        }
        .li10 {
            left: 1px;
            top: 97px;
            transform: rotate(270deg);
        }
        .li11 {
            left: 13px;
            top: 49px;
            transform: rotate(300deg);
        }
        .li12 {
            left: 49px;
            top: 12px;
            transform: rotate(330deg);
        }
        .zx {
            position: absolute;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            left: 95px;
            top: 95px;
            background: #f00;
            z-index: 10;
        }
        .zo {
            position: absolute;
            transform-origin: 50% bottom;
        }
        .miao {
            width: 3px;
            height: 80px;
            left: 99px;
            top: 20px;
            background: #f00;
            z-index: 8;
        }
        .fen {
            width: 7px;
            height: 60px;
            left: 97px;
            top: 40px;
            background: #0f0;
            z-index: 5;
        }
        .shi {
            width: 11px;
            height: 40px;
            left: 95px;
            top: 60px;
            background: #00f;
            z-index: 2;
        }
        .text {
            position: absolute;
            font-size: 30px;
        }
        .text1 {
            top: 18px;
            left: 93px;
        }
        .text2 {
            top: 86px;
            left: 165px;
        }
        .text3 {
            top: 150px;
            left: 93px;
        }
        .text4 {
            top: 86px;
            left: 25px;
        }
        </style>
    </head>
    <body>
        <div class="biao">
            <ul>
                <li class="li1"></li>
                <li class="li2"></li>
                <li class="li3"></li>
                <li class="li4"></li>
                <li class="li5"></li>
                <li class="li6"></li>
                <li class="li7"></li>
                <li class="li8"></li>
                <li class="li9"></li>
                <li class="li10"></li>
                <li class="li11"></li>
                <li class="li12"></li>
            </ul>
            <div class="text text1">0</div>
            <div class="text text2">3</div>
            <div class="text text3">6</div>
            <div class="text text4">9</div>
            <div class="zx"></div>
            <div class="zo shi" id="shi"></div>
            <div class="zo fen" id="fen"></div>
            <div class="zo miao" id="miao"></div>
        </div>
    <script>
    var shi = document.getElementById("shi");
    var fen = document.getElementById("fen");
    var miao = document.getElementById("miao");
    var interval = setInterval(function(){
        var now = new Date();
        var s = now.getSeconds();
        var f = now.getMinutes();
        var h = now.getHours();
        miao.style.transform = "rotate("+s/60*360+"deg)";
        fen.style.transform = "rotate("+f/60*360+"deg)"
        shi.style.transform = "rotate("+h/24*360+"deg)"
    },1000);
    </script>
    </body>
    </html>

[Center]: /images/20220718/2a8cf3e0e24b4965804005044f58c628.png