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>