原生js--钟表

最新推荐文章于 2024-01-31 16:02:42 发布

tracy-迪

最新推荐文章于 2024-01-31 16:02:42 发布

阅读量165

点赞数

本文链接：https://blog.csdn.net/Tracy_di/article/details/90145613

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>钟表</title>
    <style>
        .block{
            margin: auto;
            width:500px;
            height:500px;
            overflow: hidden;
            background-color: #e8b9ff;
        }
        .biaopan{
            position: relative;
            width:1200px;
            height:1200px;
            background-repeat: no-repeat;
            background-image: url("./img/bgimage.png");
            background-size: cover;
            background-position: -435px -1280px;
        }
        .zhen1,.zhen2,.zhen3{
            position: absolute;
            left:205px;
            top:238px;
            width:200px;
            height:20px;
            overflow: hidden;
            transform-origin:45px;
            /*background-color: #0062ff;*/
        }
        .hours{
             position:absolute;
             left:-225px;
             top:-238px;
             width:1200px;
             height:1200px;
             background-repeat: no-repeat;
             background-image: url("./img/bgimage.png");
             background-size: cover;
             background-position: -790px -1232px;
         }
        .minutes{
            position: absolute;
            left:-225px;
            top:-238px;
            width:1200px;
            height:1200px;
            background-repeat: no-repeat;
            background-image: url("./img/bgimage.png");
            background-size: cover;
            background-position: -760px -1280px;
        }
        .seconds{
            position: absolute;
            left:-205px;
            top:-238px;
            width:1200px;
            height:1200px;
            background-repeat: no-repeat;
            background-image: url("./img/bgimage.png");
            background-size: cover;
            background-position: -780px -1331px;
        }


    </style>
</head>
<body>
<script>
    window.onload=function(){
        addElement();
    }
    function addElement(){
        var block=document.createElement("div");
        block.className="block";
        document.body.appendChild(block);

        var biaopan=document.createElement("div");
        biaopan.className="biaopan";
        block.appendChild(biaopan);

        var zhen1=document.createElement("div");
        zhen1.className="zhen1";
        biaopan.appendChild(zhen1);

        var hours=document.createElement("div");
        hours.className="hours";
        zhen1.appendChild(hours);

        var zhen2=document.createElement("div");
        zhen2.className="zhen2";
        biaopan.appendChild(zhen2);

        var minutes=document.createElement("div");
        minutes.className="minutes";
        zhen2.appendChild(minutes);

        var zhen3=document.createElement("div");
        zhen3.className="zhen3";
        biaopan.appendChild(zhen3);
        var seconds=document.createElement("div");
        seconds.className="seconds";
        zhen3.appendChild(seconds);
    }
    function nowtime(){
        var zhen3=document.getElementsByClassName("zhen3")[0];
        var zhen2=document.getElementsByClassName("zhen2")[0];
        var zhen1=document.getElementsByClassName("zhen1")[0];
        var time=new Date();
        console.log(time);

        var Secondnum=time.getSeconds();
        SecondDeg = Secondnum*6-90;
        zhen3.style.transform = "rotate("+SecondDeg+"deg)";
        console.log();

        var Minutenum=time.getMinutes();
        MinuteDeg =Minutenum*6+ Secondnum*6/60-90;
        zhen2.style.transform = "rotate("+MinuteDeg+"deg)";

        var Hournum=time.getHours();
        console.log(Hournum);
        HourDeg =Hournum*30+Minutenum*6/12-90;
        zhen1.style.transform = "rotate("+HourDeg+"deg)";
    }
    setInterval(nowtime,1000);
</script>
</body>
</html>

在这里插入图片描述

tracy-迪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js--钟表

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>钟表</title> <style> .block{ margin: auto; wid...
复制链接

扫一扫