Home
Web Designing
How to Create an Analog Clock using JavaScript

How to Create an Analog Clock using JavaScript

Rajib 01 May 2020 Analog Clock, Clock, JavaScript Clock

Solution: How to Create an Analog Clock using JavaScript with source code, demo, and also how you can execute full program easily. To complete the program you need to follow those steps given bellow

We just started, this is our first post hope you find it helpful. Searching over the internet when I found these types to analog clock and it also looks pretty awesome. That’s why I think to share with you guys. More analog clocks are coming to upcoming posts so stay with us.

Live Demo

Also Helpful –

Simple Digital Clock using JavaScript

Responsive Header Navigation Menu

Implement Google Pie Chart

Emoji Rating System

How to Create an Analog Clock using JavaScript

Back to Coding, Here is the short description about creating an analog clock using HTML, CSS & JavaScript with source code. To execute the same program you need to copy those codes, it works fine. If you want to change something and modify yourself then you need to know some function.

Which is setInterval(); for evaluates an expression at specified intervals, setTimeDate(); for sets Calendar’s time with the given Date, getHours(); getMinutes(); getSeconds(); for getting hours minutes seconds. And the last one div.innerHTML for set value to any division.

To complete this program with debugging free code you have to create three files. The first file is to HTML and the second file gonna be CSS for design part and the third file JavaScript for function-related,

index.html

Create an HTML file named ‘index.html‘ and put those codes given below.

<!-- Coding Debugging (https://codingdebugging.com) -->
<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript Analog Clock - Coding Debugging</title>
        
        <!-- Just a Cool Font -->
        <link href="https://fonts.googleapis.com/css?family=Varela+Round&display=swap" rel="stylesheet">
        
        <meta name="viewport" content="width=device-width, initial-scale=1"/>

        <!-- Our Custom CSS -->
        <link rel="stylesheet" href="style.css">
        
    </head>
    <body>
    
    <svg height="350px" width="350px">
        <circle id="a1" cx="50%" cy="50%" r="45%"/>
        <circle id="a2" cx="50%" cy="50%" r="41%"/>
        <circle id="a3" cx="50%" cy="50%" r="37%"/>
    </svg>
        <span id="tyme"></span>
        <span id="ampm"></span>
        <span id="daay"></span>
        <span id="ddmmyyyy"></span>

        <!-- Our Custom JS -->
        <script src="function.js"></script>

    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>JavaScript Analog Clock - Coding Debugging</title>

</head>

<body>

</svg>

</body>

</html>

style.css

Create a CSS file named ‘style.css‘ and put those codes given below.

body {
    background:#222;
    color:#fff;
    font-family: 'Varela Round', sans-serif;
    font-weight:900;
    margin:0;
    transition:1s linear;
    user-select:none;
    height:100vh;
}
#tyme{
    position:absolute;
    font-size:3em;
    padding:2px;
    padding-left:10px;
    padding-right:10px;
    left:50%;
    transform:translate(-50%);
    top:3.25em;
    border-radius:10px;
    text-shadow:0px 0px 1px black;
    user-select:none;
}
svg{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
}
circle{
    fill:#f50;
    stroke:#ddd;
    stroke-width:12;
    transform-origin:50% 50%;
    stroke-linecap:round;
    stroke-dashoffset:300%;
    transform:rotate(-90deg);
    transition:1s linear;
}
#a3{
    fill:#222;
}
span{
    text-shadow:0px 0px 1px black;
    color:#def;
}
#ampm{
    position:absolute;
    top:14em;
    left:50%;
    transform:translate(-50%);
    text-align:center;
}
#ddmmyyyy{
    position:absolute;
    left:50%;
    transform:translate(-50%);
    top:4.5em;
    font-size:1.6em;
}
#daay{
    position:absolute;
    left:50%;
    transform:translate(-50%);
    top:2.6em;
    font-size:1.5em;
}
footer{
    background:#0005;
    position:fixed;
    padding:5px;
    padding-top:10px;
    bottom:0;
    width:100%;
    text-align:center;
    border-top:solid 1px #aaa;
    font-family:Courier;
    font-weight:400;
}
#follow{
    background:#222;
    color:inherit;
    padding:3px;
    padding-left:10px;
    padding-right:10px;
    border:solid 1px #777;
    float:right;
    text-decoration:none;
    margin-right:9px;
}

