JavaScript Simple Digital Clock Example

In this project we will be building a digital clock in JavaScript using Bracket. By the end of this project we will have very simple digital clock that you can enhance and upgrade on your own.

JavaScript Digital Clock Code (Example 1):


<!doctype>
<html>
<head>
<meta charset="utf-8">
<title>Simple Digital Clock</title>
</head>
 
<body>
<h1>Your PC Time: <span id="layer"> </span></h1>
 
 

<script>
var clockLayer = document.getElementById("layer");
 
 
function format(val) {
var toString = val.toString();
if (toString.length === 1) {
return "0" + toString;
} else {
return toString;
}
}
 
function updateClock() {
var dd = new Date();
var hh = dd.getHours();
var mm = dd.getMinutes();
var ss = dd.getSeconds();
clockLayer.textContent = format(hh) + ":" + format(mm) + ":" + format(ss);
}
 
setInterval(updateClock, 1000);
 
</script> 
</body>
</html>

<!doctype>

<html>

<head>

<title>Simple Digital Clock</title>

</head>

<body>

var clockLayer = document.getElementById("layer");

function format(val) {

var toString = val.toString();

if (toString.length === 1) {

return "0" + toString;

} else {

return toString;

}

function updateClock() {

var dd = new Date();

var hh = dd.getHours();

var mm = dd.getMinutes();

var ss = dd.getSeconds();

clockLayer.textContent = format(hh) + ":" + format(mm) + ":" + format(ss);

}

setInterval(updateClock, 1000);

</script>

</body>

</html>

JavaScript Digital Clock Example 2:


<!doctype>
<html>
<head>
<meta charset="utf-8">
<title>Simple Digital Clock</title>
<link href="https://fonts.googleapis.com/css?family=Cuprum" rel="stylesheet">
<style>
    body {
        background: black;
        font-family: 'Cuprum', sans-serif;

    }

    .clock {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        color: #17D4FE;
        font-size: 60px;
        letter-spacing: 7px;
    }
</style>
</head>
 
<body>
<div id="MyClockDisplay" class="clock"></div>
 
 
https://codepen.io/afarrar/pen/JRaEjP
<script>
function showTime(){
    var date = new Date();
    var h = date.getHours(); // 0 - 23
    var m = date.getMinutes(); // 0 - 59
    var s = date.getSeconds(); // 0 - 59
    var session = "AM";
    
    if(h == 0){
        h = 12;
    }
    
    if(h > 12){
        h = h - 12;
        session = "PM";
    }
    
    h = (h < 10) ? "0" + h : h;
    m = (m < 10) ? "0" + m : m;
    s = (s < 10) ? "0" + s : s;
    
    var time = h + ":" + m + ":" + s + " " + session;
    document.getElementById("MyClockDisplay").innerText = time;
    document.getElementById("MyClockDisplay").textContent = time;
    
    setTimeout(showTime, 1000);
    
}

showTime();
</script> 
</body>
</html>

<!doctype>

<html>

<head>

<title>Simple Digital Clock</title>

<style>

body {

background: black;

font-family: 'Cuprum', sans-serif;

}

.clock {

position: absolute;

top: 50%;

left: 50%;

transform: translateX(-50%) translateY(-50%);

color: #17D4FE;

font-size: 60px;

letter-spacing: 7px;

}

</style>

</head>

<body>

https://codepen.io/afarrar/pen/JRaEjP

function showTime(){

var date = new Date();

var h = date.getHours(); // 0 - 23

var m = date.getMinutes(); // 0 - 59

var s = date.getSeconds(); // 0 - 59

var session = "AM";

if(h == 0){

h = 12;

}

if(h > 12){

h = h - 12;

session = "PM";

}

h = (h < 10) ? "0" + h : h;

m = (m < 10) ? "0" + m : m;

s = (s < 10) ? "0" + s : s;

var time = h + ":" + m + ":" + s + " " + session;

document.getElementById("MyClockDisplay").innerText = time;

document.getElementById("MyClockDisplay").textContent = time;

setTimeout(showTime, 1000);

}

showTime();

</script>

</body>

</html>

Source:

codepen.io/afarrar/pen/JRaEjP

JavaScript Simple Digital Clock Example2 min read

Leave a Comment X

You may also like

Leave a Comment X