Members

Technology Zones

IBM Learning Center

Articles

Hosted By

MaximumASP

Info

This resource has not currently been approved, and is not currently linked to from our directory of resources. It is being displayed here for preview by the author and moderators only.
Rated
Read 798 times

Related Categories

Timer - Timer

\\.\

Timer

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<HTML>
<HEAD>
<TITLE>Timer</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="description" content="Timer">
<META name="GENERATOR" content="Microsoft FrontPage 3.0">
<style><!--   
BODY{
font-family: Arial;
color: #ffffff;
font-size: 12px;
background-color: #2F3E4F;
}
TBODY{
font-family: Arial;
font-size: 12px;
background-color: #2F3E4F;
}
div{
    width: auto;
}
div.black{
    background-color: #161616;
    color:#c0c0c0;
    display: block;
    width: 100%;
}
.master {
font-family:Arial;
font-size:72px;
color:#c0c0c0;
background-color:#0c0c0c;
display: block;
width: 100%;
text-align: center;
}
.ctr { text-align:center;}
-->
</style>
<script type="text/javascript">
/*
    Stopwatch & Masterclock by \\.\PhysicalDevice0 #
    Usual Open source licence applies, remeber to cite me and this site...
   
*/
/* Master clock */
masterclock = {
    target:false,
    n:function(d,v){
        for(tmp='',c=0; c<(d-v.toString().length); c++) tmp+='0';
        return tmp+v;
    },
    f:function(s,t){
        return "<font size='"+s+"'>"+t+"</font>";
    },
    update:function()
    {    // get a timestamp
        with(this)
        {
            with(new Date)
            {
                this.timestamp = {    yr:getFullYear(),
                                    mo:n(2,getMonth()),
                                    dy:n(2,getDate()),
                                    hh:n(2,getHours()),
                                    mm:n(2,getMinutes()),
                                    ss:n(2,getSeconds()),
                                    ms:n(3,getMilliseconds())
                                    };
            }
   
            // generate a samp   
            if(!target) target = document.getElementById('masterclock');
            // set format for master clock
            with(timestamp)
            {
                target.innerHTML = [hh,f(6,':hrs '),mm,f(6,':mins '),ss,f(6,':sec '),ms.slice(0,1),f(6,'00/ths')].join('');
            }
        }
    },
    auto:setInterval('masterclock.update();',100)
}
/* stopwatch */

stopwatch = {
    id:'',
    n:function(d,v){
        for(tmp='',c=0; c<(d-v.toString().length); c++) tmp+='0';
        return tmp+v;
    },
    f:function(s,t){
        return "<font size='"+s+"'>"+t+"</font>";
    },
    button:function(obj){
        v = obj.Submit.value;
        return ((v =='Start')?'Stop': (v =='Stop')?'Reset':'Start');
    },   
    process:function(obj)
    { // OK - Process the button click
        switch(obj.Submit.value)
        {
        case 'Start': // process for button value Start
            with(obj)
            {    if(!Start.value)
                {    with(masterclock.timestamp)
                    {   
                        Start.value = [hh,mm,ss,ms].join(':');
                        Startdate.value = [yr,mo,dy].join("/");
                    }
                }
            Submit.value = this.button(obj);
            }
        break;
       
        case 'Stop': // process for button value Stop
       
        with(obj)
        {
            if(!Stop.value)
                {
                    with(masterclock.timestamp)
                    {
                        Stop.value = [hh,mm,ss,ms].join(':');
                        Stopdate.value = [yr,mo,dy].join("/");
                    }
               
                    Submit.value = this.button(obj);
                }
               
                var d = new Date( this.count(obj) );
                // set the duration....
                with( {yr:d.getFullYear(),mo:d.getMonth(),dy:d.getDate(),hh:d.getHours(),mm:d.getMinutes(),ss:d.getSeconds(),ms:d.getMilliseconds()} )
                {   
                    with(this)
                    {
                        obj.Duration.value = [n(2,hh),n(2,mm),n(2,ss),n(3,ms)].join(':');
                    }
                }
        }       
        break;
       
        case 'Reset': // process for button value Reset
        with(obj)
        {
                Project.value = '';
                Startdate.value = '';
                Stopdate.value = '';
                Start.value = '';
                Stop.value = '';
                Duration.value = '';
                Submit.value = this.button(obj);

        }
        break;
       
        }
    },
    project:function(obj)
    {
        obj.value=prompt('Project:', (obj.value || '') );
    },
    count:function(obj)
    {    // obj is the current form...
        with(obj)
        {
            sd = (Startdate.value.split('/')).concat((Start.value.split(':')));
            ed = (Stopdate.value.split('/')).concat((Stop.value.split(':')));
        }
    return ( new Date(ed[0],ed[1],ed[2],ed[3],ed[4],ed[5],ed[ 6 ]).getTime() -
                new Date(sd[0],sd[1],sd[2],sd[3],sd[4],sd[5],sd[ 6 ]).getTime());
    }
}

