css3和js实现的圆形钟表效果代码实例
分类:实例代码
分享一段代码实例,它利用css和js实现了圆形钟表效果。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style id="css"> #box{ width:200px; height:200px; border:4px solid #000; margin:30px auto; border-radius:50%; position:relative; } #list{ margin:0; padding:0; list-style:none; width:200px; height:200px; position:relative; } #list li{ width:2px; height:6px; background:#000; position:absolute; top:0; left:99px; transform-origin:center 100px; } #list li:nth-of-type(5n+1){ height:15px; } #hours{ width:8px; height:45px; background:#000; position:absolute; left:96px; top:55px; transform-origin:bottom; } #min{ width:4px; height:60px; background:#066; position:absolute; left:98px; top:40px; transform-origin:bottom; } #sec{ width:2px; height:80px; background:red; position:absolute; left:99px; top:20px; transform-origin:bottom; } .ico{ width:20px; height:20px; background:#000; border-radius:50%; position:absolute; left:90px; top:90px; } </style> <script> window.onload = function() { var oList = document.getElementById("list"); var oCss = document.getElementById("css"); var sHtml = "", sCss = ""; var oHours = document.getElementById("hours"); var oMin = document.getElementById("min"); var oSec = document.getElementById("sec"); for (var i = 0; i < 60; i++) { sHtml += "<li></li>"; sCss += "#list li:nth-of-type(" + (i + 1) + "){ transform:rotate(" + (i * 6) + "deg);}"; } oList.innerHTML = sHtml; oCss.innerHTML += sCss; toDate(); setInterval(toDate, 1000); function toDate() { var oDate = new Date(); var iSec = oDate.getSeconds(); var iMin = oDate.getMinutes() + iSec / 60; var iHours = oDate.getHours() + iMin / 60; oSec.style.transform = "rotate(" + iSec * 6 + "deg)"; oMin.style.transform = "rotate(" + iMin * 6 + "deg)"; oHours.style.transform = "rotate(" + iHours * 30 + "deg)"; } }; </script> </head> <body> <div id="box"> <ul id="list"></ul> <div id="hours"></div> <div id="min"></div> <div id="sec"></div> <div class="ico"></div> </div> </body> </html>
css3和js实现的圆形钟表效果代码实例,这样的场景在实际项目中还是用的比较多的,关于css3和js实现的圆形钟表效果代码实例就介绍到这了。
css3和js实现的圆形钟表效果代码实例属于前端实例代码,有关更多实例代码大家可以查看。