HTML5基础加强css样式篇（css属性transform 函数（2D）时钟）（二十六）

最新推荐文章于 2023-06-04 23:19:55 发布

咸鸭蛋炒饭

最新推荐文章于 2023-06-04 23:19:55 发布

阅读量456

点赞数

分类专栏： HTML5基础篇文章标签： html5 css 函数应用 2d

本文链接：https://blog.csdn.net/u010853130/article/details/64441708

版权

HTML5基础篇专栏收录该内容

121 篇文章 7 订阅

订阅专栏

1.时钟：

效果图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        html,body{
            margin:0px;
            padding: 0px;;
        }
        #wapper{
            position: relative;
            width: 200px;
            height: 200px;
            background-color:#eee;
            margin: 200px;
        }
      .box{
          width: 4px;
          height: 15px;
          background-color: #000;
          position: absolute;
          top:0px;
          left: -2px ;
          transform-origin: center 100px;

      }



         div[class="box"]:nth-child(5n+4){
              background-color: #000;
              height:23px;
         }
        #scend{
            width: 2px;
            height: 80px;
            background-color: red;
            position: absolute;
            top:20px;
            left: -1px;

        }
       #min{
           width: 4px;
           height: 60px;
           background-color: black;
           position: absolute;
           top:40px;
           left: -2px;
       }
        #hour{
            width: 6px;
            height: 40px;
            background-color: blue;
            position: absolute;
            top:60px;
            left: -3px;


        }
        #scend, #min, #hour{
            transform-origin: bottom;
        }

    </style>

</head>
<body>
      <div id="wapper">
          <div id="hour"></div>
          <div id="min"></div>
          <div id="scend" ></div>
      </div>
</body>
<script type="text/javascript">
             var wapper=document.querySelector("#wapper");
             var hour=document.querySelector("#hour");
             var min=document.querySelector("#min");
             var scend=document.querySelector("#scend");


             for (var i = 0; i < 60; i++) {
                      var cont=document.createElement("div");
                      cont.classList.toggle("box");
                      cont.style.transform="rotate("+6*i+"deg)";
                      wapper.appendChild(cont);
             }


             setInterval(function(){
                 var time=new Date();
                 var secondw=time.getSeconds();
                 var minew=time.getMinutes()+secondw/60;
                 var hourw=time.getHours()+minew/60;

                 scend.style.transform="rotate("+secondw*6+"deg)";
                 min.style.transform="rotate("+minew*6+"deg)";
                 hour.style.transform="rotate("+hourw*30+"deg)";

             },1000);


</script>
</html>

咸鸭蛋炒饭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML5基础加强css样式篇（css属性transform 函数（2D）时钟）（二十六）

1.时钟：效果图： Title html,body{ margin:0px; padding: 0px;; } #wapper{ position: relative; width: 200px;
复制链接

扫一扫