Set current time using javascript for websites

02 July 2014

Set current time using javascript for websites

Set current time using javascritpt, most of the websites need time to display time in their website, for that, here we are going 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 timewidget.

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>