The X-Lab - Experimental Development Repository

Alarm Clock
Category: time/date
Language: HTML/Javascript
Description:
General alarm clock/timer with sound and digital display.
Download: alarm.zip
Source Code:
<!--### Written by Micah Atwell - www.micahatwell.com/xlab ###-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
   <title></title>
   <style type="text/css">
      body{background-color:#ccc;}
      table{width:100%;}
      td{font:75% Arial;}
      td.descr{font-size:10px;}
      input[type=reset],input[type=button]{background-color:#000;color:#ccc;border:solid #fff 1px;font-weight:bold;}
      #tblSettings{width:100%;border:solid #999 0px;border-bottom-width:2px;padding-bottom:5px;margin-bottom:5px;}
      #tblClock{width:100%;}
         #tblClock td{width:100%;text-align:center;}
      #clockShell{margin:3px auto;width:148px;height:34px;padding-top:2px;border:solid #fff 2px;background-color:#000;
         text-align:center;}
      #clockShell img{width:16px;height:32px;margin:0px;border:none;}
   </style>
   <script type="text/javascript">
      var
         struct=new Array("H1","H2","sep","M1","M2","sep","S1","S2"),
         F=null,
         clock=null,
         aud=null,
         tID=null,
         nd=null,
         hmsThen=null,
         hmsNow=null;
      function pad(n){return(n<10 && n.length!=2)?"0"+n:n;}
      function validate(){
         var c=null;
         if(F.tHH.value==""||isNaN(F.tHH.value)){F.tHH.value="00";c++;}
         if(F.tMM.value==""||isNaN(F.tMM.value)){F.tMM.value="00";c++;}
         if(F.tSS.value==""||isNaN(F.tSS.value)){F.tSS.value="00";c++;}
         if(c==3)return false;
         if(F.tHH.value+F.tMM.value+F.tSS.value==0)return false;
         if(isNaN(F.vol.value)||F.vol.value>100)F.vol.value=100;
         return true;
      }
      function initClock(){
         var out="";
         for(var i=0;i<struct.length;i++)
            out+="<img id='"+struct[i]+"' src='clock"+((struct[i]!="sep")?"0":"Sep")+".gif' alt=''>";
         clock.innerHTML=out;
      }
      function updateClock(){
         var
            dif=hmsThen-hmsNow,
            t=new Array();
         if(dif<0)return false;
         with(Math){
            t[0]=floor(dif/1000/60/60);
            t[1]=floor((dif-=(t[0]*3600000))/1000/60);
            t[2]=floor((dif-=(t[1]*60000))/1000);
         }
         cStr=pad(t[0])+":"+pad(t[1])+":"+pad(t[2]);
         for(var i=0;i<cStr.length;i++)document.getElementById(struct[i]).src="clock"+((cStr[i]==":")?"Sep":cStr[i])+".gif";
      }
      function alarmBtn(st){
         if(st==0){
            F.alarmBtn.value="Stop Alarm";
            F.alarmBtn.onclick=function(){alarmStop();}
         }else{
            F.alarmBtn.value="Set Alarm";
            F.alarmBtn.onclick=function(){if(validate())alarmStart();}
         }
      }
      function alarmStart(){
         var
            h=Number(F.tHH.value),
            m=Number(F.tMM.value),
            s=Number(F.tSS.value),
            mode=null;
         alarmBtn(0);
         for(var i in F.alarmMode)if(F.alarmMode[i].checked)mode=F.alarmMode[i].value;
         if(mode=="reached"){
            if(F.ampm.options[F.ampm.selectedIndex].value=="pm")h+=12;
            nd=new Date();
            hmsThen=Date.parse(new Date(nd.getFullYear(),nd.getMonth(),nd.getDate(),h,m,s));
            tID=setInterval("checkTime();",1000);
         }else if(mode=="elapsed"){
            hmsThen=Date.parse(new Date())+(((h*3600)+(m*60)+s)*1000);
            tID=setInterval("checkTime();",1000);
         }
      }
      function alarmStop(){
         clearInterval(tID);
         alarmBtn(1);
         //alert("Stopped!");
      }
      function audioStop(){
         aud.innerHTML="";
      }
      function alarmTrigger(){
         aud.innerHTML="<object data='http://url/to/alarm.mp3' type='audio/x-mpeg' "+
            "style='width:80px;height:25px;vertical-align:middle;'><param name='AutoStart' value='true'>"+
            "<param name='loop' value='"+((F.loop.checked)?1:0)+"'><param name='volume' value='"+F.vol.value+"'></object>"+
            "<input type='button' value='stop sound' onclick='audioStop();'>";
      }
      function checkTime(){
         hmsNow=Date.parse(new Date());
         updateClock();
         //F.dump.value=hmsNow+"\n"+hmsThen;
         if(hmsNow>=hmsThen){
            clearInterval(tID);
            alarmTrigger();
         }
      }
      function OL(){
         F=document.forms[0];
         clock=document.getElementById("clockShell");
         aud=document.getElementById("alarmAud");
         initClock();
      }
      window.onload=OL;
   </script>
</head>
<body>
<form method="post" action="javascript:void(0);">
<table id="tblSettings">
   <tr>
      <td>Alarm Time:</td>
      <td nowrap="nowrap">
         <input type="text" name="tHH" size="2" value="00"> :
         <input type="text" name="tMM" size="2" value="00"> :
         <input type="text" name="tSS" size="2" value="00"><br>
      </td>
      <td class="descr">Specify hours, minutes, and/or seconds.</td>
   </tr>
   <tr>
      <td>Alarm Mode:</td>
      <td nowrap="nowrap">
         <label for="rad1"><input type="radio" id="rad1" name="alarmMode" value="elapsed" checked onclick="
            this.form.ampm.disabled=(this.checked)?true:false;
         ">elapsed</label><br>
         <label for="rad2"><input type="radio" id="rad2" name="alarmMode" value="reached" onclick="
            this.form.ampm.disabled=(this.checked)?false:true;
         ">reached</label>
         <select name="ampm" disabled>
            <option value="am" selected>AM
            <option value="pm">PM
         </select>
      </td>
      <td class="descr">
         Elapsed: alarm fires after specified time has elapsed. Use for setting alarm to fire "10 minutes from now".<br>
         Reached: alarm fires when specified time is reached. Use for setting alarm to fire "At 7:09pm".
      </td>
   </tr>
   <tr>
      <td>Alarm Options:</td>
      <td nowrap="nowrap"><input type="text" name="vol" value="100" size="3" maxlength="3"> volume (1-100)</td>
      <td><label for="chk1"><input type="checkbox" id="chk1" name="loop" checked>loop</label></td>
   </tr>
</table>
<table id="tblClock">
   <tr>
      <td>
         <input type="button" name="alarmBtn" value="Set Alarm" onclick="if(validate())alarmStart();">
         <input type="reset">
         <div id="clockShell"></div>
         <div id="alarmAud"></div>
      </td>
   </tr>
</table>
</form>
</body>
</html>