用js css 写简单时钟

最新推荐文章于 2022-06-16 18:52:00 发布

夏目友人帐...

最新推荐文章于 2022-06-16 18:52:00 发布

阅读量165

点赞数

分类专栏：实例文章标签： css

本文链接：https://blog.csdn.net/xiaoyuer_2020/article/details/105468214

版权

实例专栏收录该内容

5 篇文章 0 订阅

订阅专栏

主要思路

画出表盘，刻度，表盘60个刻度，每个刻度6度
秒针，分针，时针刻度计算
设置一秒钟的定时器

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时钟</title>
    <style type="text/css">
        /*表盘的圆*/
        .clock-circle {
            width: 200px;
            height: 200px;
            border: 2px solid #000000;
            border-radius: 50%;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        /*中间圆点*/
        .clock-point{
            width: 14px;
            height: 14px;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1;
            background-color: #000000;
        }
        /*钟表刻度*/
        ul li {
            position: absolute;
            top: 100px;
            left: 99px;
            width: 2px;
            height: 96px;
            border-bottom: 5px solid #000000;
            list-style: none;
            transform-origin: 50% 0%;
            -webkit-transform-origin: 50% 0%;
            -moz-transform-origin: 50% 0%;
            -ms-transform-origin: 50% 0%;
            -o-transform-origin: 50% 0%;
        }
        ul li.hour {
            height: 91px;
            border-bottom: 10px solid #000000;
        }
        /*时针*/
        #clock-hour {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-3px, 0);
            width: 6px;
            height: 60px;
            background-color: blue;
            -webkit-transform-origin: 50% 0%;
            -moz-transform-origin: 50% 0%;
            -ms-transform-origin: 50% 0%;
            -o-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
        }
        /*分针*/
        #clock-minute {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-2px, 0);
            width: 4px;
            height: 80px;
            background-color: forestgreen;
            -webkit-transform-origin: 50% 0%;
            -moz-transform-origin: 50% 0%;
            -ms-transform-origin: 50% 0%;
            -o-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
        }
        /*秒针*/
        #clock-second {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-1px, 0);
            width: 2px;
            height: 90px;
            background-color: chocolate;
            -webkit-transform-origin: 50% 0%;
            -moz-transform-origin: 50% 0%;
            -ms-transform-origin: 50% 0%;
            -o-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
        }
    </style>
</head>
<body>
    <div class="clock-circle">
        <div class="clock-point"></div>
        <ul id="father-scale"></ul>
        <div id="clock-hour"></div>
        <div id="clock-minute"></div>
        <div id="clock-second"></div>
    </div>
</body>
<script>
    //画刻度
    var fatherScale = document.getElementById('father-scale');
    var scales = "";
    //生成60个刻度
    for (var i = 0; i < 60; i++) {
        scales += "<li></li>";
    }
    fatherScale.innerHTML = scales;
    //获取每个刻度
    var scale = document.getElementsByTagName("li");
    for(var i = 0; i < 60; i++){
        // 每五个就有一个小时刻度，让它获取hour这个样式
        if(i%5==0){
            scale[i].className = "hour";
        }
        //圆360度，一个刻度是6度，每个都旋转6度，第i个旋转6*i
        scale[i].style.transform = "rotateZ("+i*6+"deg)";
    }

    var hourNeedle = document.getElementById("clock-hour");
    var minNeedle = document.getElementById("clock-minute");
    var secNeedle = document.getElementById("clock-second");
    var timer = null;
    function start() {
        clearTimeout(timer);
        timer = null;

        var nowDate = new Date();

        //1s秒针走一个格子6度
        var s = nowDate.getSeconds();
        secNeedle.style.transform = "rotateZ(" + (s * 6 + 180) + "deg)";
        secNeedle.style.webkitTransform = "rotateZ(" + (s * 6 + 180) + "deg)";/* Safari and Chrome */
        secNeedle.style.oTransform = "rotateZ(" + (s * 6 + 180) + "deg)";/* opera */
        secNeedle.style.msTransform = "rotateZ(" + (s * 6 + 180) + "deg)"; /* IE 9 */
        secNeedle.style.mozTransform = "rotateZ(" + (s * 6 + 180) + "deg)";/* firefox */

        //1分分针走一个格子6度，60s分针走一个格子6度
        //如果当前时间是6分20秒，分针不应该直接指向6分，应该是在6和7之间，时针同理
        var m = nowDate.getMinutes() + s/60;
        minNeedle.style.transform = "rotateZ(" + (m * 6 + 180) + "deg)";
        minNeedle.style.webkitTransform = "rotateZ(" + (m * 6 + 180) + "deg)";
        minNeedle.style.oTransform = "rotateZ(" + (m * 6 + 180) + "deg)";
        minNeedle.style.msTransform = "rotateZ(" + (m * 6 + 180) + "deg)";
        minNeedle.style.mozTransform = "rotateZ(" + (m * 6 + 180) + "deg)";

        //12个小时360度，一小时时针走30度，60分时针走一个格子
        var h = nowDate.getHours() + m/60;
        hourNeedle.style.transform = "rotateZ(" + (h * 30 + 180) + "deg)";
        hourNeedle.style.webkitTransform = "rotateZ(" + (h * 30 + 180) + "deg)";
        hourNeedle.style.oTransform = "rotateZ(" + (h * 30 + 180) + "deg)";
        hourNeedle.style.msTransform = "rotateZ(" + (h * 30 + 180) + "deg)";
        hourNeedle.style.mozTransform = "rotateZ(" + (h * 30 + 180) + "deg)";

        //设置一秒钟自动走的定时器
        timer = window.setTimeout(start, 1000)
    }
    start();
</script>
</html>

夏目友人帐...

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
用js css 写简单时钟

主要思路画出表盘，刻度，表盘60个刻度，每个刻度6度秒针，分针，时针刻度计算设置一秒钟的定时器代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>时钟</title> <style ty...
复制链接

扫一扫