如何使用HTML5和CSS3制作简单的钟表-创新互联

这篇文章将为大家详细讲解有关如何使用HTML5和CSS3制作简单的钟表，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

创新互联是专业的秀英网站建设公司，秀英接单;提供成都做网站、成都网站制作,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行秀英网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

目的：

利用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制作简单的钟表-创新互联
网站URL：http://6mz.cn/article/hpjeg.html