Tác giả: Hòa Trần Blogger - đăng vào tháng 9 30, 2020
Chia sẻ code tạo đồng hồ chạy bằng kim, lấy giờ hiện tại. Tạo đồng hồ bằng JavaScript. Cách tạo đồng hồ chạy 3 kim bằng HTML, CSS và JavaScript.
Toàn bộ code chạy bằng JavaScript
<style>/*<![CDATA[*/#container{width:100%;height:100vh;display:flex;justify-content:center;align-items:center}#clock{width:400px;height:400px;border:10px solid #333;border-radius:50%;position:relative;background-color:#fff;box-shadow:0 0 10px rgba(0,0,0,0.3)}.hand{position:absolute;transform-origin:50% 100%;background-color:black;z-index:2}.hand::after{content:'';position:absolute;width:6px;height:20px;background-color:black;top:0;left:50%;transform:translateX(-50%);border-radius:3px 3px 0 0;z-index:-1}#hourHand{height:80px;width:5px;z-index:2}#minuteHand{height:110px;width:3px}#secondHand{height:130px;width:2px;background-color:red}.hourHand::after{height:15px}.hour-number{position:absolute;font-size:35px;font-weight:bold;font-family:'Arial',sans-serif;color:#000;z-index:1;transform: translate(-50%, -50%);}#centerDot{width:12px;height:12px;background-color:black;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3}/*]]>*/</style><div id="container"><div id='clock'><div id='centerDot'/></div></div><script>//<![CDATA[function updateClock() {const clock = document.getElementById('clock');const hourHand = document.getElementById('hourHand');const minuteHand = document.getElementById('minuteHand');const secondHand = document.getElementById('secondHand');const now = new Date();const hours = now.getHours() % 12;const minutes = now.getMinutes();const seconds = now.getSeconds();const hourAngle = (hours * 30) + (minutes / 60 * 30);const minuteAngle = minutes * 6;const secondAngle = seconds * 6;hourHand.style.transform = `rotate(${hourAngle}deg)`;minuteHand.style.transform = `rotate(${minuteAngle}deg)`;secondHand.style.transform = `rotate(${secondAngle}deg)`;}document.addEventListener('DOMContentLoaded', () => {const clock = document.getElementById('clock');const hourHand = document.createElement('div');const minuteHand = document.createElement('div');const secondHand = document.createElement('div');hourHand.id = 'hourHand';minuteHand.id = 'minuteHand';secondHand.id = 'secondHand';hourHand.className = 'hand';minuteHand.className = 'hand';secondHand.className = 'hand';clock.appendChild(hourHand);clock.appendChild(minuteHand);clock.appendChild(secondHand);// Tùy chỉnh vị trí kim và đồng hồhourHand.style.left = '50%';hourHand.style.bottom = '50%';minuteHand.style.left = '50%';minuteHand.style.bottom = '50%';secondHand.style.left = '50%';secondHand.style.bottom = '50%';// Thêm số từ 1 đến 12for (let i = 1; i <= 12; i++) {const hourNumber = document.createElement('div');hourNumber.className = 'hour-number';hourNumber.innerText = i.toString();const angle = i * 30 - 90;const posX = Math.cos(angle * (Math.PI / 180)) * 150 + 200;const posY = Math.sin(angle * (Math.PI / 180)) * 150 + 200;hourNumber.style.left = `${posX - 8}px`;hourNumber.style.top = `${posY - 10}px`;clock.appendChild(hourNumber);}// Thêm chấm tròn ở điểm nốiconst centerDot = document.getElementById('centerDot');clock.appendChild(centerDot);setInterval(updateClock, 1000);updateClock();});//]]></script>
Đừng bỏ lỡ.