JavaScript Digital Clock Example - Web Development and Web Design Codes

Latest

Wednesday, May 2, 2018

JavaScript Digital Clock Example

JavaScript Digital Clock Example

JavaScript Digital Clock
JavaScript Digital Clock
Hi Friends i hope you are doing well..In this lesson we are going to learn how to create a nice live digital clock with JavaScript .. you can setup this JavaScript Clock to your website to show live time..
use the below codes to create JavaScript Digital Clock..

JavaScript Digital Clock:

Create simple clock.html page and save the below codes..
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<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..
Read more

Subscribe via email

Ads Here
BANNER 728X90
Newer Article javascript digital clock with date Older Article javascript password protect page with JavaScript Prompt
By v�o l�c
Labels:

No comments:

Post a Comment

Thank You for Your Comment

Note: Only a member of this blog may post a comment.

Subscribe to: Post Comments (Atom)