Display current time in website using JavaScript

Set / Display current time using JavaScript, Most of the websites are displaying time in their website, for that, here we are going to see how to set simple JavaScript digital timer in our website. It is one of the simple one. let see the coding. 

DOWNLOAD          LIVE DEMO

usually we know the coding to find the date in JavaScript. when we are using Date() in javascript that shows the date in webpage. from that we have split that code to show the time alone. let see the detailed script code to time widget.

CODE

 <div class="timewidget">
  <script type="text/javascript">
    function ctime(){
    if (!document.getElementById)
    return
    timeElement=document.getElementById("timeid")
    var curdate=new Date()
    var hours=curdate.getHours()
    var minutes=curdate.getMinutes()
    var seconds=curdate.getSeconds()
    var DayNight="PM"
    if (hours<12) DayNight="AM";
    if (hours>12) hours=hours-12;
    if (hours==0) hours=12;
    if (minutes<=9) minutes="0"+minutes;
    if (seconds<=9) seconds="0"+seconds;
    var ctime=hours+":"+minutes+":"+seconds+" "+DayNight;
    timeElement.innerHTML="<p class='time'>"+ctime+"</p>"
    setTimeout("ctime()",1000)
    }
    window.onload=ctime
  </script>
  <p class="headtime"> Current time is </p>
  <span id=timeid></span>
</div>

CSS

<style media="all" type="text/css">
* {
    margin:0 auto;
    padding:0px;
    width:100%;
    background-color:#53C66C;
}
.timewidget {
    margin-top:10%;
    min-width:25%;
}
.time {
    font-family:Tahoma, Geneva, sans-serif;
    text-align:center;
    font-size:30px;
    color:#750075;
    font-weight:bold;
}
.headtime {
    font-size:16px;
    text-align:center;
    text-transform:uppercase;
    color:#036;
    font-weight:bold;
}
</style>

I hope this code is really helpful to you. Thanks for visiting. Keep in touch with us for more tutorial.