Alarm Clock

Example:-

#jsalarmclock{
font-family: Tahoma;
font-weight: bold;
font-size: 12px;
}

#jsalarmclock div{
margin-bottom: 0.8em;
}

#jsalarmclock div.leftcolumn{
float: left;
width: 150px;
font-size: 13px;
background-color: lightyellow;
clear: left;
}

#jsalarmclock span{
margin-right: 5px;
}

</style><br />
<br />
<script type="text/javascript">

/***********************************************

* JavaScript Alarm Clock- by Shubham kumar (www.allthingforwebsitedesigner.blogspot.com)
* This notice must stay intact for usage
* Visit All thing For Website Designer at http://www.allthingforwebsitedesigner.blogspot.com/ for this script and 100s more

***********************************************/

var jsalarm={
 padfield:function(f){
  return (f<10)? "0"+f : f
 },
 showcurrenttime:function(){
  var dateobj=new Date()
  var ct=this.padfield(dateobj.getHours())+":"+this.padfield(dateobj.getMinutes())+":"+this.padfield(dateobj.getSeconds())
  this.ctref.innerHTML=ct
  this.ctref.setAttribute("title", ct)
  if (typeof this.hourwake!="undefined"){ //if alarm is set
   if (this.ctref.title==(this.hourwake+":"+this.minutewake+":"+this.secondwake)){
    clearInterval(jsalarm.timer)
    window.location=document.getElementById("musicloc").value
   }
  }
 },
 init:function(){
  var dateobj=new Date()
  this.ctref=document.getElementById("jsalarm_ct")
  this.submitref=document.getElementById("submitbutton")
  this.submitref.onclick=function(){
   jsalarm.setalarm()
   this.value="Alarm Set"
   this.disabled=true
   return false
  }
  this.resetref=document.getElementById("resetbutton")
  this.resetref.onclick=function(){
  jsalarm.submitref.disabled=false
  jsalarm.hourwake=undefined
  jsalarm.hourselect.disabled=false
  jsalarm.minuteselect.disabled=false
  jsalarm.secondselect.disabled=false
  return false
  }
  var selections=document.getElementsByTagName("select")
  this.hourselect=selections[0]
  this.minuteselect=selections[1]
  this.secondselect=selections[2]
  for (var i=0; i<60; i++){
   if (i<24) //If still within range of hours field: 0-23
   this.hourselect[i]=new Option(this.padfield(i), this.padfield(i), false, dateobj.getHours()==i)
   this.minuteselect[i]=new Option(this.padfield(i), this.padfield(i), false, dateobj.getMinutes()==i)
   this.secondselect[i]=new Option(this.padfield(i), this.padfield(i), false, dateobj.getSeconds()==i)

}
  jsalarm.showcurrenttime()
  jsalarm.timer=setInterval(function(){jsalarm.showcurrenttime()}, 1000)
 },
 setalarm:function(){
  this.hourwake=this.hourselect.options[this.hourselect.selectedIndex].value
  this.minutewake=this.minuteselect.options[this.minuteselect.selectedIndex].value
  this.secondwake=this.secondselect.options[this.secondselect.selectedIndex].value
  this.hourselect.disabled=true
  this.minuteselect.disabled=true
  this.secondselect.disabled=true
 }
}

</script>

Step 2: Insert the below into the section of your page:

Donate Now

Respected Readers:
Respected Readers: As a 21 year old student, the only income I rely on is my pocket money. Bearing the running costs of MBT Blog has become really difficult. We educate thousands of bloggers a week with our tutorials. To help us go forward with the same spirit, a small contribution from your side will highly be appreciated.

Kindly Bookmark this Post using your favorite Bookmarking service: