如何在JavaScript中重複移動？

我在下載文件時使用JavaScript創建了一個progres欄。我已經完成了從服務器到客戶端的轉換，但是我不知道如何重複這個過程，所以進度會持續下去。我已經使用這個腳本。我需要做什麼？如何在JavaScript中重複移動？

<style type="text/css"> 
#apDiv1 { 
    position:absolute; 
    width:142px; 
    height:140px; 
    z-index:1; 
    background-color: #FFFFFF; 
    background-image: url(server.png); 
} 
#apDiv2 { 
    position:absolute; 
    width:142px; 
    height:140px; 
    z-index:2; 
    left: 500px; 
    top: 15px; 
    background-color: #FFFFFF; 
    background-image: url(laptop.png); 
} 
#apDiv3 { 
    position:absolute; 
    width:346px; 
    height:140px; 
    z-index:3; 
    left: 153px; 
    top: 15px; 
} 
body { 
} 
</style> 
<div id="apDiv1"></div> 
<div id="apDiv2"></div> 
<div id="apDiv3"><br /> 
    <script type="text/javascript"> 
<!-- 
var imgObj = null; 
var animate ; 
function init(){ 
    imgObj = document.getElementById('myImage'); 
    imgObj.style.position= 'relative'; 
    imgObj.style.left = '0px'; 
} 
function moveRight(){ 
imgObj.style.left = 200 + 200 + 'px'; 
if (10 <= left) { 
imgObj.style.left = (left + 300) + 'px'; 
imgObj.style.visibility='visible'; 

} else 

if (left>=500) { 
imgObj.style.left = '0px'; 
} 
} 
function animate(){ 
animate = setTimeout(moveRight,200); 

} 
window.onload =init; 
//--> 
</script> 
</head> 
<body> 
<form> 
<img src="file:///C|/Documents and Settings/Administrator/Desktop/New Folder (2)/folder.png" width="65" height="67" id="myImage" /> 
<p>Click the buttons below to handle animation</p> 
<input type="button" value="Shkarko" onclick="moveRight();" /> 
</form> 
</div>

來源

2012-11-16 Arsi

什麼是你正在使用的'left'變量？它沒有被聲明或設置在任何地方...... – Ian

需要與它一起使用的HTML。你可以用JS來搞定它嗎？ –

使用setInterval()，而不是setTimeout()：

function animate(){ 
    animateInterval = setInterval(moveRight,200); 
}

當你準備爲它停止動畫，來電clearInterval(animateInterval)

確保重命名animate變量，以便它並不衝突animate()函數。您還需要在某個時間實際撥打animate()才能開始。

編輯：您需要破解打開JavaScript控制檯，並期待在錯誤信息你（提示：打F12鍵）。您在moveRight()的第二個陳述上發生錯誤，因爲left未定義。

此外，animate()永遠不會被調用，所以您設置的任何間隔或超時都不會被觸發。

moveRight()存在邏輯錯誤。即使left被定義，您的else if語句也不會被調用。如果left是大於500，則它是也是大於10。將調用第一個if，因此else if將被忽略。

您的HTML無效。您有一個關閉</head>標記，沒有匹配的打開<head>標記。你有一個開放的<body>標籤，沒有關閉</body>標籤。如果你確實有有這些標籤，你會遇到其他麻煩 - <div>元素將在<head>，因此甚至不會呈現。即使開放標籤位於<head>中，最後一個<div>元素的結束標籤也會出現在<body>中。

來源

2012-11-16 19:54:18 gilly3

我試過這個，現在就把它移動到 – Arsi

@Arsi - 我看不到它以前會怎樣移動過一次。你的代碼邏輯看起來有點怪異。也許你沒有發佈全部。 – gilly3

我有更新的代碼源，我已經複製了所有我寫的HTML，它的工作，當我點擊按鈕 – Arsi

如何在JavaScript中重複移動？

回答

相關問題