用js制作一个简易时钟时针,分针可随着秒针动.

最新推荐文章于 2025-04-25 16:12:41 发布

旭旭旭旭啊

最新推荐文章于 2025-04-25 16:12:41 发布

阅读量2.2k

点赞数 4

文章标签： javascript html html5 css3

本文链接：https://blog.csdn.net/supershuxu/article/details/107575450

版权

效果图:
在这里插入图片描述

HTML部分:

<body>   
    <div class="box">        
        <span id="a1">
        </span>      
        <img src="11.jpg" alt="" id="pic1">       
        <img src="22.jpg" alt="" id="pic2">       
        <img src="33.jpg" alt="" id="pic3">
   </div>
</body>

CSS部分:
下面展示一些 内联代码片。

 <style>
    .box {
    width: 400px;
    height: 400px;
    position: relative;
    margin: 100px auto;
    text-align: center;
    background: url(12.jpg) no-repeat center;
    }

    .box img {
        position: absolute;
    }

    .box img:nth-of-type(1) {
        right: 195px;
        bottom: 196px;
        height: 70px;
        transform-origin: center 65px;

    }

    .box img:nth-of-type(2) {
        right: 196px;
        bottom: 196px;
        height: 85px;
        transform-origin: center 80px;
    }

    .box img:nth-of-type(3) {
        right: 197px;
        bottom: 167px;
        height: 130px;
        transform-origin: center 95px;
        /* transform: rotate(30deg); */
    }

    span {
        width: 60px;
        text-align: center;
        height: 30px;
        display: block;
        position: absolute;
        line-height: 30px;
        font-size: 12px;
        top: 80px;
        right: 170px;
        background: rgb(250, 246, 246);
    }
</style>

JS部分:

<script>
    var imgs = document.querySelectorAll('img');//获取所有的img标签

    function run() {
        var date = new Date();
        var h = date.getHours();
        var m = date.getMinutes();
        var s = date.getSeconds();
        var roateh, roatem; //整两个变量储存时针和分针的变化
        roateh = h * 30 + m * 0.5 + s * (30 / 3600);//时针旋转角度 [时针旋转角度与分针秒针旋转有关]
        roatem = (m * 6) + (s / 10); //分针旋转角度  [分针旋转角度与秒针旋转有关]
        imgs[0].style.transform = "rotate(" + roateh + "deg)";
        imgs[1].style.transform = "rotate(" + roatem + "deg)";
        imgs[2].style.transform = "rotate(" + s * 6 + "deg)";
    }
    run();
    setInterval(run, 1000);//定时器一秒调用一次函数

    var date = new Date();

    var week = date.getDay();
    switch (week) {
        case 1:
            week = "星期一";
            break;
        case 2:
            week = "星期二";
            break;
        case 3:
            week = "星期三";
            break;
        case 4:
            week = "星期四";
            break;
        case 5:
            week = "星期五";
            break;
        case 6:
            week = "星期六";
            break;
        default:
            week = "星期天";
            break;
    }
    var sp1 = document.getElementById("a1")
    sp1.innerHTML = (week)
</script>