纯html、css3、js的时钟

最新推荐文章于 2020-06-29 23:28:58 发布

樊小书生

最新推荐文章于 2020-06-29 23:28:58 发布

阅读量672

点赞数 1

分类专栏： HTML CSS JavaScript 文章标签： javascript css3 html

本文链接：https://blog.csdn.net/fxss5201/article/details/52207129

版权

JavaScript 同时被 3 个专栏收录

86 篇文章 1 订阅

订阅专栏

HTML

23 篇文章 0 订阅

订阅专栏

CSS

23 篇文章 1 订阅

订阅专栏

之前在网上看了一些使用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>