javascript digital clock with date - Web Development and Web Design Codes

Latest

Wednesday, May 2, 2018

javascript digital clock with date

,

JavaScript digital clock with date

JavaScript Digital Clock with Date
JavaScript Digital Clock with Date
in this JavaScript Examples we are going to learn how to create a super digital clock with date using JavaScript and jQuery...
this is very easy and beginners Friendly Codes it will help you to understand how to create a super JavaScript digital clock with jquery..

 just use the below codes to create a super javascript digital clock..

clock.html
?
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
56
57
58
59
60
61
62
63
<html>
<head>
<title>JavaScript Digital Clock with Date</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];
var dayNames= ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]
var meridiem="AM";
var newDate = new Date();
newDate.setDate(newDate.getDate());   
$('#Date').html(dayNames[newDate.getDay()] + " " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ' ' + newDate.getFullYear());
  
setInterval( function() {
 var seconds = new Date().getSeconds();
 $("#sec").html(( seconds < 10 ? "0" : "" ) + seconds);
 },1000);
   
setInterval( function() {
 var minutes = new Date().getMinutes();
 $("#min").html(( minutes < 10 ? "0" : "" ) + minutes);
    },1000);
   
setInterval( function() {
 var hours = new Date().getHours();
 if (hours == 0) {
  hours = 12;
 } else if (hours > 12) {
  hours = h - 12;
  meridiem="PM";
 }
 $("#hours").html(( hours < 10 ? "0" : "" ) + hours);
    }, 1000);
  setInterval( function() {
 var hours = new Date().getHours();
 if (hours == 0) {
  hours = 12;
 } else if (hours > 12) {
  hours = h - 12;
  meridiem="PM";
 }
 $("#ampm").html("&#10172"+meridiem);
    }, 1000);
});
</script>
 <body>
 <div id="clockbody">
<div class="clock">
<div id="Date"></div>
<ul>
    <li id="hours"> </li>
    <li id="point">:</li>
    <li id="min"> </li>
    <li id="point">:</li>
    <li id="sec"> </li>
 <li id="ampm"> </li>
</ul>
</div>
</div>
 </body>
</html>

Create a style.css file to style our digital clock..
?
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
#clockbody{
  background:#202020;
  font:italic 5px Arial, Helvetica, sans-serif;
  margin:auto;
  width:960px;
  color:black;
}
a {
 text-decoration:none;
 color:#00c6ff;
}
  
h1 {
 font: 4em normal Arial, Helvetica, sans-serif;
 padding: 20px; margin: 0;
 text-align:center;
}
  
h1 small{
 font: 0.2em normal  Arial, Helvetica, sans-serif;
 text-transform:uppercase; letter-spacing: 0.2em; line-height: 5em;
 display: block;
}
  
h2 {
    font-weight:700;
    color:#bbb;
    font-size:20px;
}
  
h2, p {
 margin-bottom:10px;
}
 
  
.clock {
     float:left;
  width:300px;
  margin: auto;
  color:black;
  }
  
#Date {
       float:left;
    font-family:'BebasNeueRegular', Arial, Helvetica, sans-serif;
    font-size:20px;
    text-align:center;
    text-shadow:0 0 5px #00c6ff;
    }
  
ul {
 width:500px;
    margin:auto;
    list-style:none;
    padding:0px;
    float:left;
 }
ul li {
float:left;
font-size:10em;
text-align:center;
font-family:'BebasNeueRegular', Arial, Helvetica, sans-serif;
text-shadow:0 0 5px #00c6ff; }
  
#point {
position:relative;
color:red;
-moz-animation:mymove 1s ease infinite;
-webkit-animation:mymove 1s ease infinite;
padding-left:10px; padding-right:10px; }
 
@-webkit-keyframes mymove
{
0% {opacity:1.0; text-shadow:0 0 20px #00c6ff;}
50% {opacity:0; text-shadow:none; }
100% {opacity:1.0; text-shadow:0 0 20px #00c6ff; }
}
@-moz-keyframes mymove
{
0% {opacity:1.0; text-shadow:0 0 20px #00c6ff;}
50% {opacity:0; text-shadow:none; }
100% {opacity:1.0; text-shadow:0 0 20px #00c6ff; }
}

That's it friends how to create JavaScript digital clock with date..if you like this please share with your friends..Thank you for visiting..
Read more

Subscribe via email

Ads Here
BANNER 728X90
Newer Article JavaScript countdown timer code Older Article JavaScript Digital Clock Example
By v�o l�c
Labels: ,

1 comment:

  1. Omprakash DoyeMay 16, 2018 at 2:59 AM

    This is what i was looking for thanks for sharing amazing post with great & helpful information keep up great work

    ReplyDelete

Thank You for Your Comment

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

Subscribe to: Post Comments (Atom)