javascript 2 秒后隐藏/显示图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23782522/
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
Hide/Show image after 2 seconds
提问by Madie
So I need to have an image alternatively appear and disappear every 2 seconds, I've been trying using javascript and I've gotten stuck, I feel like it's something so simple but i can't work it out, any help is appreciated.
所以我需要一个图像每隔 2 秒交替出现和消失，我一直在尝试使用 javascript，但我被卡住了，我觉得这很简单，但我无法解决，任何帮助表示赞赏。
HTML
HTML
<body onload="Show()">
<div align="center">
<img id="image" src="image1.png" height="200" width="200">
JAVASCRIPT
爪哇脚本
var Cntr=1
function Hide()
{
Cntr++;
document.getElementById("image").style.visibility="hidden";
if (Cntr==2){
setTimeout("Hide", 2000);
}
}
function Show()
{
Cntr--;
document.getElementbyId("image").style.visibility="visible";
if (Cntr==1) {
setTimeout("Show", 2000);
}
}
回答by John Bupit
There are a lot of problems with your code.
你的代码有很多问题。
As Juhana mentioned, you're using
setTimeoutwrong.Hide()isn't being called anywhere.
正如 Juhana 所提到的，你用
setTimeout错了。Hide()没有在任何地方被调用。
Here's what you can do:
您可以执行以下操作：
JavaScript
JavaScript
// Store the status of the image. Initially it is 'visible'.
var isVisible = "visible";
function blink() {
// Toggle the position.
if(isVisible == "visible") isVisible = "hidden";
else isVisible = "visible";
// Update it.
document.getElementById("image").style.visibility = isVisible;
// Repeat the process every 2 seconds.
setTimeout(blink, 2000);
}
HTML
HTML
<body onload="blink()">...</body>
工作示例。
回答by Friedrich
I changed your javscript to this:
我把你的 javascript 改成了这样：
var hidden = false;
setInterval(function(){
document.getElementById("image").style.visibility= hidden ? "visible" : "hidden";
hidden = !hidden;
},2000);
and deleted the onloadfunction from your <body>tag.
并onload从您的<body>标签中删除了该功能。
here is a JSFIDDLEas well.
这里还有一个JSFIDDLE。
回答by Hamster
in you setTimeout()s swap show and hide. Also, remove var Cntr. wont need it
在你 setTimeout()s 交换显示和隐藏。此外，删除 var Cntr。不需要它
function Hide()
{
document.getElementById("image").style.visibility="hidden";
setTimeout("Show()", 2000);
}
function Show()
{
document.getElementbyId("image").style.visibility="visible";
setTimeout("Hide()", 2000);
}
回答by Kunal Dethe
Try this -
试试这个 -
$(function($) {
setInterval(function() {
if($('#image').is(':visible'))
$('#image').hide();
else
$('#image').show();
}, 2000);
});
$(function($) {
setInterval(function() {
if($('#image').is(':visible'))
$('#image').hide();
else
$('#image').show();
}, 2000);
});
回答by Harmeet Singh Bhamra
Use jQuery instead of raw JS, it is more clean and simple. Use Delay and FadeTo functions with recursion and you are done with one simple function. Call this on page load.
使用 jQuery 而不是原始 JS，它更干净和简单。将 Delay 和 FadeTo 函数与递归结合使用，一个简单的函数就完成了。在页面加载时调用它。
function Flicker(){
$("#MyImage").delay(1500).fadeTo(300,0).delay(1500).fadeTo(300,1, Flicker);
}
Where: #MyImage is ID of image.
其中：#MyImage 是图像的 ID。
You can see this working @ http://jsfiddle.net/BM3qK/1/
你可以看到这个工作@ http://jsfiddle.net/BM3qK/1/
Hope this helps.
希望这可以帮助。
