绘制表盘

最新推荐文章于 2023-10-03 00:49:46 发布

奋斗中的切图猿

最新推荐文章于 2023-10-03 00:49:46 发布

阅读量424

点赞数

分类专栏： js练习题文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44573096/article/details/106172093

版权

js练习题专栏收录该内容

28 篇文章 0 订阅

订阅专栏

效果：
在这里插入图片描述代码：
注意：代码中的js库用的是之前文章发过的myjs.js库

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="common.css">
    <style id="sty">
        #wrap{
            width:404px;
            height:404px;
            border:2px solid black;
            margin:100px auto;
            border-radius:50%;
            position:relative;
        }
        #h{
            width:8px;
            height:100px;
            background-color:#000;
            position:absolute;
            left:196px;
            top:100px;
            transform-origin:center bottom;
        }
        #m{
            width:6px;
            height:140px;
            background-color:#666;
            position:absolute;
            left:197px;
            top:60px;
            transform-origin:center bottom;
        }
        #s{
            width:4px;
            height:170px;
            background-color:red;
            position:absolute;
            left:198px;
            top:30px;
            transform-origin:center bottom;
            /* transform:rotate(90deg); */
        }
        li{
            width:4px;
            height:15px;
            background-color:black;
            position:absolute;
            left:198px;
            top:0;
            transform-origin:center 200px;
        }
        li:nth-child(5n+1){
            height:25px;
        }
        #point{
            width:20px;
            height:20px;
            background-color:orange;
            position:absolute;
            /* 让子元素在父元素中居中 */
            left:190px;
            top:190px;
            border-radius:50%;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="h"></div>
        <div id="m"></div>
        <div id="s"></div>
        <div id="point"></div>
        <ul></ul>
    </div>
    <script src="myjs.js"></script>
    <script>
        var oUl=document.getElementsByTagName("ul")[0];
        var oSty=document.getElementById("sty");
        var str="";
        var aLi=document.getElementsByTagName("li");
        var oH=document.getElementById("h");
        var oM=document.getElementById("m");
        var oS=document.getElementById("s");
        for(var i=0;i<60;i++){
            str+="<li></li>";
            // 让li在正确的位置显示
            oSty.innerHTML += "li:nth-child("+(i+1)+"){transform:rotate("+i*6+"deg);}"
        }
        oUl.innerHTML=str;
        // 获取当前时间时分秒和指针时分秒的转动角度对应起来
        showTime();
        setInterval(showTime,1000);
        function showTime(){
            var oTime=new Date();
            var iH=oTime.getHours();
            var iMi=oTime.getMinutes();
            var iS=oTime.getSeconds();
            var hDeg=iH*30+iMi*0.5;
            var mDeg=iMi*6+iS*0.1;
            var sDeg=iS*6;
            oH.style.cssText="transform:rotate("+hDeg+"deg);";
            oM.style.cssText="transform:rotate("+mDeg+"deg);";
            oS.style.cssText="transform:rotate("+sDeg+"deg);";
        }
    </script>
</body>
</html>

奋斗中的切图猿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
绘制表盘

效果：代码：注意：代码中的js库用的是之前文章发过的myjs.js库<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> &lt
复制链接

扫一扫

专栏目录