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

发布于 2024-07-15 20:32:20 字数 2470 浏览 9 评论 0原文

我是一个大多数 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() 的循环中充当“暂停”作用，其中该循环从主窗口的弹出单个图像更新图像数组。
我发现，如果我通过从外部文件 (anim.html) 加载 HTML 代码来加载弹出窗口，状态栏似乎会从“进度条”显示窗口一直等待重新加载。如果它来自其他地方，我仍然会尝试，但我想知道使用 window.open() 从外部文件加载 HTML 页面是否重要/相关，与加载一个空窗口并对其进行 writeln 来“写入” HTML 相比。
我对循环中的 while(true) 进行了注释，因为否则浏览器将停止响应，计算机的 CPU 利用率将达到 100%。我可以在 for 循环中创建一个 if 来在最后一项之前将计数器设置回零，但是还有另一种“优雅”或“更合适”的方法吗这是一个无限循环——或者 while(true) 做得很好吗？

我提前感谢您的评论，如果可能的话，请提供指向描述类似解决方案的现有参考书目的指针。

原文

I'm a mostly-newbie Javascript'er and I'm trying it on a webpage which, upon pressing a button, pops up a window which shows a cyclic "movie" with the images from the main window. From what I've tried Googling around I can sense I'm pretty close, but something is eluding me.

I know what follows results in two separate questions, which merit two separate posts. But I figure because both are related with the same problem/objective, maybe this belongs in a single (albeit long) post. So I hope the size of it doesn't enfuriate people too much ... ;-)

Anyway, here's a snapshot of what I think is the relevant code:

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

I typed/adapted this for relevancy; I hope I didn't make any typos...

I'm working with the Debian Etch's Iceweasel (Firefox 2.x rebrand); I haven't tried this with other browsers. In Iceweasel, what happens is:

The popup show up as is supposed to, but it seems the cycle goes straight to the last picture. setTimeout seems to have no effect in "pausing" between pictures.
The last picture is shown, and the popup's status bar shows its progress bar midway, suggesting something is loading.

So my questions are:

How exactly am I supposed to use the setTimeout call here? I've tried to make it call an "empty" function, so it works as a "pause" in the cycle having the setTimeout(), where the cycle updates the popup single image from the main window's images array.
I find that, if I load the popup by loading the HTML code from an external file (anim.html), the statusbar seems to show from the "progress bar" that the window keeps expecting a reload. I'm still going to try if it's from somewhere else, but what I want to know if it is important/relevant that I load the HTML page from an external file with the window.open(), versus loading an empty window and doing a writeln to it to "write" the HTML.
I've commented the while(true) in the cycle, because otherwise the browser stops responding and the computer goes to 100% CPU. I could make an if in the for cycle to set the counter back to zero before the last item, but is there another "elegant" or "more appropriate" way to make this an infinite cycle -- or does the while(true) do just fine?

I appretiate your comments in advance, and if possible a pointer to existing bibliography describing similar solutions.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

我纯我任性 2024-07-22 20:32:20

我不认为这意味着你所认为的意思：

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

显然，你正试图用这个来sleep()。这不是 JS 超时的工作方式 - 这种情况发生在 onclick 在代码中：循环遍历图像数组，立即将图像从第 0 个切换到第 1 个……到最后一个；此外，在每个开关上，您说“从现在起 500 毫秒运行 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) 的计时器；当发生这种情况时，图像将被设置为第一个图像，并且计时器将被设置为在另外 500 毫秒内调用 next_image(2)，依此类推，直到数组中不再有图像。

I do not think this means what you think it means:

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

Apparently, you're trying to sleep() with this. That's not how the JS timeouts work - this happens onclick in your code: you loop through the images array, immediately switch images from 0th to 1st ... to last; also, on every switch, you say "run the wait() function, 500 ms from now".

window.setTimeout(foo,bar,baz) does this: it sets a timer for bar milliseconds and returns. Code execution continues with the next statement. After bar milliseconds, function foo(baz) is automagically called. The 3rd and following arguments for setTimeout are optional and will be passed to the function in 1st argument.

