[Javascript] 2 Count downs who can be reset individually

Hi great community!

I'd like to have a script where 2 timers count a certain time down.

120 seconds

START (button)

But i should be able to reset the time at any moment, when the 120 seconds are done there must display something like "120 done"

And a 320 seconds timer who does the same as the other one.

They both should be started / stopped individually so i can start / stop em whenever i want.

I hope this is possible!
TriuMpH-DesignAsked:
Who is Participating?
 
devicCommented:
<script>
var timer120=new Object();
var timer240=new Object();
function update(obj)
{
      
      var BT=document.getElementById(obj.theId+"_seconds");
      var curVal=BT.innerHTML.match(/[\d]{1,3}/)*1-1;
      if(curVal<1)
      {
            finite(obj.theId)
      }
      BT.innerHTML=curVal+" Seconds left";
}
function startit(theId)
{
      
      eval("timer"+theId.match(/[\d]{1,3}/)+".theId=theId");
      eval("timer"+theId.match(/[\d]{1,3}/)+".timer=setInterval('update(timer"+theId.match(/[\d]{1,3}/)+")',1000)");
      document.getElementById(theId+"_seconds").innerHTML=theId.match(/[\d]{1,3}/)+" Seconds left";
      document.getElementById(theId+"_start").disabled=true;
      document.getElementById(theId+"_stop").disabled=false;
      document.getElementById(theId+"_status").innerHTML="Status: waiting...";
}
function stopit(theId)
{
      clearInterval(eval("timer"+theId.match(/[\d]{1,3}/)+".timer"));
      document.getElementById(theId+"_seconds").innerHTML="-"
      document.getElementById(theId+"_start").disabled=false;
      document.getElementById(theId+"_stop").disabled=true;
      document.getElementById(theId+"_status").innerHTML="Status: stopped...";
}
function finite(theId)
{
      clearInterval(eval("timer"+theId.match(/[\d]{1,3}/)+".timer"));
      document.getElementById(theId+"_start").disabled=false;
      document.getElementById(theId+"_stop").disabled=true;
      document.getElementById(theId+"_status").innerHTML="Status: finished!";
}

</script>

<table width=200 cellspacing=0 cellpadding=0 border=1>
      <tr><td colspan=2><b>Counting 120 Seconds</b></td></tr>
      <tr><td colspan=2 id=bt120_seconds>&nbsp;</td></tr>
      <tr><td colspan=2 id=bt120_status>&nbsp;</td></tr>
      <tr><td><button id=bt120_start onclick=startit("bt120")>Start</button></td><td><button id=bt120_stop onclick=stopit("bt120")>Stop</button></td></tr>
</table>
<br><br>
<table width=200 cellspacing=0 cellpadding=0 border=1>
      <tr><td colspan=2><b>Counting 240 Seconds</b></td></tr>
      <tr><td colspan=2 id=bt240_seconds>&nbsp;</td></tr>
      <tr><td colspan=2 id=bt240_status>&nbsp;</td></tr>
      <tr><td><button id=bt240_start onclick=startit("bt240")>Start</button></td><td><button id=bt240_stop onclick=stopit("bt240")>Stop</button></td></tr>
</table>
0
 
devicCommented:
here an example:
================
<HTML>

<HEAD>

 <TITLE>Message Reminder</TITLE>
<BODY>



<script>
var sounds = new Array("C:\\WINDOWS\\Media\\ding.wav","C:\\WINDOWS\\Media\\notify.wav", "C:\\WINDOWS\\Media\\onestop.mid");
function soundsDropdown()
{
      for(var i=0;i<sounds.length;i++)
      {
            document.write("<option value="+sounds[i]+">"+sounds[i].split("\\")[sounds[i].split("\\").length-1])      
      }
}
var timer = null;
var running=false;
function Start_Timer()
{
    var d=document.Timer_Program;
      time_stop = (d.Hours.value*3600) + (d.Minutes.value*60) + d.Seconds.value*1;
    if(time_stop > 0)
      {
         d.Status.value="Running";
         timer= setTimeout("Alarm()",time_stop *1000)
    }
    else window.alert("The time is improper.")
}
function Alarm()
{
      var d=document.Timer_Program;
      window.focus();
      if(d.Message.value!=""){ShowMsg(d.Message.value)};
      if(d.sound.value!=""){playSound()};
      d.Status.value='Stopped';
}
function ShowMsg(msg)
{
      var popup = window.open("","Reminder","width=150,height=150");
      popup.document.write(msg)
}
function playSound()
{
      var d=document.Timer_Program;
      file = d.sound.options[d.sound.selectedIndex].value;
      mloop = d.mloop.options[d.mloop.selectedIndex].value;
      document.getElementById("musicdiv").innerHTML="&nbsp;<bgsound id=music loop="+mloop+" volume=1 src="+file+">";
}
function stopit()
{
      running=false;
      document.Timer_Program.Status.value='Stopped';
      clearTimeout(timer);
      document.getElementById("musicdiv").innerHTML="";
}
</script>
<FORM Name="Timer_Program">
<center>
 Hours:
  <INPUT TYPE="text" NAME="Hours" Value="0" SIZE="5">
 <dl>
   <DT>
