原生js+css3圆形时钟动画特效

原生js+css3制作一款简单的圆形时钟动画特效,获取的是本地时间,代码比较精简,时钟样式可以修改图片进行美化。

JS代码

<script type="text/javascript"> 
            window.onload=function(){ 
                var hour = document.getElementById("hour"); 
                var min = document.getElementById("min"); 
                var sec = document.getElementById("sec"); 
                 
                //开启定时器 
                setInterval(function(){ 
                    var date = new Date(); 
                    var mills = date.getMilliseconds(); 
                    var s = date.getSeconds()+mills/1000; 
                    var m = date.getMinutes()+s/60; 
                    var h = date.getHours() % 12+m/60; 
                    //console.log(s); 
                    //是指针旋转 
                    hour.style.transform = 'rotate('+h*30+'deg)'; 
                    min.style.transform = 'rotate('+m*6+'deg)'; 
                    sec.style.transform = 'rotate('+s*6+'deg)'; 
                    //因ps技术原因指未能与钟盘匹配,故设置旋转中心点 
                    sec.style.transformOrigin = '49% 65%' 
                    min.style.transformOrigin = '50% 65%' 
                    hour.style.transformOrigin = '49% 68%' 
                },10); 
            } 
</script>
恭喜,此资源为免费资源,请先
本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
打赏
下载价格:免费
下载说明:本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
0

评论0

请先

没有账号? 忘记密码?

社交账号快速登录