Working On Timer

[saintwolfe]

Hey Guys, before I start I thoroughly read through the TOA and believe me I'm not just asking for an answer. However an answer but more importantly a description or a direction to a place to learn would be much appreciated. My current issue has to do with my lack of talents. I am in an intro computer science course sorry no student tag on the site and have done some solid html work, but my javascript skills are not good. The issue is that I am working on a phone app I want to create and have done everything except for a timer. I have been doing research on javascript and have been fiddling with the script of a timer online to try and understand the process.

Anyways the timer has a stop and reset button but I am looking to implement more parts to it. My strategy with the app is to work up from basics so most importantly I am trying to figure out how to implement two screens on the timer one for overall time and another counting up to a 30second sequence. My goal is to have a sequence on 1 side and the overall time on the other going in a loop of 30second to 10 second parts all the way to 10minutes or so.

I will post the script but let me remind you that an answer isn't necessary a direction to what to read and research is even better. Here is my script.


<script language="javascript">
var base = 60;

var clocktimer,dateObj,dh,dm,ds,ms;
var readout='';
var h=1;
var m=1;
var tm=1;
var s=0;
var ts=0;
var ms=0;
var show=true;
var init=0;
var mPLUS=new Array(
'm0',
'm1',
'm2',
'm3',
'm4',
'm5',
'm6',
'm7',
'm8',
'm9'
);
var ii=0;

function clearALL() {
clearTimeout(clocktimer);
h=1;m=1;tm=1;s=0;ts=0;ms=0;
init=0;show=true;
readout='00:00:00.00';
document.clockform.clock.value=readout;
var CF = document.clockform;
for (ij=0;ij<=9;ij++) { CF[mPLUS[ij]].value = ''; }
ii = 0;
}

function addMEM() {
if (init>0) {
var CF = document.clockform;
CF[mPLUS[ii]].value = readout;
if (ii==9) { ii = 0; } else { ii++; }
}
}


function startTIME() {

var cdateObj = new Date();
var t = (cdateObj.getTime() - dateObj.getTime())-(s*1000);

if (t>999) { s++; }

if (s>=(m*base)) {
ts=0;
m++;
} else {
ts=parseInt((ms/100)+s);
if(ts>=base) { ts=ts-((m-1)*base); }
}

if (m>(h*base)) {
tm=1;
h++;
} else {
tm=parseInt((ms/100)+m);
if(tm>=base) { tm=tm-((h-1)*base); }
}

ms = Math.round(t/10);
if (ms>99) {ms=0;}
if (ms==0) {ms='00';}
if (ms>0&&ms<=9) { ms = '0'+ms; }

if (ts>0) { ds = ts; if (ts<10) { ds = '0'+ts; }} else { ds = '00'; }
dm=tm-1;
if (dm>0) { if (dm<10) { dm = '0'+dm; }} else { dm = '00'; }
dh=h-1;
if (dh>0) { if (dh<10) { dh = '0'+dh; }} else { dh = '00'; }

readout = dh + ':' + dm + ':' + ds + '.' + ms;
if (show==true) { document.clockform.clock.value = readout; }

clocktimer = setTimeout("startTIME()",1);
}

function findTIME() {
if (init==0) {
dateObj = new Date();
startTIME();
init=1;
} else {
if(show==true) {
show=false;
} else {
show=true;
}
}
}
</script>
<form name="clockform">
<h2>
FULL BODY CIRCUIT</h2>
<input name="clock" style="text-align:center; width:174px; height:35px; font-size:24; font-weight:bold" value="00:00:00.00" /> <input name="starter" onclick="findTIME()" style="width:97px; font-weight:bold" type="button" value="Start/Stop" /> <input name="clearer" onclick="clearALL()" type="button" value="Reset" />&nbsp;</form>
<p>
&nbsp;</p>
<hr />