0

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

1 回答 1

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>.

于 2012-11-16T19:54:18.117 回答