Home
Web Development
Simple Digital Clock using JavaScript

Simple Digital Clock using JavaScript

Rajib 23 Jun 2020 Clock, CSS Clock, Digital Clock, JavaScript Digital Clock, Simple Digital Clock

Solution: How to Create a Simple Digital 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

Live Demo

Also Helpful –

Animated Navigation Menu

Fingerрrint Animation Scan

Eyes Follow Mouse

Simple Digital Clock using JavaScript

Description

Back to coding, 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>Simple Digital Clock - Coding Debugging</title>
 
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
    <!-- My Stylesheet -->
    <link rel="stylesheet" href="style.css">
 
</head>

<body>

    <form id="all">
        <div id="test"></div>
        <div id="ttt"></div>
    </form>
    
    <!-- JavaScript Page -->
    <script src="function.js" type="text/javascript"></script>
    
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Simple Digital Clock - Coding Debugging</title>

</head>

<body>

</form>

</body>

</html>

style.css

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

#test{
    text-align:center;
    font-family:serif;
    color:lightslategray;
    letter-spacing:2px;
    font-size:70px;
    text-shadow:5px 3px 25px lightslategray;
    padding:5px;
    border:2px lightsalmon;
    border-radius:30px;
}

#ttt{
    color:lightslategray;
    text-align:center;
    padding:5px;
    border:2px lightsalmon;
    font-family:serif;
    border-radius:30px;
}

#all{
    padding:5px;
    border:5px solid lightsalmon;
    font-family:serif;
    border-radius:30px;
}

#test{

text-align:center;

font-family:serif;

color:lightslategray;

letter-spacing:2px;

font-size:70px;

text-shadow:5px 3px 25px lightslategray;

padding:5px;

border:2px lightsalmon;

border-radius:30px;

}

#ttt{

color:lightslategray;

text-align:center;

padding:5px;

border:2px lightsalmon;

font-family:serif;

border-radius:30px;

}

#all{

padding:5px;

border:5px solid lightsalmon;

font-family:serif;

border-radius:30px;

}

function.js

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

window.onload = function(){
    printTime();
    };
    
function printTime() {
    var d = new Date();
    var hours = d.getHours();
    var mins = d.getMinutes();
    var secs = d.getSeconds();
    var day = d.getDay();
    var date = d.getDate();
    var month = d.getMonth();
    var year = d.getFullYear();
    
        switch (day){
        
            case 0:
                day = "Sunday";
                break;
            case 1:
                day = "Monday";
                break;
            case 2:
                day = "Tuesday";
                break;
            case 3:
                day = "Wednesday";
                break;
            case 4:
                day = "Thursday";
                break;
            case 5:
                day = "Friday";
                break;
            case 6:
                day = "Saturday";
                break;
            }
    
    
        if(hours<10){
            hours = "0" + hours;
        }
        if(mins<10){
            
            mins = "0" + mins;
        }
        if(secs<10){

            secs = "0" + secs;
        }
    
month = month + 1; document.getElementById("test").innerHTML = hours+":"+mins+":"+secs;
document.getElementById("ttt").innerHTML = day + ", " + date + "/" + month + "/" + year;
}

setInterval(printTime, 1000);

window.onload = function(){

printTime();

};

function printTime() {

var d = new Date();

var hours = d.getHours();

var mins = d.getMinutes();

var secs = d.getSeconds();

var day = d.getDay();

var date = d.getDate();

var month = d.getMonth();

var year = d.getFullYear();

switch (day){

case 0:

day = "Sunday";

break;

case 1:

day = "Monday";

break;

case 2:

day = "Tuesday";

break;

case 3:

day = "Wednesday";

break;

case 4:

day = "Thursday";

break;

case 5:

day = "Friday";

break;

case 6:

day = "Saturday";

break;

}

if(hours<10){

hours = "0" + hours;

}

if(mins<10){

mins = "0" + mins;

}

if(secs<10){

secs = "0" + secs;

}

month = month + 1; document.getElementById("test").innerHTML = hours+":"+mins+":"+secs;

document.getElementById("ttt").innerHTML = day + ", " + date + "/" + month + "/" + year;

}

setInterval(printTime, 1000);

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

Simple Digital Clock using JavaScript

Live Demo

Also Helpful –

Simple Digital Clock using JavaScript

Like this:

Related

Leave a Reply Cancel reply

Simple Digital Clock using JavaScript

Live Demo

Also Helpful –

Simple Digital Clock using JavaScript

Share this:

Like this:

Related

Leave a Reply Cancel reply