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
mysql installer community 8.0.16.0 installation g...
Hi, everyone; today is Double 12, have you done a...
The data backup operation is very easy. Execute t...
1. What is master-slave replication? The DDL and ...
The most important interactive design article in ...
Table of contents 1. How to switch 2. Dynamically...
This article shares the specific code for JavaScr...
Table of contents What is Docker Client-side Dock...
Table of contents 1. The concept of closure Addit...
Use navicat to test and learn: First use set auto...
Table of contents Preface Is the interviewer aski...
1. Requirements description Display the delete ic...
1. Download the image docker pull selenium/hub do...
Database stored procedures DROP PROCEDURE IF EXIS...
SQL Left Join, Right Join, Inner Join, and Natura...