javascript 如何使用javascript在10分钟后显示图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6397671/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make an image appear after 10 minutes using javascript?
提问by user796855
Im trying to make a script in which an image appears for the user after 10 minutes. Think of it as a timer. And once the timer reaches 0, an image appears. Im pretty new to javascript, so I really have no idea where to start. Does anyone know of a script which will do the job, or maybe point me in the right direction? Thanks.
我正在尝试制作一个脚本，其中在 10 分钟后为用户显示图像。把它想象成一个计时器。一旦计时器达到 0，就会出现一个图像。我对 javascript 很陌生，所以我真的不知道从哪里开始。有谁知道可以完成这项工作的脚本，或者可能会指出我正确的方向？谢谢。
回答by fijter
HTML:
HTML：
<img src="yourimage.jpg" id="yourImageId" style="display: none" />
JS:
JS：
setTimeout(function() { document.getElementById('yourImageId').display('block'); }, 10 * 60 * 1000);
with setTimeout you set the timer to trigger after 10 * 60 * 1000 ms ( = 10 minutes); It triggers the function and display's the hidden image. Fore tidyness put your css for hiding the image in a proper css file.
使用 setTimeout 将计时器设置为在 10 * 60 * 1000 毫秒（= 10 分钟）后触发；它触发功能并显示隐藏的图像。Fore tidyness 将用于隐藏图像的 css 放在适当的 css 文件中。
回答by Shef
This is how you should add your image to your HTML
这是您应该如何将图像添加到 HTML 中
<img id="myimage" src="" style="display:none" />
Here is your JavaScript:
这是您的 JavaScript：
<script type="text/javascript">
setTimeout(function(){
document.getElementById('myimage').style.display = 'block';
},600000);
</script>
You can test it here
你可以在这里测试
回答by user2317959
Can you repeat this for every image in a slideshow? I have tried your code to blackout for, say 500 ms, the transition between previous image and the next image to prevent their concatenation. Since the (random) images have a very different aspect ratio, I do not use (cross)fading here. Now, your code only works once, right at the start of the show, and then the images are concatenated again. My piece of code
你能对幻灯片中的每个图像重复这个吗？我已经尝试过将您的代码中断，例如 500 毫秒，前一个图像和下一个图像之间的过渡以防止它们的连接。由于（随机）图像具有非常不同的纵横比，我在这里不使用（交叉）淡入淡出。现在，您的代码只能在节目开始时工作一次，然后再次连接图像。我的一段代码
#blackit { display: none; }
<body>
<script>
document.write('<img id="blackit" onload="resizeImage()" margin="0" border="0" alt="" src="" '+rimages[Math.floor(Math.random()*(rimages.length))]+'">')
var timeoutID = setTimeout(function() { document.getElementById('blackit').style.display ='block'; }, 500);
var paused = false;
document.onkeydown = function(evt) {
evt = evt || window.event;
if (evt.keyCode == 32) {
paused = !paused;
}
};
(function loop() {
var rantime = Math.round(Math.random() * 7000) + 1000;
timeoutID;
setTimeout(function() {
if (!paused) {
rotateImage();
}
loop();
}, rantime);
})();
回答by Felix Kling
Have a look at setTimeout. You can hide the image initially (with CSS display: none;) and after the timeout finished, show the image.
看看setTimeout。您可以最初隐藏图像（使用 CSS display: none;），并在超时完成后显示图像。
Example:
例子：
var timeout = setTimeout(function() {
document.getElementById('imageID').style.display = 'block';
}, 10000); // of course you have to set the right time
As you want to detect user inactivity, also have a look at Detecting idle time in JavaScript elegantlyand others.
当你想检测用户不活动，也看看在JavaScript中检测空闲时间优雅和他人。
回答by sushil bharwani
Look for setTimeOut method in javascript if you can use jQuery 1.4+ it has jQuery delay function.
如果您可以使用 jQuery 1.4+ 它具有 jQuery 延迟功能，请在 javascript 中查找 setTimeOut 方法。
回答by Hyman Franklin
You could use the setTimeout()function to achieve this. The function takes two parameters, a function to run and the time to delay. 10 minutes = 600 seconds which works out as 600,000 milliseconds, which is the timescale JS uses. So you could do something like this, if you were using jQuery of course:
您可以使用setTimeout()函数来实现这一点。该函数有两个参数，一个是要运行的函数，另一个是要延迟的时间。10 分钟 = 600 秒，相当于 600,000 毫秒，这是 JS 使用的时间刻度。所以你可以做这样的事情，如果你当然使用 jQuery：
setTimeout(function() {
$("#my-img").show();
},600000);
Or if not do it with regular JS using:
或者，如果不使用常规 JS 执行此操作：
setTimeout(function() {
document.getElementById("my-img").style.display = "block";
}, 600000);
回答by Billy Moon
setTimeout(function(){
// do some stuff here, like add an image for example...
}, (60 * 10 * 1000))
// seconds * minutes * 1000