body {

background:#222;

color:#fff;

font-family: 'Varela Round', sans-serif;

font-weight:900;

margin:0;

transition:1s linear;

user-select:none;

height:100vh;

}

#tyme{

position:absolute;

font-size:3em;

padding:2px;

padding-left:10px;

padding-right:10px;

left:50%;

transform:translate(-50%);

top:3.25em;

border-radius:10px;

text-shadow:0px 0px 1px black;

user-select:none;

}

svg{

position:absolute;

left:50%;

transform:translateX(-50%);

}

circle{

fill:#f50;

stroke:#ddd;

stroke-width:12;

transform-origin:50% 50%;

stroke-linecap:round;

stroke-dashoffset:300%;

transform:rotate(-90deg);

transition:1s linear;

}

#a3{

fill:#222;

}

span{

text-shadow:0px 0px 1px black;

color:#def;

}

#ampm{

position:absolute;

top:14em;

left:50%;

transform:translate(-50%);

text-align:center;

}

#ddmmyyyy{

position:absolute;

left:50%;

transform:translate(-50%);

top:4.5em;

font-size:1.6em;

}

#daay{

position:absolute;

left:50%;

transform:translate(-50%);

top:2.6em;

font-size:1.5em;

}

footer{

background:#0005;

position:fixed;

padding:5px;

padding-top:10px;

bottom:0;

width:100%;

text-align:center;

border-top:solid 1px #aaa;

font-family:Courier;

font-weight:400;

}

#follow{

background:#222;

color:inherit;

padding:3px;

padding-left:10px;

padding-right:10px;

border:solid 1px #777;

float:right;

text-decoration:none;

margin-right:9px;

}

function.js

Create a JavaScript file named ‘function.js‘ and put those codes given below.

var am_pm,dayno;
        
//CALLS DATE PER 0.001S
setInterval(mngr,100);

//MANAGER
function mngr(){
progbar();
setTimeDate();
};

//ONE TIME CALL FOR DATE
dt();

//GET DATE TIME PM AM
function dt(retrnVal){
    dateA= new Date();
    
    a=dateA.getHours();
    if (a>12){a-=12; am_pm ="PM";}
    else{if(a==0){a=12;}; am_pm="AM";};
    
    a=fx(a);
    b=fx(dateA.getMinutes());
    c=fx(dateA.getSeconds());
    
    dayno=dateA.getDay();
    day=fx("day");
    date=fx(dateA.getDate());
    month=fx(dateA.getMonth()+1);
    year=dateA.getFullYear();
    
    tym=a+":"+b+":"+c;
    dmy=date+"/"+month+"/"+year;
    return retrnVal;
};

//SMALL FIX FOR DATE
function fx(num){
    if (num<=9){num="0"+num;};
    if (num=="day"){
        num=dayno;
        switch (num){
            case 1:
            num="MON";
            break;
            case 2:
            num="TUE";
            break;
            case 3:
            num="WED";
            break;
            case 4:
            num="THU";
            break;
            case 5:
            num="FRI";
            break;
            case 6:
            num="SAT";
            break;
            case 0:
            num="SUN";
            break;
        };
    };
    return num;
};

//SETS DATE, TIME, DAY
function setTimeDate(){
    tyme.innerHTML=dt(tym);
    ampm.innerHTML=am_pm;
    daay.innerHTML=dt(day);
    ddmmyyyy.innerHTML =dt(dmy);
};

