js

Question

'u kullanarak bir div slaydı yapma Bu sorunun daha önce yanıtlanmış olabileceğini biliyorum, ancak yapmaya çalıştığım şeylere tam olarak uyan bir tane bulamadım. Hemen hemen js kullanarak 2 saniye sonra bir div slayt yapmak istiyorum. Şimdi sahip olduğum şey bu;

setTimeout("slide()", 1000) 
 

 
function slide() { 
 

 
    var myElement = document.querySelector("#box"); 
 
    myElement.style.left = 200px; 
 

 
    setTimeout("slide()", 2000) 
 

 
};

#box { 
 
    position: absolute; 
 
    left: 100px; 
 
    top: 100px; 
 
    width: 300px; 
 
    height: 300px; 
 
    background: blue; 
 
}

<div id="box">box</div>

şey yanlış ya da bu büyük bir yardım olacaktır cevaplayan bir soruya bir bağlantı yapıyorum! Teşekkür

Answer 1

sahip Nerede:

myElement.style.left = 200px; 

Olmalıdır:

myElement.style.left = '200px'; 

Ayrıca, bu:

setTimeout("slide()", 2000); 

gerçekten sadece bu olmalı:

setTimeout(slide, 2000); 

Answer 2

setTimeout ilk argümanı olarak bir işlev alır, ancak bir dize iletirsiniz. Bir dize olmasa bile, bunun nedeni setTimeout böyledir kullanmak ()

uygun şekilde, tekleme olur:

setTimeout(slide, 1000); 

function slide() { 

    var myElement = document.querySelector("#box"); 
    myElement.style.left = '200px'; // Fix this too! 

    setTimeout(slide, 2000) 

}; 

Answer 3

düzgün setTimeout işlevini kullanarak değil. Stil dizgisi kullanın.

setTimeout(function(){slide();}, 1000); 
function slide() { 
    var myElement = document.querySelector("#box"); 
    myElement.style.left = "200px"; 
    setTimeout(function(){slide();}, 2000); 
} 

veya basitçe

setTimeout(slide, 1000); 
function slide() { 
    var myElement = document.querySelector("#box"); 
    myElement.style.left = "200px"; 
    setTimeout(slide, 2000); 
} 

Neden ilk seçeneği kullanılır? bu şekilde parametrelerini geçirmek:

setTimeout(function(){slide(2000);}, 1000); 
function slide(delaytime) { 
    var myElement = document.querySelector("#box"); 
    myElement.style.left = "200px"; 
    setTimeout(function(){slide(delaytime);}, delaytime); 
}