The X-Lab - Experimental Development Repository

Hours:Minutes:Seconds Calculator
Category: calculator
Language: HTML/Javascript
Description:
Add or subtract times in HH:MM:SS format w/o need to convert times into seconds (used for finding total playtime of multiple tracks)
Preview
Source Code:
<!--### Written by Micah Atwell - www.micahatwell.com/xlab ###-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
   <title>Hours/Minutes/Seconds Calculator</title>
   <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
   <style type="text/css">
      td{font-family:monospace;font-size:0.9em;}
      input{font-family:monospace;font-size:1em;}
      .nulfldD{border:solid #999999;border-width:2px;background-color:#e6e6e6;color:#000;padding-left:2px;}
      .nulfld{border:solid #999999;border-width:2px;padding-left:2px;}
      .btn{width:55;text-align:center;}
   </style>
   <script language="javascript" type="text/javascript">
      <!--
         function calcAdd(thisForm){
            vals=getVals(thisForm);
            var h3=vals[0]+vals[1],m3=vals[2]+vals[3],s3=vals[4]+vals[5];
            if(s3>59){m3++;s3=s3%60;}
            if(m3>59){h3++;m3=m3%60;}
            prepReturnVals(thisForm,h3,m3,s3);
         }
         function calcSub(thisForm){
            vals=getVals(thisForm);
            var h3=vals[0]-vals[1],m3=vals[2]-vals[3],s3=vals[4]-vals[5];
            if(s3<0){m3--;s3+=60;}
            if(m3<0){h3--;m3+=60;}
            if(h3<0)h3=0;
            prepReturnVals(thisForm,h3,m3,s3);
         }
         function getVals(thisForm){
             return new Array(
               Number(thisForm.oH.value),
               Number(thisForm.iH.value),
               Number(thisForm.oM.value),
               Number(thisForm.iM.value),
               Number(thisForm.oS.value),
               Number(thisForm.iS.value)
            );
         }
         function prepReturnVals(thisForm,h3,m3,s3){
            var t=new Array(h3,m3,s3);
            for(i=0;i<3;i++)if(t[i]<10)t[i]="0"+t[i];
            thisForm.oH.value=t[0];
            thisForm.oM.value=t[1];
            thisForm.oS.value=t[2];
            thisForm.iH.focus();
            thisForm.iH.value="";
            thisForm.iM.value="";
            thisForm.iS.value="";
         }
         function getKey(e){
            if(br=="?")return false;
            ekc=(br=="IE")?event.keyCode:e.which;
            if(ekc==187||ekc==107)document.forms[0].btnAdd.click();
            else if(ekc==189||ekc==109)document.forms[0].btnSub.click();
            else if(ekc==67||ekc==27){
               document.forms[0].btnClr.click();
               document.forms[0].iH.focus();
            }else return false;
         }
         function stripSymbol(el){
            el.value=el.value.replace(/[\+\=\-\_]/,'');
         }
         var uA=navigator.userAgent;
         if(uA.indexOf("MSIE")!=-1)br="IE";
         else if(uA.indexOf("Firefox")!=-1)br="FF";
         else if(uA.indexOf("Netscape")!=-1)br="NS";
         else br="?";
         document.onkeyup=getKey;
      //-->
   </script>
</head>
<body onload="document.forms[0].iH.focus()">
<form method="GET" action="javascript:void(0);">
   <table cellpadding="0" cellspacing="0" border="0" align="center">
      <tr><td colspan="6"><h3>Hours/Minutes/Seconds<br>Calculator</h3></td></tr>
      <tr>
         <td style="text-align:center;vertical-align:middle;">HH</td>
         <td style="text-align:center;vertical-align:middle;"> </td>
         <td style="text-align:center;vertical-align:middle;">MM</td>
         <td style="text-align:center;vertical-align:middle;"> </td>
         <td style="text-align:center;vertical-align:middle;">SS</td>
         <td style="text-align:center;vertical-align:middle;">
             <input type="reset" name="btnClr" value="C/Esc" class="btn">
         </td>
      </tr>
      <tr>
         <td style="text-align:center;vertical-align:middle;">
            <input type="text" size="3" name="oH" disabled="disabled" class="nulfldD" value="00"></td>
         <td style="text-align:center;vertical-align:middle;">:</td>
         <td style="text-align:center;vertical-align:middle;">
            <input type="text" size="3" name="oM" disabled="disabled" class="nulfldD" value="00"></td>
         <td style="text-align:center;vertical-align:middle;">:</td>
         <td style="text-align:center;vertical-align:middle;">
            <input type="text" size="3" name="oS" disabled="disabled" class="nulfldD" value="00"></td>
         <td style="text-align:center;vertical-align:middle;">
             <input type="button" name="btnSub" value="-" class="btn" onclick="calcSub(this.form);">
         </td>
      </tr>
      <tr>
         <td style="text-align:center;vertical-align:middle;">
            <input type="text" size="3" name="iH" value="" onkeyup="stripSymbol(this);" class="nulfld">
         </td>
         <td style="text-align:center;vertical-align:middle;">:</td>
         <td style="text-align:center;vertical-align:middle;">
            <input type="text" size="3" name="iM" value="" maxlength="2" onkeyup="stripSymbol(this);" class="nulfld">
         </td>
         <td style="text-align:center;vertical-align:middle;">:</td>
         <td style="text-align:center;vertical-align:middle;">
            <input type="text" size="3" name="iS" value="" maxlength="2" onkeyup="stripSymbol(this);" class="nulfld">
         </td>
         <td style="text-align:center;vertical-align:middle;">
             <input type="button" name="btnAdd" value="+" class="btn" onclick="calcAdd(this.form);">
         </td>
      </tr>
      <tr>
         <td colspan="6">
            <table cellpadding="0" cellspacing="0" border="0">
               <tr><td colspan="2" style="text-align:left;">Keyboard Shortcuts:</td></tr>
               <tr><td style="text-align:left;">Add:  </td>
               <td style="text-align:left;">[+]</td></tr>
               <tr><td style="text-align:left;">Subtract: </td>
               <td style="text-align:left;">[-]</td></tr>
               <tr><td style="text-align:left;">Next field: </td>
               <td style="text-align:left;">[TAB] or [:]</td></tr>
               <tr><td style="text-align:left;">Clear: </td>
               <td style="text-align:left;">[C] or [ESC]</td></tr>
            </table>
         </td>
      </tr>
   </table>
</form>
</body>
</html>