动态时钟网页实现,-优快云博客

本文链接：https://blog.youkuaiyun.com/P3323197861/article/details/131751242
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>精致小时钟</title>
    <style>
        .box {
        width: 400px;
        height: 410px;
        position: relative;
        margin: 100px auto;
        text-align: center;
        background: url(./表盘2.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: 0px;
            display: block;
            position: absolute;
            line-height: 100px;
            font-size: 13px;
            top: 90px;
            right: 185px;
            background: rgb(250, 246, 246);
        }
    </style>
</head>
<body>
    <div class="box">        
        <span id="a1">
        </span>      
        <img src="./时针.jpg" alt="" id="pic1">       
        <img src="./分针.jpg" alt="" id="pic2">       
        <img src="./秒针.jpg" alt="" id="pic3">
   </div>
</body>
</html>
<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>