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()ため、2 番目のステートメントでエラーが発生します。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 に答える