Heim > Artikel > Web-Frontend > 网页时钟_html/css_WEB-ITnose
网页时钟_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 13:05:031202Durchsuche
使用HTML，CSS绘制一个时钟，效果图和素材如下图（注意指针可以旋转到任意位置）
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>clock</title> <style>.clock, .hand { background-image: url(clock1.png);}.clock { margin: 20px auto; position: relative; width: 760px; height: 730px; background-position: -198px -68px;}.hand { display: none; position: absolute; left: 356px; top: 114px; width: 50px; height: 350px; -webkit-transform-origin: center 254px; -moz-transform-origin: center 254px; -ms-transform-origin: center 254px; transform-origin: center 254px;}.hour { background-position: -112px 377px;}.minute { background-position: -63px 377px;}.second { background-position: -17px 377px; -webkit-transition: -webkit-transform 0.5s; -moz-transition: -moz-transform 0.5s; -ms-transition: -ms-transform 0.5s; transition: transform 0.5s;} </style> </head> <body> <div class="clock"> <div class="hour hand"></div> <div class="minute hand"></div> <div class="second hand"></div> </div> <script>var hourHand = document.querySelector(".clock .hour"), minuteHand = document.querySelector(".clock .minute"), secondHand = document.querySelector(".clock .second");update();hourHand.style.display = "block";minuteHand.style.display = "block";secondHand.style.display = "block";function update() { var time = new Date(); var hh = time.getHours(), mm = time.getMinutes(), ss = time.getSeconds(); var hhDeg = 360 * (hh * 3600 + mm * 60) / (12 * 3600), mmDeg = 360 * (mm * 60 + ss) / 3600, ssDeg = 6 * (hh * 3600 + mm * 60 + ss); //BUG: 23:59:59 -> 00:00:00 second hand transition will go wild! hourHand.style.transform = "rotate(" + hhDeg + "deg)"; hourHand.style.webkitTransform = "rotate(" + hhDeg + "deg)"; hourHand.style.MozTransform = "rotate(" + hhDeg + "deg)"; hourHand.style.msTransform = "rotate(" + hhDeg + "deg)"; minuteHand.style.transform = "rotate(" + mmDeg + "deg)"; minuteHand.style.webkitTransform = "rotate(" + mmDeg + "deg)"; minuteHand.style.MozTransform = "rotate(" + mmDeg + "deg)"; minuteHand.style.msTransform = "rotate(" + mmDeg + "deg)"; secondHand.style.transform = "rotate(" + ssDeg + "deg)"; secondHand.style.webkitTransform = "rotate(" + ssDeg + "deg)"; secondHand.style.MozTransform = "rotate(" + ssDeg + "deg)"; secondHand.style.msTransform = "rotate(" + ssDeg + "deg)"; setTimeout(update, 200);} </script> </body></html> 这是效果
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：使用Axure RP原型设计实践01,使用概述_html/css_WEB-ITnoseNächster Artikel：div+css是网页排版技巧_html/css_WEB-ITnose