Question

我试图制作一个脚本，在10分钟后为用户显示图像。把它想象成一个计时器。一旦计时器达到0，就会出现一个图像。我是javascript的新手，所以我真的不知道从哪里开始。有谁知道一个可以完成这项工作的脚本，或者可能指出我正确的方向？感谢。

Answer 1

HTML：

<img src="yourimage.jpg" id="yourImageId" style="display: none" />

JS：

setTimeout(function() { document.getElementById('yourImageId').display('block'); }, 10 * 60 * 1000);

使用setTimeout设置定时器在10 * 60 * 1000 ms（= 10分钟）后触发;它触发功能并显示隐藏的图像。前整理把你的css隐藏在适当的css文件中。

Answer 2

这是您应该将图像添加到HTML中的方式

<img id="myimage" src="" style="display:none" />

这是您的JavaScript：

<script type="text/javascript">
setTimeout(function(){
    document.getElementById('myimage').style.display = 'block';
},600000);
</script>

你可以test it here

Answer 3

您可以为幻灯片中的每张图片重复此操作吗？我已经尝试过你的代码停电，比如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);
})();

Answer 4

看看setTimeout。您可以最初隐藏图像（使用CSS display: none;），并在超时完成后显示图像。

示例：

var timeout = setTimeout(function() {
    document.getElementById('imageID').style.display = 'block';
}, 10000); // of course you have to set the right time

如果您想检测用户的不活动状态，请查看Detecting idle time in JavaScript elegantly和others。

Answer 5

如果你可以使用jQuery 1.4+它有jQuery延迟函数，请在javascript中查找setTimeOut方法。

Answer 6

您可以使用setTimeout()功能来实现此目的。该函数有两个参数，一个运行函数和一个延迟时间。 10分钟= 600秒，这是600,000毫秒，这是JS使用的时间尺度。如果你当然使用jQuery，那么你可以做这样的事情：

setTimeout(function() {
    $("#my-img").show();
},600000);

或者如果没有使用常规JS使用：

setTimeout(function() {
    document.getElementById("my-img").style.display = "block";
}, 600000);

Answer 7

setTimeout(function(){
    // do some stuff here, like add an image for example...
}, (60 * 10 * 1000))
// seconds * minutes * 1000

如何使用javascript在10分钟后显示图像？

7 个答案: