Create a simple digital clock using CSS and Pure JavaScript

Here is how to create a simple Simple Digital Clock using CSS and Pure JavaScript.
Include the following CSS:

 <style>
 #clock{
 background-color:#292929;
 width:220px;
 color:#ffffff;
 padding:20px;
 font-size:50px;
 text-align:center;
 border-radius: 15px;
 text-shadow: 2px 2px #4e4c4c;

 }
 .clockWrapper{
 background-color: #c4c5c7;
 border-radius: 15px;
 padding:20px;
 width: 260px;
 box-shadow: 6px 6px 25px #333;
 margin:auto;
 }
 </style>

This is the the HTML and JavaSript:

<body onload="startTime()">
 <div class="clockWrapper">
 <div id="clock">
 </div>
 </div>
 <script type="text/javascript">
 function startTime() {
 var today = new Date();
 var h = today.getHours();
 var m = today.getMinutes();
 var s = today.getSeconds();
 m = checkTime(m);
 s = checkTime(s);
 document.getElementById('clock').innerHTML =
 h + ":" + m + ":" + s;
 var t = setTimeout(startTime, 500);
 }
 function checkTime(i) {
 if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
 return i;
 }
 </script>
</body> 

 

 

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInEmail this to someonePin on PinterestShare on Reddit