Javascript：在主窗口中弹出带有电影的电影

2022-04-15 22:52:53

我是一个刚接触Javascript的新手,并且正在一个网页上尝试该网页,按下按钮后,会弹出一个窗口,其中显示了带有主窗口中图像的循环“电影”.从我尝试过谷歌搜索的过程中,我可以感觉到我已经很接近了,但是有一些东西使我难以理解.

我知道随后的结果将导致两个独立的问题,其中有两个独立的问题.但我认为,因为两者都与相同的问题/目标相关,所以这可能属于一个(尽管很长)帖子.因此,我希望它的大小不会使人们感到过分……;-)

无论如何,这是我认为是相关代码的快照：

<html>
<head>
<script language="javascript">
function wait() {}
function anim() {
  var timeout; var next;
  var popuptitle='Movie';
  var main=parent;
  var popup=parent.open("","",
      "width="+main.document.images[0].width+",height="+(main.document.images[0].height+40)+
      "toolbar=no,location=no,directories=no,status=no,"+
      "menubar=no,scrollbars=no,copyhistory=no,resizable=no");
  popup.document.write('<html><head><title>'+popuptitle+'</title></head><body>'+
    '<p align="center"><img name="anim" width="100%" alt=""></p>'+
    '<p align="center"><button name="close" onclick="javascript:window.close();">Close</button></p>'+
    '</body></html>');
  /*while(true)*/
  for(i=0; i<main.document.images.length; i++) {
    next=main.document.images[i].src;
    popup.document.images[0].src=next;
    timeout=setTimeout('wait();',500);
  }
}
</script>
</head>
<body><h1>Pictures + animation</h1>
<p><button name="exec" onclick="javascript:anim();">Animate (popup)</button></p>
<p><img src="img1.jpg"></p>
....
<p><img src="img16.jpg"></p>
</body>
</html>

我为此输入了相关文字/对其进行了修改；我希望我没有打错字…

我正在使用Debian Etch的Iceweasel(Firefox 2.x更名)；我没有在其他浏览器上尝试过.在Iceweasel中,发生的事情是：

>弹出窗口会按预期方式显示,但似乎循环直接进入了最后一张图片. setTimeout似乎对图片之间的“暂停”没有影响.
>显示最后一张图片,并且弹出窗口的状态栏在中途显示进度条,表明正在加载某些内容.

所以我的问题是：

>我应该如何在这里使用setTimeout调用？我试图使它称为“空”函数,因此它在具有setTimeout()的循环中用作“暂停”,其中该循环从主窗口的images数组更新弹出的单个图像.
>我发现,如果我通过从外部文件(anim.html)加载HTML代码来加载弹出窗口,则状态栏似乎从“进度栏”显示该窗口一直在等待重新加载.我仍将尝试是否来自其他地方,但是我想知道是否重要/相关的是我使用window.open()从外部文件加载HTML页面,而不是加载一个空窗口并执行对其进行writeln以“编写” HTML.
>我已在周期中评论了while(true),因为否则浏览器将停止响应,并且计算机将使用100％CPU.我可以在for循环中进行if运算,以将计数器在最后一项之前设置回零,但是还有另一种“优雅”或“更合适”的方法可以将其设为无限循环-还是while(true)可以正好？

我会先感谢您的评论,并在可能的情况下提供指向现有书目的指针,以描述类似的解决方案.

解决方法:

我认为这并不意味着您认为这意味着什么：

timeout=setTimeout('wait();',500);

显然,您正在尝试与此睡眠().这不是JS timeouts的工作方式-发生在代码中的click上：您遍历images数组,立即将图像从0th切换到1st …切换到last；同样,在每个开关上,您都说“从现在开始500 ms运行wait()函数”.

window.setTimeout(foo,bar,baz)执行此操作：它将计时器设置为bar毫秒并返回.代码执行从下一条语句继续.在bar毫秒后,将自动调用函数foo(baz). setTimeout的第三个及以下参数是可选的,并将在第一个参数中传递给函数.

您可以做什么：

function anim() { 
  var timeout; var next;
  var popuptitle='Movie';
  var main=parent;
  var popup=parent.open("","",
      "width="+main.document.images[0].width+",height="+
      (main.document.images[0].height+40)+
      "toolbar=no,location=no,directories=no,status=no,"+
      "menubar=no,scrollbars=no,copyhistory=no,resizable=no");
  popup.document.write('<html><head><title>'+popuptitle+
    '</title></head><body>'+
    '<p align="center"><img name="anim" width="100%" alt=""></p>'+
    '<p align="center"><button name="close" ' + 
    'onclick="javascript:window.close();">Close</button></p>'+
    '</body></html>');

  // *changed below*
  // start the animation with the 0th image
  next_image(0,main.document.images,popup.document.images[0]);
}

function next_image(index,source_image_array,target_image) {
    // if not at end of array
    if (source_image_array.length < index) { 
        next=source_image_array[index].src;
        target_image.src=next;

        // do this again in 500 ms with next image
        window.setTimeout(next_image,500, index+1 ,
                            source_image_array,target_image);
    }
}

这样,在anim()函数的末尾,调用next_image(0),它将图像设置为数组中的第0个,并设置一个计时器在500毫秒内调用next_image(1)；发生这种情况时,图像将被设置为1st,计时器将被设置为在另外500毫秒内调用next_image(2),依此类推,直到数组中没有更多图像为止.

码农公寓

相关文章