//-->
</script>
</head>
<BODY>
<div class="black">Masterclock:</div><div id="masterclock" align="center" class="master"> 00<font size="6">:hrs</font>
    00<font size="6">:min</font> 00<font size="6">:sec</font> 0<font size="6" >00/ths</font></div>
  <table width="100%" border="0" cellpadding="1" cellspacing="1" bgcolor="#CCCCCC">
    <tr class="ctr">
      <td width="2%">&nbsp;</td>
      <td width="18%">Code/Project:</td>
      <td width="18%">&nbsp;</td>
      <td width="8%">Start</td>
      <td width="9%">Stop</td>
      <td width="8%">Duration</td>
      <td width="25%">&nbsp;</td>
      <td width="12%"></td>
    </tr>
  </table>
  <hr>
  <form name="timer_1" action="java script:;" onSubmit="stopwatch.process(this); return false;">
    <table width="100%" border="0" cellspacing="1" cellpadding="1">
      <tr>
          <td width="2%" class="ctr">&nbsp; </td>
        <td width="18%" class="ctr"><input type="text" name="Project"  value="" size="25" readonly onClick="stopwatch.project(this);">
        </td>
          <td width="18%" class="ctr"><input type="hidden" name="Startdate" value="">
            <input type="hidden" name="Stopdate" value=""></td>
        <td width="8%" class="ctr"><input type="text" name="Start" size="12" readonly ></td>
        <td width="8%" class="ctr"><input type="text" name="Stop" size="12" readonly ></td>
        <td width="8%" class="ctr"> <input type="text" name="Duration" value="" size="12" readonly ></td>
          <td width="25%" class="ctr">&nbsp; </td>
        <td width="13%" class="ctr"> <input type="Submit" value="Start" name="Submit"></td>
      </tr>
    </table>
  </form>
  <hr>
  <form name="timer_2" action="
java script:; " onSubmit="stopwatch.process(this); return false;">
    <table width="100%" border="0" cellspacing="1" cellpadding="1">
      <tr>
        <td width="2%" class="ctr">&nbsp; </td>
        <td width="18%" class="ctr"><input type="text" name="Project"  value="" size="25" readonly onClick="stopwatch.project(this);" class="project">
        </td>
        <td width="18%" class="ctr"><input type="hidden" name="Startdate" value="">
          <input type="hidden" name="Stopdate" value=""> </td>
        <td width="8%" class="ctr"><input type="text" name="Start" size="12" readonly ></td>
        <td width="8%" class="ctr"><input type="text" name="Stop" size="12" readonly ></td>
        <td width="8%" class="ctr"><input type="text" name="Duration" value="" size="12" readonly ></td>
        <td width="25%" class="ctr">&nbsp; </td>
        <td width="13%" class="ctr"> <input type="Submit" value="Start" name="Submit" class="button"></td>
      </tr>
    </table>
  </form>
  <hr>
  <form name="timer_3" action="
java script:; " onSubmit="stopwatch.process(this); return false;">
    <table width="100%" border="0" cellspacing="1" cellpadding="1">
      <tr>
        <td width="2%" class="ctr">&nbsp; </td>
        <td width="18%" class="ctr"><input type="text" name="Project"  value="" size="25" readonly onClick="stopwatch.project(this);" class="project">
        </td>
        <td width="18%" class="ctr"><input type="hidden" name="Startdate" value="">
          <input type="hidden" name="Stopdate" value=""> </td>
        <td width="8%" class="ctr"><input type="text" name="Start" size="12" readonly ></td>
        <td width="8%" class="ctr"><input type="text" name="Stop" size="12" readonly ></td>
        <td width="8%" class="ctr"><input type="text" name="Duration" value="" size="12" readonly ></td>
        <td width="25%" class="ctr">&nbsp; </td>
        <td width="13%" class="ctr"> <input type="Submit" value="Start" name="Submit" class="button"></td>
      </tr>
    </table>
  </form>
  <hr>
  <form name="timer_4" action="
java script:; " onSubmit="stopwatch.process(this); return false;">
    <table width="100%" border="0" cellspacing="1" cellpadding="1">
      <tr>
        <td width="2%" class="ctr">&nbsp; </td>
        <td width="18%" class="ctr"><input type="text" name="Project"  value="" size="25" readonly onClick="stopwatch.project(this);" class="project">
        </td>
        <td width="18%" class="ctr"><input type="hidden" name="Startdate" value="">
          <input type="hidden" name="Stopdate" value=""> </td>
        <td width="8%" class="ctr"><input type="text" name="Start" size="12" readonly ></td>
        <td width="8%" class="ctr"><input type="text" name="Stop" size="12" readonly ></td>
        <td width="8%" class="ctr"><input type="text" name="Duration" value="" size="12" readonly></td>
        <td width="25%" class="ctr">&nbsp; </td>
        <td width="13%" class="ctr"> <input type="Submit" value="Start" name="Submit" class="button"></td>
      </tr>
    </table>
  </form>
  <hr>
  <form name="timer_5" action="
java script:; " onSubmit="stopwatch.process(this); return false;">
    <table width="100%" border="0" cellspacing="1" cellpadding="1">
      <tr>
        <td width="2%" class="ctr">&nbsp; </td>
        <td width="18%" class="ctr"><input type="text" name="Project"  value="" size="25" readonly onClick="stopwatch.project(this);" class="project">
        </td>
        <td width="18%" class="ctr"><input type="hidden" name="Startdate" value="">
          <input type="hidden" name="Stopdate" value=""> </td>
        <td width="8%" class="ctr"><input type="text" name="Start" size="12" readonly></td>
        <td width="8%" class="ctr"><input type="text" name="Stop" size="12" readonly></td>
        <td width="8%" class="ctr"><input type="text" name="Duration" value="" size="12" readonly></td>
        <td width="25%" class="ctr">&nbsp; </td>
        <td width="13%" class="ctr"> <input type="Submit" value="Start" name="Submit"></td>
      </tr>
    </table>
  </form>
  <hr>
</BODY>
</html>

Comments