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

No comments:

Post a Comment

Thank You for Your Comment