js+html5制作简易的时钟表效果

 首页 > 网页特效 > 日期时间 > js+html5制作简易的时钟表效果

js+html5制作简易的时钟表效果

 2018-12-21  400  收藏  0 赞一个  0 真差劲  0 去评论

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>钟表</title>
    <script>
        window.onload=function(){
            var clock=document.getElementsByClassName("clock")[0];
            draw();
            var time=new Date();
            var h=drawpointer(8,100,"#000",time.getHours()*30+time.getMinutes()*6/12);
            var m=drawpointer(6,180,"#000",time.getMinutes()*6);
            var s=drawpointer(4,260,"red",time.getSeconds()*6);
            setInterval(function(){
                var time=new Date();
                h.style.transform="rotate("+(time.getHours()*30+time.getMinutes()*6/12)+"deg)";
                m.style.transform="rotate("+time.getMinutes()*6+"deg)";
                s.style.transform="rotate("+time.getSeconds()*6+"deg)"
            },1000);
            function draw(){
                for(var i=0;i<60;i++){
                    var newdiv=document.createElement("div");
                    var m,h;
                    if(i%5==0){
                        m=8;
                        h=25;
                    }else{
                        m=6;
                        h=15;
                    }
                    newdiv.style.cssText="width:"+m+"px;height:"+h+"px;background:#000;position:absolute;left:0;top:0;transform:translate("+(600-m)/2+"px,0) rotate("+i*6+"deg);transform-origin:"+m/2+"px 300px"
                    clock.appendChild(newdiv);
                }
            }


            function drawpointer(w,h,b,d){
                var newdiv=document.createElement("div");
//                中间的圆
                var newd=document.createElement("div");
                newd.style.cssText="width:50px;height:50px;border-radius:50%;background: radial-gradient(circle at 50% 50%,rebeccapurple,royalblue);position:absolute;left:"+(600-50)/2+"px;top:"+(600-50)/2+"px;"
                newdiv.style.cssText="width:"+w+"px;height:"+h+"px;position:absolute;left:"+(600-w)/2+"px;top:"+(300-h)+"px;background:"+b+";transform:rotate("+d+"deg);transform-origin:center bottom;";
                clock.appendChild(newdiv);
                clock.appendChild(newd);
                return newdiv;
            }
        }
    </script>
    <style>
        body{
            background: radial-gradient(circle at 50% 50%,#ccc,rebeccapurple);
        }
        .clock{
            width: 600px;
            height: 600px;
            /*background: radial-gradient(circle at 50% 50%,rebeccapurple,royalblue);*/
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            border-radius: 50%;
        }
    </style>
</head>
<body>

<div class="clock"></div>

</body>
</html>

运行代码 全选代码 复制代码 清除代码 恢复代码

预览图片

这是一款基于js+html5制作简易的时钟表效果源码，可实现模拟当前时间的钟表走动效果，该源码没有引入任何的外部图形元素，钟表走动效果流畅自然，是一款经典的html5动画效果源码。建议使用支持html5与css3效果较好的火狐或谷歌等浏览器预览本源码。

一、推荐使用迅雷或快车等多线程下载软件下载本站资源。

二、未登录会员无法下载，登录后可获得更多便利功能，若未注册，请先注册。

三、如果服务器暂不能下载请稍后重试！总是不能下载，请点我报错 ,谢谢合作！

四、本站大部分资源是网上搜集或私下交流学习之用，任何涉及商业盈利目的均不得使用，否则产生的一切后果将由您自己承担！本站将不对任何资源负法律责任.如果您发现本站有部分资源侵害了您的权益，请速与我们联系，我们将尽快处理.

五、如有其他问题，请加网站设计交流群(点击这里查看交流群 )进行交流。

六、如需转载本站资源，请注明转载来自并附带链接

七、本站部分资源为加密压缩文件，统一解压密码为：www.aizhanzhe.com

 大家评论

 站长推荐

 点击排行