欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

transform实现的时钟效果

程序员文章站 2022-07-04 11:43:28
transform实现的时钟效果 又来一个时钟效果了，这个的实现不需要canvas，都是p、ul、li画出的，好玩有真实。 哈哈~ 需要的js才能实现到走动这个效果，但js的...
transform实现的时钟效果

又来一个时钟效果了，这个的实现不需要canvas，都是p、ul、li画出的，好玩有真实。

哈哈~

需要的js才能实现到走动这个效果，但js的内容不多，也不难。

主要是一个css里transform的使用的思路，transform里有很多变幻属性，而普通的时钟在我心中就是个圆圆的东西，那么是不是可以旋转这个属性（rotate）实现了，它的刻度使用旋转且把旋转点设置在圆心，那不就可以绕着圆心转了吗，而时针它们的底部不是和圆心接触的吗，那么设置时针的底部为旋转点不就ok了，大概的说了说思路。

transform实现的时钟效果

代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>transform</title>
    <style id="css">
        #clock{
            width: 200px;
            height: 200px;
            border: 2px solid #000;
            border-radius: 50%;
            margin: 100px auto 0;
            position: relative;
        }
        #clock ul{
            width: 200px;
            height: 200px;
            position: relative;
            list-style: none;
            padding:0;
            margin: 0;
        }
        #clock ul li{
            width: 2px;
            height: 10px;
            background: #000;
            transform-origin: center 100px;
            position: absolute;
            top: 0;
            left: 50%;
        }
        #clock ul li:nth-of-type(5n+1){
            height: 20px;
        }    
        #hour{
            height: 40px;
            width: 4px;
            background: #00fefe;
            position: absolute;
            top: 60px;
            left: 99px;
            transform-origin:center bottom;
        }
        #min{
            height: 60px;
            width: 3px;
            background: #001afe;
            position: absolute;
            top: 40px;
            left: 99px;
            transform-origin: center bottom;
            transform: rotate(15deg);
        }
        #sec{
            height: 70px;
            width: 2px;
            background: #000;
            position: absolute;
            top: 30px;
            left: 99px;
            transform-origin:center bottom;
        }
        #dot{
            width: 10px;
            height: 10px;
            position: absolute;
            left: 95px;
            top: 95px;
            background: #aaa;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <p id="clock">
        <ul></ul>
        <p id="hour"></p>
        <p id="min"></p>
        <p id="sec"></p>
        <p id="dot"></p>
    </p>
    <script>
        var ocss=document.getelementbyid("css"); 
        var oclock=document.getelementbyid("clock");
        var oul=oclock.getelementsbytagname("ul")[0];
        var ohour=document.getelementbyid("hour");
        var omin=document.getelementbyid("min");
        var osec=document.getelementbyid("sec");
        var strli="";
        var strcss="";
        for(var i=0;i<60;i++){
            strli+="<li></li>";
        }
        oul.innerhtml=strli;
        for(var i=0;i<60;i++){
            strcss+=‘#clock ul li:nth-of-type(‘+(i+1)+‘){transform:rotate(‘+i*6+‘deg);}‘;
        }
        ocss.innerhtml+=strcss;
        time();
        setinterval(time,1000);
        function time(){
        var date=new date();
        var h=date.gethours();
        var m=date.getminutes();
        var s=date.getseconds();

        ohour.style.transform="rotate("+(h+m/60)*30+"deg)";
        omin.style.transform="rotate("+(m+s/60)*6+"deg)";
        osec.style.transform="rotate("+s*6+"deg)";
        }
    </script>
</body>
</html>

使用标签画图最主要的是定位，因为这样我们就可以把弄到形状的盒子放到你所想要的位置，内部css样式表是可以使用获取元素的方式获取的，这样就可以

使用innerhtml为其添加样式，且可以循环添加，还有因为刻度太多所以使用循环添加，这样省时省力，至于剩下的就是定时器了，给定好1秒的时间，每1

秒执行一次函数，这样它就是动起来了。

上一篇： 2015年终盘点：不得不看的6大抄袭事件

下一篇： 叫板苹果三星！华为密谋折叠屏手机：支持屏下指纹

推荐阅读