Tel：028-86922220 我有需求

HTML5+CSS3怎么实现时钟效果

这篇文章主要介绍了HTML5+CSS3怎么实现时钟效果的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇HTML5+CSS3怎么实现时钟效果文章都会有所收获，下面我们一起来看看吧。

创新互联公司主要从事做网站、成都网站制作、网页设计、企业做网站、公司建网站等业务。立足成都服务定州,10多年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:028-86922220

目的：

利用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怎么实现时钟效果”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注创新互联行业资讯频道。

名称栏目：HTML5+CSS3怎么实现时钟效果
网站地址：http://bzwzjz.com/article/ijoccj.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接：成都网站建设公司网站建设方案网站设计重庆网站制作成都网站设计成都网站设计温江网站设计营销型网站建设成都网站设计制作公司成都网站建设外贸网站建设手机网站制作手机网站制作成都企业网站制作成都商城网站制作网站建设推广定制网站制作成都网站建设成都网站设计营销型网站建设成都商城网站建设成都网站建设