Rumah >hujung hadapan web >html tutorial >网页时钟_html/css_WEB-ITnose
网页时钟_html/css_WEB-ITnose
- WBOYasal
- 2016-06-24 13:05:031241semak imbas
使用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> 这是效果
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：使用Axure RP原型设计实践01,使用概述_html/css_WEB-ITnoseArtikel seterusnya：div+css是网页排版技巧_html/css_WEB-ITnose