快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线：028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后，网站问题一站解决

基于HTML5+CSS3怎么实现时钟效果

这篇“基于HTML5+CSS3怎么实现时钟效果”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“基于HTML5+CSS3怎么实现时钟效果”文章吧。

为广饶等地区用户提供了全套网页设计制作服务，及广饶网站建设行业解决方案。主营业务为成都网站建设、网站制作、广饶网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

目的：

利用html5，css实现钟摆效果

知识点：

1） 利用position/left/top和calc()实现元素的水平和垂直居中；

2） 利用CSS3的animation/transform/transform-origin属性定义动画；

3） 利用transform-origin实现旋转原点的圆心调整

具体代码如下所示：




    
    
    


    
            
                
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                
                
                
                
                                       window.onload = function(){             var hourHand = document.getElementById('hourHand');             var minuteHand = document.getElementById('minuteHand');             var secondHand = document.getElementById('secondHand'); setInterval(function(){                     var currentTime = new Date();                     var hourValue = currentTime.getHours();                     var hourAngle = hourValue / 24 * 360 + 'deg';                     var minuteValue = currentTime.getMinutes();                     var minuteAngle = minuteValue / 60 * 360 + 'deg';                     var secondValue = currentTime.getSeconds();                     var secondAngle = secondValue / 60 * 360 + 'deg';                     console.log(hourAngle); // 方法一：利用jquery的css()增加属性 var cmdHour = 'rotate('+ hourAngle +')'; $('#hourHand').css({transform:'rotate('+ hourAngle +')'}); var cmdMinute = 'rotate('+ minuteAngle +')'; $('#minuteHand').css({transform:cmdMinute}); var cmdSecond = 'rotate('+ secondAngle +')'; $('#secondHand').css({transform:cmdSecond}); // 方法二：利用DOM元素的style属性设置 //      hourHand.style.transform = 'rotate('+ hourAngle + ')'; //      minuteHand.style.transform = 'rotate('+ minuteAngle + ')'; //      secondHand.style.transform = 'rotate('+ secondAngle + ')';   },1000); }     

以上就是关于“基于HTML5+CSS3怎么实现时钟效果”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注创新互联行业资讯频道。


当前标题：基于HTML5+CSS3怎么实现时钟效果
文章出自：http://6mz.cn/article/gdosod.html

其他资讯