html5andphp: java script

Showing posts with label java script. Show all posts
Showing posts with label java script. Show all posts

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