The renderings are as follows

<>1.HTML code
<div id="number"> <div><span>9</span></div> <div><span>10</span></div> <div><
span>11</span></div> <div><span>12</span></div> <div><span>1</span></div> <div><
span>2</span></div> <div><span>3</span></div> <div><span>4</span></div> <div><
span>5</span></div> <div><span>6</span></div> <div><span>7</span></div> <div><
span>8</span></div> </div>
<>css code
#number div { width: 190px; height: 20px; position: absolute; left: 10px; top:
90px; } #number span { display: block; width: 20px; height: 20px; }
each div Use absolute layout positioning , Shouldn't that overlap , It overlaps with each other , But we looked at using rotation , Let him unfold into a disc , Here is js code
const numberDivs = document.querySelectorAll('#number div'); const numberSpans
= document.querySelectorAll('#number span'); // Container rendering for (let i = 0; i <
numberDivs.length; i++) { numberDivs[i].style.transform = 'rotate(' + i * 30 +
'deg)'; } // Correct text rotation for (let j = 0; j < numberSpans.length; j++) {
numberSpans[j].style.transform = 'rotate(' + j * -30 + 'deg)'; }
Disc total 12 Number , The angle between numbers should be 30 degree , So use 30 Spread in degrees ,div After rotation , In order to keep the above numbers from shifting , We can rotate the text in the opposite direction by the corresponding degree

Last note
Heavy plate total 60 Scales , Each scale is 6 degree
1 second
The degree of clockwise rotation is (360/12/60/60)
The degree of rotation of the minute hand is (360/60/60)
The second hand rotates by (360/60)
One Minute
The degree of clockwise rotation is (360/12/60)
The degree of rotation of the minute hand is (360/60)
an hour
The degree of clockwise rotation is (360/12)

Degrees of the hour hand = Hours 30+ Minutes (360/12/60)+ Seconds (360/12/60/60)
Degree of minute hand = Minutes *(360/60)+ Seconds (360/60/60)
Degree of second hand = Seconds *(360/60)

Technology
©2019-2020 Toolsou All rights reserved,
Solve in servlet The Chinese output in is a question mark C String function and character function in language MySQL management 35 A small coup optimization Java performance —— Concise article Seven sorting algorithms (java code ) use Ansible Batch deployment SSH Password free login to remote host according to excel generate create Build table SQL sentence Spring Source code series ( sixteen )Spring merge BeanDefinition Principle of Virtual machine installation Linux course What are the common exception classes ?