How does JS+html make a clock?

In this article, the editor introduces in detail "how to make clock in JS+html". The content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to make clock in JS+html" can help you solve your doubts.

Clock effect picture:

Specific principles:

First, the clock is divided into four different regions, and the cos,sin is calculated for each region to determine the position of the pointer vertex. Draw the pointer through the canvas.

The dynamic beating of the traditional mechanical watch hand is realized by refreshing the pointer position every second by setInterval.

I am a JS developer programmer, engaged in more than 1 year. Idle and boring simple pages

You are welcome to ask questions or suggestions. Common progress

In the code part, you can directly copy the HTML file to view the effect:

Clock var s = setInterval (moveI, 1000); function moveI () {var c = document.getElementById ("t"); var pc = c.getContext ("2d"); c.height = c.height; / / second pc.lineWidth = 3; pc.strokeStyle = 'rgba Var now = new Date (); var sindex = getxy (150, now.getSeconds ()); pc.moveTo (400,400); pc.lineTo (sindex.x, sindex.y); pc.stroke (); pc.beginPath (); / / pc.lineWidth = 7; pc.strokeStyle = 'rgba Var mindex = getxy (120, now.getMinutes () + (now.getSeconds () / 60)); pc.moveTo (400,400); pc.lineTo (mindex.x, mindex.y); pc.stroke (); pc.beginPath (); / / pc.lineWidth = 10; pc.strokeStyle = 'rgba' Var hindex = getxy (80, (now.getHours () > 12? Now.getHours ()-12: now.getHours () + (now.getMinutes () / 60) * 5); pc.moveTo (400,400); pc.lineTo (hindex.x, hindex.y); pc.stroke ();}; function getxy (r, t) {/ / Compute partition 0Jing 2jue 3 var a = parseInt (t / 15) / / Partition Angle t = t-15 * a; var y; var x; / / calculate switch (a) {case 0: y = r-(r * Math.cos (2 * Math.PI / 360 * 90 * (t / 15)) based on the coordinates of the partition X = r + (r * Math.sin (2 * Math.PI / 36090 * (t / 15)); break; case 1: y = r + (r * Math.sin (2 * Math.PI / 36090 * (t / 15)); x = r + (r * Math.cos (2 * Math.PI / 36090 * (t / 15)) Break; case 2: y = r + (r * Math.cos (2 * Math.PI / 36090 * (t / 15)); x = r-(r * Math.sin (2 * Math.PI / 36090 * (t / 15)); break Case 3: y = r-(r * Math.sin (2 * Math.PI / 360 * 90 * (t / 15)); x = r-(r * Math.cos (2 * Math.PI / 360 * 90 * (t / 15); break; default: break;} y = (400-r) + y X = (400-r) + x; return {'x: X,'y: y};} After reading this, the article "how to make a clock in JS+html" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, welcome to follow the industry information channel.