---------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clock</title>
</head>
<!-- <body onload="updateClock(); setInterval('updateClock()',1000) "> -->
<body>
<h2>Digital Clock</h2>
<div class="clock" id="clock">
</div>
<!-- java script -->
<!-- <script src="index.js"></script> -->
<script src="clock.js"></script>
</body>
</html>
clock.js :
------------
console.log("this is clock");
function updateClock() {
// get the cuurent data
let currentTime = new Date();
// extracting hour , min and time
let currentHour = currentTime.getHours();
let currentMinute = currentTime.getMinutes();
let currentSecond = currentTime.getSeconds();
// adding extra '0' if time is single digit
// currentHour = (currentHour < 10 ? "0" : "") + currentHour;
currentMinute = (currentMinute < 10 ? "0" : "") + currentMinute;
currentSecond = (currentSecond < 10 ? "0" : "") + currentSecond;
// appending AM or PM
let timeOfDay = currentHour < 12 ? "AM" : "PM";
// converting 24 hr clock to 12 hour clock
currentHour = (currentHour >12) ? currentHour - 12 : currentHour
currentHour = (currentHour == 0) ? 12 : currentHour;
currentHour = (currentHour < 10 ? "0" : "") + currentHour;
// prepeatng time string
let currentTimeStr = currentHour + ":" + currentMinute + ":" + currentSecond + " " + timeOfDay;
// console.log(currentTimeStr);
// inserting time string into dom
document.getElementById("clock").innerHTML = currentTimeStr;
}
window.onload =
setInterval(() => {
updateClock();
}, 1000);
0 Comments