Question

所以我需要每隔2秒钟出现一个图像并消失，我一直在尝试使用javascript而且我已经卡住了，我觉得它很简单但是我可以＆＃39;彻底解决，感谢任何帮助。

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

}

Answer 1

您的代码存在很多问题。

正如Juhana所说，您使用setTimeout错误。
Hide()并未在任何地方被调用。

以下是您可以做的事情：

的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

<body onload="blink()">...</body>

Working example

Answer 2

我将您的javascript更改为：

var hidden = false;

setInterval(function(){
    document.getElementById("image").style.visibility= hidden ? "visible" : "hidden";
    hidden = !hidden;
},2000);

并从onload标记中删除了<body>功能。

这里也是JSFIDDLE。

Answer 3

在你的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);


}

Answer 4

试试这个 -

$(function($) { setInterval(function() { if($('#image').is(':visible')) $('#image').hide(); else $('#image').show(); }, 2000); });

Answer 5

使用jQuery代替原始JS，它更干净简单。使用Delay和FadeTo函数进行递归，您可以使用一个简单的函数。在页面加载时调用它。

function Flicker(){
    $("#MyImage").delay(1500).fadeTo(300,0).delay(1500).fadeTo(300,1, Flicker);
}

其中：#MyImage是图像的ID。

你可以看到这个工作@ http://jsfiddle.net/BM3qK/1/

希望这有帮助。

2秒后隐藏/显示图像

5 个答案:

的JavaScript

HTML