2秒后隱藏/顯示圖像

Question

所以我需要有一個圖像交替出現並且每2秒消失一次，我一直在嘗試使用javascript而且我已經卡住了，我覺得它很簡單，但我無法解決，任何幫助都表示贊賞。

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>

工作實例 。

Answer 2

我把你的javscript更改為：

var hidden = false;

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

並從<body>標簽中刪除了onload函數。

這里也是一個JSFIDDLE 。

Answer 3

在你setTimeout（）的交換顯示和隱藏。 另外，刪除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 個解決方案

解決方案1
2 2014-05-21 12:03:58

JavaScript的

HTML

解決方案2
2 已采納 2014-05-21 12:07:22

解決方案3
0 2014-05-21 12:00:56

解決方案4
-1 2014-05-21 12:10:01

解決方案5
-1 2014-05-21 13:06:12

2秒后隱藏/顯示圖像

問題描述

5 個解決方案

解決方案1 2 2014-05-21 12:03:58

JavaScript的

HTML

解決方案2 2 已采納 2014-05-21 12:07:22

解決方案3 0 2014-05-21 12:00:56

解決方案4 -1 2014-05-21 12:10:01

解決方案5 -1 2014-05-21 13:06:12

解決方案1
2 2014-05-21 12:03:58

解決方案2
2 已采納 2014-05-21 12:07:22

解決方案3
0 2014-05-21 12:00:56

解決方案4
-1 2014-05-21 12:10:01

解決方案5
-1 2014-05-21 13:06:12