Fatal编程技术网
  • javascript/
  • 如何在javascript中进行重复移动？

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

javascript function

如何在javascript中进行重复移动？,javascript,function,move,Javascript,Function,Move,我正在使用JavaScript在下载文件时制作一个进度条。我已经把它作为一张图片从服务器移动到客户端，但我不知道如何让它重复，所以进程将继续。我用过这个脚本。我该怎么办 <style type="text/css"> #apDiv1 { position:absolute; width:142px; height:140px; z-index:1; background-color: #FFFFFF; background-image:

我正在使用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>


#apDiv1{
位置：绝对位置；
宽度：142px；
高度：140像素；
z指数：1；
背景色：#FFFFFF；
背景图片：url（server.png）；
}
#apDiv2{
位置：绝对位置；
宽度：142px；
高度：140像素；
z指数：2；
左：500px；
顶部：15px；
背景色：#FFFFFF；
背景图片：url（laptop.png）；
}
#第3章{
位置：绝对位置；
宽度：346px；
高度：140像素；
z指数：3；
左：153px；
顶部：15px；
}
身体{
}


单击下面的按钮以处理动画
使用
setInterval（）
而不是
setTimeout（）
：

当您准备好让它停止动画时，请调用
clearInterval（animateInterval）

确保重命名
animate
变量，使其不会与
animate（）
函数冲突。您还需要在某个时候实际调用
animate（）
，才能开始

编辑：您需要打开JavaScript控制台，查看收到的错误消息（提示：按f12键）。由于未定义
left
，因此
moveRight（）
的第二条语句出现错误

另外，从不调用
animate（）
，因此您设置的任何间隔或超时都不会被触发

moveRight（）
中存在逻辑错误。即使定义了
left
，也永远不会调用您的
else if
语句。如果
left
大于
500
，则它也大于
10
。第一个
if
将被调用，而
else if
将被忽略

您的HTML无效。您有一个关闭的
标记，但没有匹配的打开的
标记。您有一个打开的
标记，而没有一个关闭的
标记。如果您确实有这些标记，那么您将遇到其他问题，
元素将位于
中，因此甚至不会被渲染。最后一个
元素的结束标记将出现在
中，即使打开的标记在

中，您正在使用的
左
变量是什么？它没有声明或设置在任何地方…需要与之配套的HTML。你能躲开它吗？@Arsi-我不知道它以前会怎么移动。您的代码逻辑似乎有点不可靠。也许你没有发布所有内容。我已经更新了源代码，我已经复制了我编写的所有html，当我点击按钮时它就工作了。我能做什么？我如何编写e-java脚本来下载程序，我想把它用于学校的一个项目。我不知道还需要做什么。@Arsi-看起来在开始尝试使用JavaScript之前，您需要回到基础。也许从谷歌开始。看，我已经做到了： 
function animate(){
    animateInterval = setInterval(moveRight,200);
}