纯html、css3、js的时钟

来源：互联网发布：知乎怎么死最舒服编辑：程序博客网时间：2024/05/16 09:31

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

其中采用的主要方法是原生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>

0 0