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

<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..

#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..

Latest

Wednesday, May 2, 2018

javascript digital clock with date