This article shares the specific code of js to implement a simple disc clock for your reference. The specific content is as follows Preview image: Code: CSS: <style> .disc { position: relative; margin: 200px auto; width: 300px; height: 300px; border: 1px solid #000; border-radius: 50%; } .axis { position: absolute; top: 150px; left: 150px; transform: translate(-50%, -50%); width: 10px; height: 10px; border-radius: 50%; background-color: #000; } .hourHand { position: absolute; top: 150px; left: 147px; width: 6px; height: 80px; background-color: #000; transform-origin: 3px 0; } .minuteHand { position: absolute; top: 150px; left: 148px; width: 4px; height: 110px; background-color: #000; transform-origin: 2px 0; } .secondHand { position: absolute; top: 150px; left: 149px; width: 2px; height: 130px; background-color: #000; transform-origin: 1px 0; } .scale { position: absolute; top: 0; left: 150px; transform-origin: 2.5px 150px; width: 2px; height: 5px; background-color: #000; } .num { position: absolute; top: 15px; left: 150px; width: 20px; height: 20px; color: 16px; text-align: center; line-height: 20px; transform-origin: 50% 135px; } .num span { display: block; transform-origin: 50% 50%; } </style> html: <div class="disc"> <div class="axis"></div> <div class="hourHand"></div> <div class="minuteHand"></div> <div class="secondHand"></div> </div> js: // Get the element var disc = document.getElementsByClassName('disc')[0]; var hourHand = document.getElementsByClassName('hourHand')[0]; var minuteHand = document.getElementsByClassName('minuteHand')[0]; var secondHand = document.getElementsByClassName('secondHand')[0]; var scale = document.getElementsByClassName('scale'); // Generate scale for (var i = 0; i < 60; i++) { var scale = document.createElement('div'); scale.classList.add('scale'); scale.style.transform = `translate(-50%) rotate(${i*6}deg)`; disc.appendChild(scale); scale.style.transform = `translate(-50%) rotate(${i*6}deg)`; if (i % 5 === 0) { scale.style.width = 4 + 'px'; scale.style.height = 12 + 'px'; } } // Generate numbers for (var i = 0; i < 12; i++) { var num = document.createElement('div'); var numx = document.createElement('span'); num.classList.add('num'); num.style.transform = `translate(-50%)rotate(${i*30+30}deg)`; numx.style.transform = `rotate(${-i*30-30}deg)`; numx.innerHTML = i + 1; disc.appendChild(num); num.appendChild(numx); } // Display as soon as the browser is opened, without pausing var h = getTime().hours; h = h > 12 ? h - 12 : h; hourHand.style.transform = `rotate(${h*30-180+(getTime().minute*0.5)}deg)`; minuteHand.style.transform = `rotate(${getTime().minute*6-180}deg)`; secondHand.style.transform = `rotate(${getTime().second*6-180}deg)`; // Timer, execute once every second setInterval(function() { var h = getTime().hours; h = h > 12 ? h - 12 : h; hourHand.style.transform = `rotate(${h*30-180+(getTime().minute*0.5)}deg)`; minuteHand.style.transform = `rotate(${getTime().minute*6-180}deg)`; secondHand.style.transform = `rotate(${getTime().second*6-180}deg)`; }, 1000) // Function: Get time function getTime() { var date = new Date(); var year = date.getFullYear(); var month = date.getMonth(); month = month < 10 ? '0' + month : month; var day = date.getDate(); day = day < 10 ? '0' + day : day; var week = date.getDay(); var weeks = ['Sun', 'Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat']; var weekZn = weeks[week]; var hou = date.getHours(); hou = hou < 10 ? '0' + hou : hou; var min = date.getMinutes(); min = min < 10 ? '0' + min : min; var sec = date.getSeconds(); sec = sec < 10 ? '0' + sec : sec; return { year: year, month: month, day: day, week: weekZn, hours: hou, minute: min, second: sec } } For more JavaScript clock effects, click here: JavaScript clock effects special topic The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: Implementing file content deduplication and intersection and difference in Linux
>>: Detailed explanation of the use of MySQL DML statements
Table of contents 1. Write in front 2. Overlay to...
Using depends_on to sort containers does not perf...
By right-clicking the source file, the following c...
Table of contents vue2.x Pre-concept: Routing hoo...
Effect principle Mainly use CSS gradient to achie...
I'm currently learning about front-end perform...
Table of contents 1. Paradigm foundation 1.1 The ...
Permission denied: The reason for this is: there ...
IP masquerading and port forwarding Firewalld sup...
Alignment issues like type="radio" and t...
js interesting countdown case, for your reference...
In the front-end design draft, you can often see ...
Table of contents Solution: 1. IGNORE 2. REPLACE ...
Whitelist rule syntax: BasicRule wl:ID [negative]...
background Sometimes we need to get the creation ...