Digital Clock in JS

Source Code:

<!DOCTYPE html>
<html>
	<head>
		<title>JS - Digital Clock</title>
		<style type="text/css">
		  body{
			  background: #000;
		  }
		  .clock{
			  position: absolute;
			  top: 50%;
			  left: 50%;
			  transform: translateX(-50%) translateY(-50%);
			  color: #fff;
			  font-size: 80px;
			  border: 1px solid #ccc;
			  padding: 0px 5px 0px 5px;
		  }
		</style>
	</head>
	<body>
		<div id="MyClockDisplay" class="clock"></div>
		<script type="text/javascript">
 
			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>

Sam’s Blog

One Reply to “Digital Clock in JS”

Leave a Reply to haval Cancel reply