Voy a hacer que 8 botones se muevan hacia la parte inferior de la pantalla uno por uno, pero tengo un problema.
aquí está mi código:
var i = 0; var j = 0; while(i < 7){ i++; interval[i] = setInterval(interval(), 10); function interval(){ y[j]++; if (parseInt(y[j]) >= window.innerHeight) { if(j == y.length - 1){ debugger; return clearInterval(interval[j]); } j++; return interval(); } button[j].style.top = y[j] + "px"; } console.log(i); } var body = document.getElementById("body"); var button = []; body.style.position = "relative"; var y = []; for (var i = 0; i < 8; i++) { y[i] = 0; button[i] = document.createElement("button"); button[i].onclick = clickme(); button[i].innerHTML = "بازی"; button[i].style.fontFamily = "b nazanin"; button[i].style.fontSize = "32pt"; button[i].style.position = "absolute"; body.appendChild(button[i]); } var i = 0; var j = 0; var Interval = setInterval(interval(), 10); function interval(){ y[j]++; if (parseInt(y[j]) >= window.innerHeight) { if(j == y.length - 1){ debugger; return clearInterval(Interval[j]); } j++; return interval(); } button[j].style.top = y[j] + "px"; } /* var button2 = document.createElement("button"); button2.onclick = clickme(); button2.innerHTML = "بازی"; button2.style.fontFamily = "b nazanin"; button2.style.fontSize = "32pt"; body.appendChild(button); body.appendChild(button2); body.style.position = "relative"; button2.style.position = "absolute"; button.style.position = "absolute"; */ function clickme() { } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="index.css"> </head> <body id="body"> </body> <script src="index.js"></script> </html> Código explicado:
button es mi matriz de elementos de botones. y es la matriz de Tops de mi botón. Mi problema es que el primer botón se moverá 7 veces (Número de Is) y cualquier cosa se detendrá. No sé qué hacer. Por favor, ayúdame.
Ok, lo hice con solo 2 botones y funcionó:
var button1 = document.getElementById("button1"); var button2 = document.getElementById("button2"); var startNext = false; var y1 = 0; var y2 = 0; var interval1 = setInterval(function(){ y1++; button1.style.top = y1 + "px"; if(y1>= window.innerHeight){ startNext = true; return clearInterval(interval1); } },10); var interval2 = setInterval(function(){ if(startNext){ y2++; button2.style.top = y2 + "px"; if(y2 >= window.innerHeight){ return clearInterval(interval2); } } },10); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="index.css"> </head> <body id="body" style="position: relative;"> <button id="button1" style="position: absolute;">graege</button> <button id="button2" style="position: absolute;">ges</button> </body> <script src="index.js"></script> </html>