Home > Developer > JavaScript
Sample Code for simple scale clock implementation in JS and sample code for js Scale
And use JS to implement a simple scale clock;
The principle is as follows: use 60 Equal li for layout. The interval between the li pairs is 6deg, and the base point is set on the center of the center, so that the li circle is distributed. Then, set the positions of the three needle styles. The base point is also set on the center of the center. Then, the second-hand needle moves 6deg, and the minute-hand needle moves 1/60deg per second. The second-hand hour moves 1/3600deg.
The layout code is as follows:
<!DOCTYPE html>Note in the layout code that there is a long scale every four scales. Therefore, when setting the style, pay special attention to the following: # wrap ul li: nth-child (5n) {height: 10px ;}. The length of the 5n is longer.
In JS code, it is easy to figure out the degree relationship between the three needles. The Code is as follows:
<script type="text/javascript"> window.onload=function(){ var oWrap=document.getElementById('wrap'); var oList=document.getElementById('list'); var oSty=document.getElementById('sty'); var tump=''; for(var i=0;i<60;i++){ var aLi=document.createElement('li'); oList.appendChild(aLi); tump+='#wrap ul li:nth-child('+(i+1)+'){transform: rotate('+(i+1)*6+'deg);}'; oSty.innerHTML+=tump; } var oSec=document.getElementById('sec'); var oMin=document.getElementById('min'); var oHour=document.getElementById('hour'); function time(){ var date=new Date(); var s=date.getSeconds(); var m=date.getMinutes()+(s/60); var h=date.getHours()+(m/60); oSec.style.transform='rotate('+s*6+'deg)'; oMin.style.transform='rotate('+m*6+'deg)'; oHour.style.transform='rotate('+h*30+'deg)'; } time(); setInterval(time,1000); }</script>The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
