如何在javascript中进行重复移动？答案

【问题标题】：How to make a repeat move in javascript?如何在javascript中进行重复移动？
【发布时间】：2012-11-16 19:48:48
【问题描述】：

我在下载文件时使用 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>

【问题讨论】：

您使用的left 变量是什么？它没有在任何地方声明或设置...
需要相应的 HTML。你能用JSFiddle吗？

标签： javascript function move

【解决方案1】：

使用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> 中，因此甚至不会被渲染。最后一个 <div> 元素的结束标签将出现在 <body> 中，即使打开标签位于 <head> 中。

【讨论】：

@Arsi - 我看不出它以前会如何移动。您的代码逻辑似乎有点不稳定。也许你没有发布所有内容。
我已经更新了代码源，我已经复制了我写的所有html，当我点击按钮时它工作
我能做什么？我如何编写 e java 脚本来进行进度下载，我想要它用于学校的一个项目。我不知道该怎么做。
@Arsi - 在开始尝试 JavaScript 之前，您似乎需要回到基础。也许从谷歌的beginner tutorial videos开始。
看我已经做到了：Project Project 1