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

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

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>

所用的图片:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
秒针

  • 4
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值