Simple Digital Clock Application - Education

Simple Digital Clock Application - Education - Nairaland

Nairaland Forum › Nairaland General › Education › Simple Digital Clock Application (361 Views)

Simple Digital Clock Application by ProsperChild(op): 4:23am On Dec 26, 2019

Time display is a significant item in web page appearance. Fortunately, JavaScript has enabled us to encounter this issue. We could use "if statement" of JavaScript to make a simple clock application.
Now, open your favorite Text Editor and type the codes below:

<html>
<head>
<style>
.time {
height: 100px;
width: 250px;
color: red;
background-color: yellow;
font-family: arial;
font-size: 300%;
font-weight: bolder;
text-align: center;
border: 6px solid red;
margin-top: 50px;
}
p {
color: black;
font-family: arial;
font-size: 150%;
font-weight: bolder;
text-align: center;
}
</style>
</head>
<body>
<center>
<div class="wrapper">
<form name="Tick">
<input class="time" type="text" name="Clock">
</form>
</div>
</center>
<script>
function show () {
var Digital=new Date ()
var hours=Digital.getHours ()
var minutes=Digital.getMinutes ()
var seconds=Digital.getSeconds ()
var dn=" "
if (hours>12) {
dn=" "
hours=hours-12
}
if (hours==o)
hours=12
if (minutes<=9)
minutes="0"+minutes
if (seconds<=9)
seconds="0"+seconds
document.Tick.Clock.value=
hours+":"+minutes+":"+seconds+" "+dn
setTimeout ("show ()",1000)
}
show ()
</script>
<p>Simple Digital Clock Application</p>
</body>
</html>
Save the file above with name digital_clock.html
Thus its extension is *.html
To see the result we could open directly with browser or upload it firstly to Localhost and then type in the searching box of the browser http://
localhost/digital_clock.html

1 Like

1 Reply

How Did The People That Created The First CLOCK Know What Time It Was? Picture • The Ultimate Riddle Challenge: Can You Beat The Clock • What's The Meaning Of The ''O" In O' Clock • 2 • 3 • 4

What Are The Best Certifications For Cybersecurity Freshers? • Looking For Good Secondary School In Ogun State • ESUT Lecturer Seen Flogging Final Year Students Of Business Administration