Digital clock
So hello guys welcome to My Blog codingmastermindd. This Blog helps a Java script beingners and create first project so welcome again my self TARUN GHRITALAHRE your Blog host and writer to let's start.
....................................................................................
1. First step define a HTML documents
2. Use I'd attribute for div tag and define clock value. Any one time to select this example 8:5:33.
3. Use to style tag to create css style sheet and design your CLOCK.
4. Use to script tag this tag store a Java script value and start main coding.
******************************************
CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content=
"width=device-width,
initial-scale=1.0" />
<title>Digital Clock</title>
<style>
#clock {
font-size: 175px;
width: 900px;
margin: 200px;
text-align: center;
border: 2px solid black;
border-radius: 20px;
}
</style>
</head>
<body>
<div id="clock">8:10:45</div>
<script>
setInterval(showTime, 1000);
function showTime() {
let time = new Date();
let hour = time.getHours();
let min = time.getMinutes();
let sec = time.getSeconds();
am_pm = "AM";
if (hour > 12) {
hour -= 12;
am_pm = "PM";
}
if (hour == 0) {
hr = 12;
am_pm = "AM";
}
hour = hour < 10 ? "0" + hour : hour;
min = min < 10 ? "0" + min : min;
sec = sec < 10 ? "0" + sec : sec;
let currentTime = hour + ":"
+ min + ":" + sec + am_pm;
document.getElementById("clock")
.innerHTML = currentTime;
}
showTime();
</script>
</body>
</html>
°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°
OUT PUT
ADS
Posts
.jpeg)
.jpg)
.jpeg)
0 Comments