Set current time using javascript for websites | 2my4edge

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. 
current-time-using-javascript
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>

I hope this code is really helpful to you.


RELATED POSTS:

Change background image while page refresh using Javascript

My Demos page design details with all my tutorials

Most popular posts in 2my4edge


No comments:

Post a Comment

^