JavaScript Digital Clock Example
 |
| JavaScript Digital Clock |
use the below codes to create JavaScript Digital Clock..
JavaScript Digital Clock:
Create simple clock.html page and save the below codes..<html>
<head>
<title>JavaScript Digital Clock Example</title>
<style>
#Clock{
width:600px;
margin:auto;
background:#ccc;
}
.clockStyle {
display: inline;
font-size: 5em;
text-align: center;
font-style:italic;
font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
text-shadow: 0 0 5px #00c6ff;
}
</style>
<script>
function DigitalClock() {
var currentTime = new Date();
var meridiem = "AM";
var h = currentTime.getHours();
var m = currentTime.getMinutes();
var s = currentTime.getSeconds();
setTimeout('DigitalClock()',1000);
if (h == 0) {
h = 12;
} else if (h > 12) {
h = h - 12;
meridiem="PM";
}
if (h < 10) {
h = "0" + h;
}
if (m < 10) {
m = "0" + m;
}
if (s < 10) {
s = "0" + s;
}
var myClock = document.getElementById('clockDisplay');
myClock.textContent = h + ":" + m + ":" + s + " " + meridiem;
myClock.innerText = h + ":" + m + ":" + s + " " + meridiem;
}
DigitalClock();
</script>
</head>
<body>
<div id="Clock">
<h2> JavaScript Digital Clock</h2>
<div id="clockDisplay" class="clockStyle"></div>
</div>
</body>
</html>
That's it Friends how to create a nice and Dynamic Digital Clock with JavaScript..
if you like this post please share with your friends..Thank You..
No comments:
Post a Comment
Thank You for Your Comment
Note: Only a member of this blog may post a comment.