html5andphp: Digital clock

Thursday, 15 August 2013

Digital clock

Making Simple Digital Clock Using Java Script 


<!DOCTYPE html>
<head>
<script>
      setInterval(update, 1000);//It is used to update function every seconds.
function update() //function to find time
{
  var date = new Date();//date variable store all date and time data
  var hours = date.getHours();//store hour
  var minutes = date.getMinutes();//store minutes
  var seconds = date.getSeconds();//store seconds
  if(minutes<10)//it is used to add "0" together 1 to 9
  {                       //such as if second=1 then show 01
  minutes="0"+minutes;
  }
  if(seconds<10)
  {
  seconds="0"+seconds;
  }
 
if(minutes<12) //it is used to show am or pm
  {
  sort1="AM";
  }
  else
  {
  sort1="PM";//it is used to show 12 hours clock
  }
  if(hours>12)
  {
  hours=hours-12;
  }
  document.getElementById("demo").innerHTML="<font size='14'>"+hours+":"+minutes+":"+seconds+":"+sort1+"</font>";//for calling using id in html
}

</script>
<style type="text/css">   //some css used to design clock
.uk
{
border:solid 2px #009933;
display:table;
color:#CC0033;


}
</style>
</head>
<body>
<center>//it is used to show data in centre
</br></br></br></br></br></br></br>
</br></br></br></br></br></br></br>
<div class="uk"> //it is used to call css
uk clock
<div id="demo"></div> //it is used to call java script
</div>
</center>
</body>
</html>

Output

simple output
digital clock

No comments: