ugrás a tartalomhoz

Javascript - időzítő gombot aktivál

Ecneb · 2011. Már. 3. (Cs), 06.27
Van egy időzítő, ami 10 másodperctől számol vissza, és az oldal alján található egy gomb, ami más feladatokat hajt végre. A lényeg a lényegben, hogy ha letelik az idő akkor aktiválódjon a gomb anélkül hogy rá kelljen kattintanom.

//időzítő
<script type="text/javascript">

var sz = 100;
var megy;

function indit()
	 {
	 stopper(); 
	 }
function allit()
	{
	 clearTimeout(megy);
	}
function stopper()
{
	sz--;
	b = Math.floor(sz/60/60/10);
	sz0 = sz-b*60*60*10;
	c = Math.floor(sz0/60/10);
	sz0 = sz0-c*60*10;
	d = Math.floor(sz0/10);
	e = sz0-d*10;
		if(b<10)
		{
		b="0"+b;
		}
			if(c<10)
			{
			c="0"+c;
			}
				if(d<10)
				{
				d="0"+d;
				}
				
if ((b == 0) & (c == 0) & (d == 0) & (e == 0))
{
clearTimeout(megy);	
sz = 100;
// ide kell a gomb parancs...
}

document.getElementById("timer").innerHTML = "idő: "+b+" : "+c+" : "+d+"," +e;
megy = setTimeout('stopper();',100)
}
</script>
<table align="center" border="3">
<tr><td align="center" colspan="2"><div id="timer"></div></td></tr>
<tr><td colspan="2" align="center">
<button onclick="indit();">start</button>
<button onclick="allit();">pause</button>
</td></tr>



//lenti gomb...
<input type="submit" name="megold" value="Értékelés">
‹ A setInterval és az Opera esete Sitebuild - tartalom középre igazítása ›
 ■
1

?

ironwill · 2011. Már. 3. (Cs), 08.03
function activateButton() {
  document.getElementById("megold").disabled = "false";
}

setTimeout("activateButton()", 10000);
<input id="megold" type="submit" name="megold" value="Értékelés">
Kódszínező?
2

Beszíneztem neki :-) Az a baj

inf · 2011. Már. 3. (Cs), 10.05
Beszíneztem neki :-) Az a baj ezzel az új rendszerrel, hogyha mi színezünk, meg írjuk át a címeket, akkor ők maguktól sosem fogják megtanulni hogyan kell.

//időzítő
<script type="text/javascript">

Stopper=
{
startDelay: 10*1000,
stepSize: 10,
start: function ()
{
if (!this.paused && this.running)
{
return;
}
clearInterval(this.timer);
if (this.paused)
{
this.paused=false;
}
else
{
this.delay=this.startDelay;
}
this.checkPoint=new Date();
this.timer=setInterval(function (){Stopper.step();},this.stepSize);
this.running=true;
this.fireEvent("start");
this.step();
},
pause: function ()
{
if (!this.paused && this.running)
{
this.paused=true;
clearInterval(this.timer);
this.delay-=this.now-this.checkPoint;
this.fireEvent("pause");
}
},
step: function ()
{
this.now=new Date();
this.interval=this.delay-(this.now-this.checkPoint);
if (this.interval<=0)
{
this.interval=0;
this.running=false;
clearInterval(this.timer);
}
this.time=this.createTime(this.interval);
this.fireEvent("time",this.time);
if (this.running==false)
{
this.fireEvent("timeout");
}
},
createTime: function (interval)
{
var time={};
var curr=interval;
time.hours=curr/(1000*60*60)|0;
curr=curr%(1000*60*60);
time.minutes=curr/(1000*60)|0;
curr=curr%(1000*60);
time.seconds=curr/1000|0;
curr=curr%1000;
time.milliSeconds=curr|0;
return time;
},
fireEvent: function (type)
{
if (!this.listeners.hasOwnProperty(type))
{
return;
}
var listener=this.listeners[type];
var args=Array.prototype.slice.call(arguments,1);
listener.apply(this,args);
},
addEventListener: function (type,listener)
{
this.listeners[type]=listener;
},
removeEventListener: function (type)
{
delete(this.listeners[type]);
},
listeners:
{
time: function (time)
{
document.getElementById("timer").innerHTML=
(
"idő: "+
time.hours+" : "+
time.minutes+" : "+
time.seconds+"." +
(time.milliSeconds/100|0)
);
},
timeout: function ()
{
document.getElementById("megold").removeAttribute("disabled");
}
}
};



</script>
<table align="center" border="3">
<tr><td align="center" colspan="2"><div id="timer"></div></td></tr>
<tr><td colspan="2" align="center">
<button onclick="Stopper.start();">start</button>
<button onclick="Stopper.pause();">pause</button>
</td></tr>



