JavaScript圆形钟表效果
分类:实例代码
分享一段代码实例,它实现了利用js实现了自动读取本地时间的圆形钟表效果。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style type="text/css"> #outbox { position: relative; border-radius: 50%; width: 400px; height: 400px; margin: 150px auto; background: linear-gradient(#D1E6ED, #767775); } #innerbox { position: absolute; width: 360px; height: 360px; border-radius: 50%; margin: 20px; background-color: white; box-shadow: 0 0 10px 5px gray inset; } #innerbox > div { width: 350px; height: 32px; font-size: 1.5em; line-height: 32px; text-align: center; position: absolute; top: 164px; left: 5px; } #innerbox > div > span:nth-child(1) { float: left; } #innerbox > div > span:nth-child(2) { float: right; } #second_line { height: 175px; width: 4px; background-color: red; top: 25px; left: 198px; position: absolute; z-index: 13; } #minute_line { height: 150px; width: 6px; background-color: blue; top: 50px; left: 197px; position: absolute; z-index: 12; } #hour_line { height: 130px; width: 8px; background-color: black; top: 70px; left: 196px; position: absolute; z-index: 11; } </style> </head> <body> <div id="outbox"> <div id="innerbox"> <div> <span>1</span><span>7</span> </div> <div> <span>2</span><span>8</span> </div> <div> <span>3</span><span>9</span> </div> <div> <span>4</span><span>10</span> </div> <div> <span>5</span><span>11</span> </div> <div> <span>6</span><span>12</span> </div> </div> <div id="second_line"> </div> <div id="minute_line"> </div> <div id="hour_line"> </div> </div> </body> <script> var hours, minutes, seconds; //获取所有元素 var arrDiv = document.querySelectorAll("#innerbox>div"); var arrSpan = document.querySelectorAll("#innerbox>div>span"); //布局 for (var i = 0; i < arrDiv.length; i++) { arrDiv[i].style.transform = "rotateZ(-" + (240 - 30 * i) + "deg)"; } for (var i = 0; i < arrSpan.length; i += 2) { arrSpan[i].style.transform = "rotateZ(" + (240 - 15 * i) + "deg)"; arrSpan[i + 1].style.transform = "rotateZ(" + (240 - 15 * i) + "deg)"; } //选择旋转点 document.getElementById("second_line").style.transformOrigin = "bottom"; document.getElementById("minute_line").style.transformOrigin = "bottom"; document.getElementById("hour_line").style.transformOrigin = "bottom"; //获取秒数 seconds = new Date().getSeconds(); //获取分钟数,如果seconds=30,相当于分针转了(30/60)分钟 minutes = new Date().getMinutes() + seconds / 60; //获取小时数,同理可得 hours = new Date().getHours() + minutes / 60; //计时器 setInterval(init, 1000); //初始化 function init() { hours = hours + 1 / 3600; minutes = minutes + 1 / 60; seconds++; document.getElementById("second_line").style.transform = "rotate(" + 6 * seconds + "deg)"; document.getElementById("minute_line").style.transform = "rotate(" + 6 * minutes + "deg)"; document.getElementById("hour_line").style.transform = "rotate(" + 30 * hours + "deg)"; } init(); </script> </html>
JavaScript圆形钟表效果,这样的场景在实际项目中还是用的比较多的,关于JavaScript圆形钟表效果就介绍到这了。
JavaScript圆形钟表效果属于前端实例代码,有关更多实例代码大家可以查看。