
In this tutorial, I will teach you how to create a Live watch using jQuery, HTML, and CSS.
Step 1: Create an HTML file.
In this step, We will create an HTML file livewatch.html and put the below code.
<!DOCTYPE html>
<html>
<head>
<title>Live Watch</title>
</head>
<body>
<div class="digital-clock">00:00:00</div>
</body>
</html>
Step 2: Put jQuery in your file.
Now, Open your file put the below jQuery code in the ending of the file.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
clockUpdate();
setInterval(clockUpdate, 1000);
})
function clockUpdate() {
var date = new Date();
$('.digital-clock').css({'color': '#32a2a8', 'text-shadow': '0 0 6px #ff0'});
function addZero(x) {
if (x < 10) {
return x = '0' + x;
} else {
return x;
}
}
function twelveHour(x) {
if (x > 12) {
return x = x - 12;
} else if (x == 0) {
return x = 12;
} else {
return x;
}
}
var h = addZero(twelveHour(date.getHours()));
var m = addZero(date.getMinutes());
var s = addZero(date.getSeconds());
$('.digital-clock').text(h + ':' + m + ':' + s)
}
</script>
Final Code:
<!DOCTYPE html>
<html>
<head>
<title>Live Watch</title>
</head>
<body>
<div class="digital-clock">00:00:00</div>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
clockUpdate();
setInterval(clockUpdate, 1000);
})
function clockUpdate() {
var date = new Date();
$('.digital-clock').css({'color': '#32a2a8', 'text-shadow': '0 0 6px #ff0'});
function addZero(x) {
if (x < 10) {
return x = '0' + x;
} else {
return x;
}
}
function twelveHour(x) {
if (x > 12) {
return x = x - 12;
} else if (x == 0) {
return x = 12;
} else {
return x;
}
}
var h = addZero(twelveHour(date.getHours()));
var m = addZero(date.getMinutes());
var s = addZero(date.getSeconds());
$('.digital-clock').text(h + ':' + m + ':' + s)
}
</script>
<style type="text/css">
@font-face {
font-family: 'DIGITAL';
src: url('https://cssdeck.com/uploads/resources/fonts/digii/DS-DIGII.TTF');
}
html {
height: 100%;
}
.digital-clock {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 200px;
height: 60px;
color: #3ebdbd;
border: 2px solid #999;
border-radius: 4px;
text-align: center;
font: 50px/60px 'DIGITAL', Helvetica;
background: linear-gradient(90deg, #000, #555);
}
</style>
Output:

Awesome post! Keep up the great work! 🙂
Thanks for appreciating.
Great content! Super high-quality! Keep it up! 🙂
Thanks for appreciating.