//PROGRESS BAR
function progbar(){
    a1.style.strokeDasharray=300+(dt(c)/60)*(584-300)+"%";
    b = (dt(b)==0) ? 0.01 :dt(b);
    a2.style.strokeDasharray=300+(b/60)*(556-300)+"%";
    a = (dt(a)==12) ? 0.001 :dt(a);
    a3.style.strokeDasharray=300+(a/12)*(533-300)+"%";
};

//CHANGES BACKGROUND
axc=(dt(c)/60)*255;
ayc=(dt(c)/60)*127;

setInterval(changeColor,100);
function changeColor(){
x=lnrGrdnt();
document.body.style="background:"+x+";";
};
function lnrGrdnt(){
axc++;
ayc--;
if (axc>360){axc=0};
if (ayc<0){ayc=360};
asz="linear-gradient(30deg,hsl("+axc+",100%,40%),hsl("+ayc+",100%,40%))"
    return asz;
};

100

101

102

103

var am_pm,dayno;

//CALLS DATE PER 0.001S

setInterval(mngr,100);

//MANAGER

function mngr(){

progbar();

setTimeDate();

};

//ONE TIME CALL FOR DATE

dt();

//GET DATE TIME PM AM

function dt(retrnVal){

dateA= new Date();

a=dateA.getHours();

if (a>12){a-=12; am_pm ="PM";}

else{if(a==0){a=12;}; am_pm="AM";};

a=fx(a);

b=fx(dateA.getMinutes());

c=fx(dateA.getSeconds());

dayno=dateA.getDay();

day=fx("day");

date=fx(dateA.getDate());

month=fx(dateA.getMonth()+1);

year=dateA.getFullYear();

tym=a+":"+b+":"+c;

dmy=date+"/"+month+"/"+year;

return retrnVal;

};

//SMALL FIX FOR DATE

function fx(num){

if (num<=9){num="0"+num;};

if (num=="day"){

num=dayno;

switch (num){

case 1:

num="MON";

break;

case 2:

num="TUE";

break;

case 3:

num="WED";

break;

case 4:

num="THU";

break;

case 5:

num="FRI";

break;

case 6:

num="SAT";

break;

case 0:

num="SUN";

break;

};

return num;

};

//SETS DATE, TIME, DAY

function setTimeDate(){

tyme.innerHTML=dt(tym);

ampm.innerHTML=am_pm;

daay.innerHTML=dt(day);

ddmmyyyy.innerHTML =dt(dmy);

};

//PROGRESS BAR

function progbar(){

a1.style.strokeDasharray=300+(dt(c)/60)*(584-300)+"%";

b = (dt(b)==0) ? 0.01 :dt(b);

a2.style.strokeDasharray=300+(b/60)*(556-300)+"%";

a = (dt(a)==12) ? 0.001 :dt(a);

a3.style.strokeDasharray=300+(a/12)*(533-300)+"%";

};

//CHANGES BACKGROUND

axc=(dt(c)/60)*255;

ayc=(dt(c)/60)*127;

setInterval(changeColor,100);

function changeColor(){

x=lnrGrdnt();

document.body.style="background:"+x+";";

};

function lnrGrdnt(){

axc++;

ayc--;

if (axc>360){axc=0};

if (ayc<0){ayc=360};

asz="linear-gradient(30deg,hsl("+axc+",100%,40%),hsl("+ayc+",100%,40%))"

return asz;

};

Thank you for visiting!

We appreciate you for your precious time. I hope you are learn something from here! If you have any queries about this coding comment down below we will reply ASAP.

Keep coding, Keep debugging!

Live Demo Download Code

How to Create an Analog Clock using JavaScript

Live Demo

Also Helpful –

How to Create an Analog Clock using JavaScript

Like this:

Related

Leave a Reply Cancel reply

How to Create an Analog Clock using JavaScript

Live Demo

Also Helpful –

How to Create an Analog Clock using JavaScript

Share this:

Like this:

Related

Leave a Reply Cancel reply