//lenti gomb...
<input type="submit" id="megold" name="megold" value="Értékelés" disabled="disabled" />


Érdekes, hogy miután egyszer lejön róla a disabled, akkor már a cache-ből úgy tölti vissza az oldalt, hogy nincs rajta. Csak a ctrl+f5, amivel újra disabled-re varázsolható a gomb.

Sima intervallal és számolgatással nem lehet normális időzítőt csinálni, mert nem tartja pontosan az időközöket. Furcsa a kódszínező, néha duplán ír ki szavakat, majd ránézek, hogy mi a gond, ha lesz időm.
3

köszönöm mindkettőtöknek a

Ecneb · 2011. Már. 3. (Cs), 15.17
köszönöm mindkettőtöknek a válaszát, sajnálom, hogy hibáztam, ez volt az első, hogy itt postoltam valamit!

Kipróbáltam mindkettőt és lehet hogy velem van a hiba, de egyik sem működik. Dreamweaver-ben dolgozom, kipróbáltam az elsőt, ott lepereg az idő és kezdi elölről, a második, roppant hosszú válaszban leírt kód meg szimplán nem fut le. A gomb az idők végezetéig disabled marad, mivel az időzítőt nem lehet elindítani. Természetesen köszönöm, hogy foglalkoztok a kérésemmel, hálás vagyok érte, csak a gond, hogy a baj nem múlt el :S
6

Próbáld most, leszedtem a

inf · 2011. Már. 3. (Cs), 16.25
Próbáld most, leszedtem a színezőt róla. Az volt a baja, hogy rossz a kód színező.
8

:)

ironwill · 2011. Már. 3. (Cs), 17.00
Köszönöm.. :)

Igen, többször láttam, hogy van a kódszínező használatára próbálkozás, csak még sem sikerül. Ilyenkor nem is szoktam szólni. (gondolom ez olyankor fordulhat elő, olyan formátumot állít be, amihez nincs pattern és ezért jelenik meg ilyenkor dobozban, de csak szürkítve)

(Szerintem nagy segítség lenne a kezdők számára, ha az űrlap elemekhez tartozna súgó.)

A js cache hiba ismert.. :) Én inicializáló js-el szoktam javítani:

function init() {
  document.getElementById("megold").disabled = true;
}
<body onload="init();">
4

Ilyesmi

Poetro · 2011. Már. 3. (Cs), 15.36
<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
</head>
<body>
<form action="#" id="idozito" method="get">
  //időzítő
  <table align="center" border="3">
    <tr>
      <td align="center" colspan="2">
        <div id="timer"></div>
      </td>
    </tr>

    <tr>
      <td colspan="2" align="center">
        <button onclick="return indit();">start</button>
        <button onclick="return allit();">pause</button>
      </td>
    </tr>
  </table>
  //lenti gomb...
  <input type="submit" name="megold" value="Értékelés">
</form>

<script type="text/javascript">
var sz = 100;
var megy;

function indit() {
  stopper();
  return false;
}

function allit() {
  clearTimeout(megy);
  return false;
}

function stopper() {
  var b, c, d, e, sz0;
  sz--;
  b = Math.floor(sz / 60 / 60 / 10);
  sz0 = sz - b * 60 * 60 * 10;
  c = Math.floor(sz0 / 60 / 10);
  sz0 = sz0 - c * 60 * 10;
  d = Math.floor(sz0 / 10);
  e = sz0 - d * 10;
  if (b < 10) {
    b = "0" + b;
  }
  if (c < 10) {
    c = "0" + c;
  }
  if (d < 10) {
    d = "0" + d;
  }

  document.getElementById("timer").innerHTML = "idő: " + b + " : " + c + " : " + d + "," + e;
  if (b === "00" & c === "00" & d === "00" & e === 0) {
    clearTimeout(megy);
    sz = 100;
    // Mondjuk elküldjük a formot.
    document.getElementById("idozito").submit();
  }
  else {
    megy = setTimeout(stopper, 100);
  }
}
</script>
</body>
</html>
5

Számolni számol, de ha eléri

Ecneb · 2011. Már. 3. (Cs), 16.20
Számolni számol, de ha eléri a nullát-- betölti az oldalt újra, de nem a gombot "nyomja" meg.
Elfelejtettem említeni, hogy a form method az post kell hogy legyen!
7

post

ironwill · 2011. Már. 3. (Cs), 16.43
<form action="#" id="idozito" method="post">
Mivel az action üres, ezért csak újra tölti az oldalt.. írd át a neked megfelelő címre.
9

küldtem egy mailt ;)

Ecneb · 2011. Már. 3. (Cs), 17.29
küldtem egy mailt ironwill ;)