HTML5/CSS3 Disc Clock Animation With Clock Ticking Sound

HTML5/CSS3 Disc Clock Animation With Clock Ticking Sound: BY Jeffrey15 Jan,2021; Tags:
HTML5 Clock

Introduction

Today we want to continue to share with you a disc clock animation based on HTML5 and CSS3, it features a disc clock with a real-time update of the digital clock on the side, and the clock will also make a ticking sound when walking.

HTML5/CSS3 Disc Clock Animation With Clock Ticking Sound

Instructions

HTML Body Code

<div class="clock">
        <div class="hourHand"></div>
        <div class="minuteHand"></div>
        <div class="secondHand"></div>
        <div class="center"></div>
        <div class="time"></div>
        <ul>
            <li><span>1</span></li>
            <li><span>2</span></li>
            <li><span>3</span></li>
            <li><span>4</span></li>
            <li><span>5</span></li>
            <li><span>6</span></li>
            <li><span>7</span></li>
            <li><span>8</span></li>
            <li><span>9</span></li>
            <li><span>10</span></li>
            <li><span>11</span></li>
            <li><span>12</span></li>
        </ul>
    </div>

Css Code

body{
    background-color: coral;
    padding: 0;
    margin: 0;
}

.clock{
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background-color: antiquewhite;
    margin: 30px auto 0px auto;
    position: relative;
    border:20px solid cornsilk;

}
.center{
    background-color: #000;
    position: absolute;
    left: calc(50% - 10px);
    top:  calc(50% - 10px);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    z-index: 20;
}
.hourHand{
    width: 10px;
    height: 75px;
    background-color: #000;
    transform-origin: bottom center;
    border-radius: 4px;
    position: absolute;
    top: 75px;
    left: 145px;
    z-index: 10;
    transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
      transform: rotate(360deg);

}

Js Code

window.onload = function() {

const hourHand = document.querySelector('.hourHand');
    const minuteHand = document.querySelector('.minuteHand');
    const secondHand = document.querySelector('.secondHand');
    const time = document.querySelector('.time');
    const clock = document.querySelector('.clock');
    const audio = document.querySelector('.audio');

    function setDate(){
        const today = new Date();
        
        const second = today.getSeconds();
        const secondDeg = ((second / 60) * 360) + 360; 
        secondHand.style.transform = `rotate(${secondDeg}deg)`;
      
        audio.play();
        
        const minute = today.getMinutes();
        const minuteDeg = ((minute / 60) * 360); 
        minuteHand.style.transform = `rotate(${minuteDeg}deg)`;

        const hour = today.getHours();
        const hourDeg = ((hour / 12 ) * 360 ); 
        hourHand.style.transform = `rotate(${hourDeg}deg)`;
        
        time.innerHTML = '<span>' + '<strong>' + hour + '</strong>' + ' : ' + minute + ' : ' + '<small>' + second +'</small>'+ '</span>';

        }
  
    setInterval(setDate, 1000); 
}

VIEW NOW