Digital Clock in javascript by Vivek Kumar Output View Horizontal Vertical HTML CSS JS Tidy <div class="clock"> <div id="time"> <div class="circle" style="--color: #ff2972"> <div class="dots h_dot"></div> <svg> <circle cx="70" cy="70" r="70"></circle> <circle cx="70" cy="70" r="70" id="hh"></circle> </svg> <div id="hours">00</div> </div> <div class="circle" style="--color: #fee800"> <div class="dots m_dot"></div> <svg> <circle cx="70" cy="70" r="70"></circle> <circle cx="70" cy="70" r="70" id="mm"></circle> </svg> <div id="minutes">00</div> </div> <div class="circle" style="--color: #04fc43"> <div class="dots s_dot"></div> <svg> <circle cx="70" cy="70" r="70"></circle> <circle cx="70" cy="70" r="70" id="ss"></circle> </svg> <div id="seconds">00</div> </div> <div class="dayTime"> <div id="ampm">AM</div> </div> </div> </div> HTML CSS JS Tidy .clock { width: 100%; min-height: 100vh; display: flex; justify-content: center; align-items: center; background: #2f363e; } #time { display: flex; gap: 40px; color: #fff; } #time .circle { position: relative; width: 150px; height: 150px; display: flex; justify-content: center; align-items: center; } #time .circle svg { position: relative; width: 150px; height: 150px; transform: rotate(270deg); } #time .circle svg circle { width: 100%; height: 100%; fill: transparent; stroke: #191919; stroke-width: 4px; transform: translate(5px, 5px); } #time .circle svg circle:nth-child(2) { stroke: var(--color); stroke-dasharray: 440; } #time div { position: absolute; text-align: center; font-size: 1.5rem; font-weight: 500; } #time div span { position: absolute; transform: translate(-50%, 0px); font-size: 0.5rem; font-weight: 300; letter-spacing: 0.1rem; text-transform: uppercase; } #time .dayTime { position: relative; font-size: 1rem; transform: translate(-20px); } .dots { position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; z-index: 10; } .dots::before { content: ''; position: absolute; top: -3px; width: 15px; height: 15px; background: var(--color); border-radius: 50%; box-shadow: 0 0 20px var(--color), 0 0 60px var(--color); } HTML CSS JS Tidy setInterval(() => { // get time indicator elements let hours = document.getElementById('hours'); let minutes = document.getElementById('minutes'); let secondes = document.getElementById('seconds'); let ampm = document.getElementById('ampm'); // digits time indicator let hh = document.getElementById('hh'); let mm = document.getElementById('mm'); let ss = document.getElementById('ss'); // dot time indicator let dotH = document.querySelector('.h_dot'); let dotM = document.querySelector('.m_dot'); let dotS = document.querySelector('.s_dot'); // get current time let h = new Date().getHours(); let m = new Date().getMinutes(); let s = new Date().getSeconds(); let ap = h >= 12 ? 'PM' : 'AM'; // convert to 12 hour format if (h > 12) { h = h - 12; } // add 0 before single digit h = h < 10 ? '0' + h : h; m = m < 10 ? '0' + m : m; s = s < 10 ? '0' + s : s; // set time and label hours.innerHTML = h + ' Hours'; minutes.innerHTML = m + ' Minutes'; secondes.innerHTML = s + ' Seconds'; ampm.innerHTML = ap; // set time circular indicator hh.style.strokeDashoffset = 440 - (440 * h) / 12; mm.style.strokeDashoffset = 440 - (440 * m) / 60; ss.style.strokeDashoffset = 440 - (440 * s) / 60; // set dot time position indicator dotH.style.transform = `rotate(${h * 30}deg)`; dotM.style.transform = `rotate(${m * 6}deg)`; dotS.style.transform = `rotate(${s * 6}deg)`; }, 1000); >_Console Clear Console >_Console File Setting HTML Code Playground Setting Title Description Digital clock in HTML, CSS, and Javascript. No external library used. Catagory Javascript Tags Animation Clock Resource Add External Stylesheets and Script
