JavaScript setTimout és setInterval objektumait el lehet programból indítani?
Egy egyszerű "játékot" készítek, ahol 3 négyzet folyamatosan változtatja a helyzetét a képernyőn (jobbra haladnak egy kis CSS használatával). Egy setTimeout objektum segítségével elindítom a next() metódust, melyben ismét meghívja magát a függvény, ugyanúgy egy setTimeout objektummal. Ezzel a négyzetek mozgását hoztam létre.
Azonban, azt szeretném elérni, hogy egy gombra kattintva a számlálás leálljon. Olvasgattam, és rátaláltam a clearTimeout objektumra, de kétségtelenül nem működik valami a kódomban, hiszen nem reagál semmire.
Ami egy másik baj, hogy a setTimeout objektumot is elindítanám kattintásra, de az sem működik, miért?
A kód és a képfájlok letöltése itt lehetséges (ha ki akarod próbálni): https://app.box.com/s/p3qth4seozzty0y4x5hc1egrfhifal87
A teljes kód:
■ Azonban, azt szeretném elérni, hogy egy gombra kattintva a számlálás leálljon. Olvasgattam, és rátaláltam a clearTimeout objektumra, de kétségtelenül nem működik valami a kódomban, hiszen nem reagál semmire.
Ami egy másik baj, hogy a setTimeout objektumot is elindítanám kattintásra, de az sem működik, miért?
A kód és a képfájlok letöltése itt lehetséges (ha ki akarod próbálni): https://app.box.com/s/p3qth4seozzty0y4x5hc1egrfhifal87
A teljes kód:
<!DOCTYPE HTML>
<html>
<head>
<title>JavaScript 24 óra alatt</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"></meta>
</head>
<body>
<h1>Animation with Dynamic HTML</h1>
<hr/>
<p id="kep1" style="position: absolute; left: 0px; top: 100px; width: 100px; height: 100px; visibility: show;" onMouseDown="kattintas('kep1'); window.setTimeout('visszaallit(1)', 2000); win();">
<img src="kep5.jpg" width="100" height="100" border="0">
</p>
<p id="kep2" style="position: absolute; left: 0px; top: 250px; width: 100px; height: 100px; visibility: show;" onMouseDown="kattintas('kep2'); window.setTimeout('visszaallit(2)', 2000); win();">
<img src="kep5.jpg" width="100" height="100" border="0">
</p>
<p id="kep3" style="position: absolute; left: 0px; top: 400px; width: 100px; height: 100px; visibility: show;" onMouseDown="kattintas('kep3'); window.setTimeout('visszaallit(3)', 2000); win();">
<img src="kep5.jpg" width="100" height="100" border="0">
</p>
<script>
var pos1 = -95;
var pos2 = -95;
var pos3 = -95;
var speed1 = Math.floor(Math.random()*10)+2;
var speed2 = Math.floor(Math.random()*10)+2;
var speed3 = Math.floor(Math.random()*10)+2;
function next(){
pos1 += speed1;
pos2 += speed2;
pos3 += speed3;
if(pos1 > 1024) pos1 = -95;
if(pos2 > 1024) pos2 = -95;
if(pos3 > 1024) pos3 = -95;
document.getElementById("kep1").style.left = pos1 + "px";
document.getElementById("kep2").style.left = pos2 + "px";
document.getElementById("kep3").style.left = pos3 + "px";
ido = setTimeout(function(){next();}, 20);
}
next();
function kattintas(s){
document.getElementById(s).style.border = "2px solid blue";
}
function win(){
if((document.getElementById("kep1").style.border == "2px solid blue") && (document.getElementById("kep2").style.border == "2px solid blue") && (document.getElementById("kep3").style.border == "2px solid blue")){
alert("Megnyerted a játékot!");
}
}
function visszaallit(s){
document.getElementById("kep" + s).style.border = "none";
}
</script>
<div style="position: absolute; top: 500px;">
<hr/>
<p>A játék megnyeréséhez kattints időben az összes négyzetre, hogy kék keret legyen körülötte!</p>
</div>
<div style="position: absolute; top: 550px;">
<hr/>
<p>Válassz nehézségi szintet!</p>
<form name="nehezseg">
<button id="konnyu" onclick="clearTimeout(ido);">Könnyű</button>
<button id="normal" onclick="clearTimeout(ido);">Normál</button>
<button id="nehez" onclick="clearTimeout(ido);">Nehéz</button>
</form>
</div>
</body>
</html>
Hibakeresés
megáll, majd újratöltödik
Ha törlöd az űrlapot, vagy a kattintást eseményt javítod az alábbiak szerint, akkor utána már megszűnik az újratöltés.
Nagyon szépen köszönöm,
Note: If you use the <button> element in an HTML form, different browsers may submit different values. Use <input> to create buttons in an HTML form.
Az ilyeneket miért nem tüntetik fel jobban? :(
button
Én inkább a buttont javaslom,
Referenciaként az mdn-t javaslom.