初學JavaScript之利用計時器做出的簡單時鐘
阿新 • • 發佈：2018-07-15
transform width nsf ner date eight ora form posit
//由於剛學HTML時間不久，JavaScript也是剛剛接觸，有很多繁瑣代碼，希望多多體諒，後續會慢慢改進的
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>簡單時鐘</title> <style type="text/css"> .wrap{ width: 400px; height: 400px; border:1px solid black; border-radius: 50%; margin: 50px auto; position: relative; } .wrap .center .circle{ border-radius: 50%; width: 10px; height: 10px; background-color: orangered; position: absolute; top: 50%; left: 50%; margin-top: -5px; margin-left: -5px; } .inner12_6,.inner1_7,.inner2_8,.inner3_9,.inner4_10,.inner5_11{ width: 4px; height: 400px; /*background: black;*/ position: absolute; left: 50%; margin-left: -2px; } .inner1_7{ transform: rotateZ(30deg); } .inner2_8{ transform: rotateZ(60deg); } .inner3_9{ transform: rotateZ(90deg); } .inner4_10{ transform: rotateZ(120deg); } .inner5_11{ transform: rotateZ(150deg); } .inner12,.inner1,.inner2,.inner3,.inner4,.inner5{ width: 4px; height: 20px; background: black; position: absolute; top: 0; } .inner6,.inner7,.inner8,.inner9,.inner10,.inner11{ width: 4px; height: 20px; background: black; position: absolute; bottom: 0; } .inner12>span{ position: absolute; top: 20px; left: -5px; } .inner6>span{ position: absolute; bottom: 20px; left: -3px; } .inner1>span{ position: absolute; top: 20px; left: -3px; transform: rotateZ(-30deg); } .inner7>span{ position: absolute; bottom: 20px; left: -3px; transform: rotateZ(-30deg); } .inner2>span{ position: absolute; top: 20px; left: -3px; transform: rotateZ(-60deg); } .inner8>span{ position: absolute; bottom: 20px; left: -3px; transform: rotateZ(-60deg); } .inner3>span{ position: absolute; top: 20px; left: -3px; transform: rotateZ(-90deg); } .inner9>span{ position: absolute; bottom: 20px; left: -3px; transform: rotateZ(-90deg); } .inner4>span{ position: absolute; top: 20px; left: -3px; transform: rotateZ(-120deg); } .inner10>span{ position: absolute; bottom: 20px; left: -5px; transform: rotateZ(-120deg); } .inner5>span{ position: absolute; top: 20px; left: -3px; transform: rotateZ(-150deg); } .inner11>span{ position: absolute; bottom: 20px; left: -5px; transform: rotateZ(-150deg); } .wrap .center{ position: absolute; top: 50%; left: 50%; transform: rotate(180deg); } .hour{ width: 6px; height: 100px; background: seagreen; position: absolute; left: 2px; border-radius: 6px; transform-origin: 0px 3px; } .minu{ width: 4px; height: 150px; background: dodgerblue; position: absolute; transform-origin: 0px 2px; left: -2px; } .sec{ width: 2px; height: 180px; background: red; position: absolute; left: -2px; transform-origin: 0px 1px; } </style> </head> <body> <div class="wrap"> <div class="inner12_6"> <div class="inner12"><span>12</span></div> <div class="inner6"><span>6</span></div> </div> <div class="inner1_7"> <div class="inner1"><span>1</span></div> <div class="inner7"><span>7</span></div> </div> <div class="inner2_8"> <div class="inner2"><span>2</span></div> <div class="inner8"><span>8</span></div> </div> <div class="inner3_9"> <div class="inner3"><span>3</span></div> <div class="inner9"><span>9</span></div> </div> <div class="inner4_10"> <div class="inner4"><span>4</span></div> <div class="inner10"><span>10</span></div> </div> <div class="inner5_11"> <div class="inner5"><span>5</span></div> <div class="inner11"><span>11</span></div> </div> <div class="center"> <div class="hour"></div> <div class="minu"></div> <div class="sec"></div> <div class="circle"></div> </div> </div> </body> <script type="text/javascript"> var hour = document.querySelector(".hour"); var minu = document.querySelector(".minu"); var sec = document.querySelector(".sec"); function clock(){ var now = new Date; var hoursDeg = now.getHours()/12*360; var minutesDeg = now.getMinutes()/60*360; var secondsDeg = now.getSeconds()/60*360+360; //console.log(hoursDeg,minutesDeg,secondsDeg); hour.style.transform = "rotate("+hoursDeg+"deg)"; minu.style.transform = "rotate("+minutesDeg+"deg)"; sec.style.transform = "rotate("+secondsDeg+"deg)"; } clock(); setInterval(clock,1000); </script> </html>
初學JavaScript之利用計時器做出的簡單時鐘