Minutes:
 <INPUT TYPE="text" NAME="Minutes" Value="0" SIZE="5"><DT>
Seconds:
 <INPUT TYPE="text" NAME="Seconds" Value="0" SIZE="5"><DT>
 <P>
</center>
<center>
<br>
Sound
<select name=sound>
<option value="">- select -
<script>soundsDropdown();</script>
</select>
play <select name=mloop><option value=1>one time<option value=2>two times<option value=3>three times<option value=-1>always</select>
<br><br>
Message:<INPUT TYPE="text" NAME="Message" SIZE="30"><P>
<INPUT TYPE=button value="Start" NAME="Start" onClick= "running=true;clearTimeout(timer);Start_Timer();">
<INPUT TYPE=button value="Stop" NAME="Stop" onClick= "stopit()">
<P>
Status:<INPUT TYPE="text" NAME="Status" Value="Stopped" SIZE="10"><DT>
</center>
</FORM>
<div id=musicdiv></div>
</BODY>
</HTML>
0
 
TriuMpH-DesignAuthor Commented:
Ok i made a somewhat easier way to understand my wantings.

This is more want i want:

http://213.84.84.88/counting.jpg

I hope you can help
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
devicCommented:
nice screenshot ;)

I thought to use the same button, check this:

=================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
      <title>Untitled</title>
      <META http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>

<body bgcolor=ffffff topmargin=0 leftmargin=0 marginwidth=0 marginheight=0>
<script>
var timer120;
var timer240;
function ss(obj)
{
      if(!obj)obj=this;
      if(obj.id=="bt120")
      {
            timer120=obj;
            timer120.timer=setInterval("update(timer120)",1000);
            timer120.defVal=obj.value;
            timer120.theId=obj.id;
      }
      if(obj.id=="bt240")
      {
            timer240=obj;
            timer240.timer=setInterval("update(timer240)",1000);
            timer240.defVal=obj.value;
            timer240.theId=obj.id;
      }

}
function update(obj)
{
      var BT=document.getElementById(obj.theId);
      var curVal=BT.value.match(/[\d]{1,3}/)*1-1;
      BT.value=curVal+" sec stop";
      BT.onclick=stopit;
}
function stopit()
{
      
      clearTimeout(this.timer);
      this.value=this.defVal;
      this.onclick=ss;
}
</script>
<button id=bt120 onclick=ss(this)>120 sec start</button>
<button id=bt240 onclick=ss(this)>240 sec start</button>
</body>
</html>
0
 
TriuMpH-DesignAuthor Commented:
Ow yeah it's nice! but i really really need it the way i just showed you, can you do that?

http://213.84.84.88/counting.jpg
0
 
devicCommented:
TIP:
if you want avoid to show all the content of your root directory on http://213.84.84.88/
then just add there index.html
0
 
TriuMpH-DesignAuthor Commented:
How can i easily add another counting column in the code? which functions have to get copy pasted?

As far as i can see it work fine, i'll accept soon!
0
 
devicCommented:
if i need for example add 360 seconds

STEP1 :
add new line where is the same lines with 120 and 240 seconds
==========
var timer360=new Object();


STEP2:
copy+paste table, find all numbers and replace with 360
=============
<table width=200 cellspacing=0 cellpadding=0 border=1>
    <tr><td colspan=2><b>Counting 360 Seconds</b></td></tr>
    <tr><td colspan=2 id=bt360_seconds>&nbsp;</td></tr>
    <tr><td colspan=2 id=bt360_status>&nbsp;</td></tr>
    <tr><td><button id=bt360_start onclick=startit("bt360")>Start</button></td><td><button id=bt360_stop onclick=stopit("bt360")>Stop</button></td></tr>
</table>

that's all
0
 
TriuMpH-DesignAuthor Commented:
great! many thanks!
0
 
devicCommented:
you welcome!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.