使用HTML5和CSS3制作简单的钟表
导读:收集整理的这篇文章主要介绍了使用HTML5和CSS3制作简单的钟表,觉得挺不错的,现在分享给大家,也给大家做个参考。利用htML5,css实现钟摆效果 ,在项目中经常会遇到,今天小编把基于HTML5+CSS3实现简单的时钟效果的实现代码分享...
收集整理的这篇文章主要介绍了使用HTML5和CSS3制作简单的钟表,觉得挺不错的,现在分享给大家,也给大家做个参考。利用htML5,css实现钟摆效果 ,在项目中经常会遇到,今天小编把基于HTML5+CSS3实现简单的时钟效果的实现代码分享到脚本之家平台,需要的额朋友参考下吧目的:
利用html5,css实现钟摆效果
知识点:
1) 利用posITion/left/top和calc()实现元素的水平和垂直居中;
2) 利用CSS3的animation/transform/transform-origin属性定义动画;
3) 利用transform-origin实现旋转原点的圆心调整
废话不多说了,直接看代码吧,具体代码如下所示:
!DOCTYPE html> html> head> meta charset="UTF-8"> title> /title> style> li{ list-style:none; } #box{ width: 400px; height: 400px; position: absolute; top:calc(50% - 200px); left:calc(50% - 200px); border: 2px solid palegoldenrod; } #dial{ width: 200px; height: 200px; position: absolute; top:calc(50% - 100px); left:calc(50% - 100px); border: 2px solid cyan; border-radius: 50%; } .scaleIndex{ width: 4px; height: 12px; position: absolute; top: 0; left: calc(50% - 2px); background-color: gray; transform-origin: 2px 100px; } .angle30{ transform : rotate(30deg); } .angle60{ transform : rotate(60deg); } .angle90{ transform : rotate(90deg); } .angle120{ transform : rotate(120deg); } .angle150{ transform : rotate(150deg); } .angle180{ transform : rotate(180deg); } .angle210{ transform : rotate(210deg); } .angle240{ transform : rotate(240deg); } .angle270{ transform : rotate(270deg); } .angle300{ transform : rotate(300deg); } .angle330{ transform : rotate(330deg); } #fixpoint{ width: 10px; height: 10px; position: absolute; top:calc(50% - 5px); left:calc(50% - 5px); background-color: CADetblue; border-radius: 50%; } #hourHand{ width: 6px; height: 70px; position:absolute; top: 40px; left: calc(50% - 3px); background-color: darkblue; transform-origin: 50% 60px; } #minuteHand{ width: 4px; height: 75px; position:absolute; top: 35px; left: calc(50% - 2px); background-color: yellow; transform-origin: 50% 65px; } #secondHand{ width: 2px; height: 90px; position:absolute; top: 20px; left: calc(50% - 1px); background-color: red; transform-origin: 50% 80px; } /style> /head> body> p id = "box"> p id = 'dial'> ul id = "scale"> li class = "scaleIndex"> /li> li class = "scaleIndex angle30"> /li> li class = "scaleIndex angle60"> /li> li class = "scaleIndex angle90"> /li> li class = "scaleIndex angle120"> /li> li class = "scaleIndex angle150"> /li> li class = "scaleIndex angle180"> /li> li class = "scaleIndex angle210"> /li> li class = "scaleIndex angle240"> /li> li class = "scaleIndex angle270"> /li> li class = "scaleIndex angle300"> /li> li class = "scaleIndex angle330"> /li> /ul> p id = "fixPoint"> /p> p id = "hourHand"> /p> p id = "minuteHand"> /p> p id = "secondHand"> /p> /p> /p> script type = 'text/javascript' src = 'js/jquery-3.2.1.js'> /script> script type = "text/javascript"> 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); } /script> /body> /html>
以上就是使用HTML5和CSS3制作简单的钟表的详细内容,更多请关注其它相关文章!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: 使用HTML5和CSS3制作简单的钟表
本文地址: https://pptw.com/jishu/583575.html