What you could do:

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);
    }
}

This way, at the end of your anim() function, you call next_image(0), which sets the image to the 0th in array and sets a timer to call next_image(1) in 500 ms; when that happens, the image will be set to the 1st and a timer will be set to call next_image(2) in another 500 ms, and so on, until there are no more images in the array.

回复收藏 0 原文

两仪 2024-07-22 20:32:20

这不是对您问题的直接答案，而是使用 JavaScript 框架 jQuery 和插件，您可以轻松拥有图像幻灯片。我认为您想从头开始学习 JavaScript 很好，但是采用 jQuery+插件路线可以节省您很多很多时间。哎呀，即使您想 DIY，我仍然建议使用 jQuery，因为它使 DOM 操作变得更加容易。

回复收藏 0 原文

靖瑶 2024-07-22 20:32:20

致 Piskvor：谢谢您的回复，这正是我需要知道的：

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

因此，下面是正确的示例；我希望它能帮助其他 Google 员工；-)

<html>
<head>
<script language="javascript">
function display(img,i, popup) {
  var next; var after_ms=750; var max=img.length;
  if(i>=max) i=0;  /* so we can cycle infinitely */
  next=img[i].src; popup.document.images[0].src=next;
  setTimeout(display,(i+1<max?after_ms:4*after_ms), img,i+1,popup);
}
function anim() {
  var popuptitle='Movie';
  var popup_properties="width="+document.images[0].width+
      ",height="+(document.images[0].height+40)+
      ",toolbar=no,location=no,directories=no,status=no"+
      ",menubar=no,scrollbars=no,copyhistory=no,resizable=no"
  var popup=parent.open("", popuptitle, popup_properties);
  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>');
  display(document.images,0, popup);
}
</script>
</head>
<body><h1>Pictures + animation</h1>
<p><button name="exec" onclick="javascript:anim();">Animate (popup)</button></p>
<p><img name="1"  src="img1.jpg"></p>
// .... 
<p><img name="16" src="img16.jpg"></p>
</body>
</html>

我还了解到：

while(true) 是邪恶的，它会使浏览器挂起。相反，我在 anim() 函数中使用了一个条件，该条件在索引到达末尾时将索引设置回零。

To Piskvor: Thank you for your reply, this is exactly what I needed to know:

setTimeout(foo,bar,baz) does this: it sets a timer for bar milliseconds and returns. Code execution continues with the next statement. After bar milliseconds, function foo(baz) is automagically called. The 3rd and following arguments for setTimeout are optional and will be passed to the function in 1st argument.

So, here follows the corrected example; I hope it helps other Googlers ;-)

<html>
<head>
<script language="javascript">
function display(img,i, popup) {
  var next; var after_ms=750; var max=img.length;
  if(i>=max) i=0;  /* so we can cycle infinitely */
  next=img[i].src; popup.document.images[0].src=next;
  setTimeout(display,(i+1<max?after_ms:4*after_ms), img,i+1,popup);
}
function anim() {
  var popuptitle='Movie';
  var popup_properties="width="+document.images[0].width+
      ",height="+(document.images[0].height+40)+
      ",toolbar=no,location=no,directories=no,status=no"+
      ",menubar=no,scrollbars=no,copyhistory=no,resizable=no"
  var popup=parent.open("", popuptitle, popup_properties);
  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>');
  display(document.images,0, popup);
}
</script>
</head>
<body><h1>Pictures + animation</h1>
<p><button name="exec" onclick="javascript:anim();">Animate (popup)</button></p>
<p><img name="1"  src="img1.jpg"></p>
// .... 
<p><img name="16" src="img16.jpg"></p>
</body>
</html>

What I've also learned:

The while(true) is evil, it makes the browser hang. Instead, I've used a condition in the anim() function which sets the index back to zero when it reaches the end.

回复收藏 0 原文

~没有更多了~