我可以隱藏使用javascript的Html鏈接嗎？

這是一個簡單的練習，我想隱藏一個鏈接，放在我的Html文件中。但是讓它在我的函數中有一個定時器用完後出現。我可以隱藏使用javascript的Html鏈接嗎？

這是JavaScript位（下面是HTML位）

var i = 10; 
var time; 
var countdown = document.getElementById("countdown"); 
var link = document.getElementById("link"); 

function MyFunction3() { 
    document.getElementById("imageoef").style.visibility="visible"; 
    link.style.visibility="hidden"; 

    i--; 
    countdown.innerHTML= i; 
    time = setTimeout ("MyFunction3();",1000); 

    if (i < 1) { 
     countdown.innerHTML=""; 
     document.getElementById("imageoef").style.visibility="hidden"; 
     link.style.visibility="visible"; 
    } 
}

HTML

<img src="images/loading.gif" alt="Loading..." id="imageoef" style="visibility:hidden" /> 
<form method="post"> 
    <input onclick="MyFunction3();" type="button" value="start download" /> 
</form> 

<div id="countdown"> 
    <a id="link" href="http://freelanceswitch.com/freelance-freedom/freelance-freedom-2/" >Your download is ready!</a> 
</div>

來源

2013-01-05 user1951350

其中是id imageoef的元素？ –

在同行評審時應該被修正 – sschrass

我沒有包括它，因爲那個已經工作了，不需要注意那一點。這是一個html格式的圖像，它首先被隱藏起來，但在按下按鈕時會出現。當計時器用完時消失。我似乎無法做到與鏈接相同。 – user1951350

HTML：

<input type="button" onclick="hideLink()" value="Start" /> 
<p id="timer"></p> 
<a id="link" href="">This link is hidden for 10 seconds.</a>

JavaScript的：

var timeLeft = 10; 
var count; 
window.hideLink = function hideLink() 
{ 
    document.getElementById("link").style.visibility = "hidden"; 
    count = setInterval (decrementTimer, 1000); 
    setTimeout (showLink,1000 * timeLeft); 
}; 

function decrementTimer() 
{ 
    timeLeft = timeLeft - 1; 
    document.getElementById("timer").innerHTML = timeLeft + " seconds"; 
    if(timeLeft <= 0) 
    { 
    window.clearInterval(count); 
    document.getElementById("timer").style.visibility = "hidden"; 
    } 
} 

function showLink() 
{ 
    document.getElementById("link").style.visibility = "visible"; 
}

http://jsfiddle.net/rPnNr/4/

來源

2013-01-05 16:34:09

感謝您的回覆，但這不是我正在尋找的。當我按下按鈕時，計時器被關閉。當計時器達到零時，我希望鏈接出現。 – user1951350

所以把上面的代碼放在一個函數中，用oncleck事件午餐吧 – Ricain

@ user1951350我添加了代碼，通過點擊按鈕來啓動它。 –

您的代碼不起作用，因爲它設置countdown div的innerHTML爲「」，但鏈接是該分區裏面，所以被刪除，你不能再讓它通過設置其知名度只是再現。您可以通過將鏈接放在HTML外部來修復它。

<img src="images/loading.gif" alt="Loading..." id="imageoef" style="visibility:hidden" 
/> 
<form method="post"> 
    <input id="myInput" type="button" value="start download" /> 
</form> 
<div id="countdown"> 
</div><a id="link" href="http://freelanceswitch.com/freelance-freedom/freelance-freedom-2/">Your download is ready!</a>

當我在這我改變你的腳本有點...（jsfiddle）

var i = 10, 
    time; 
function E(id) {return document.getElementById(id) } 
E('myInput').onclick = function() { 
    E('imageoef').style.visibility = 'visible'; 
    E('link').style.visibility = 'hidden'; 
    time = setInterval(function() { 
    i--; 
    E('countdown').innerHTML = i; 
    if (i < 1) { 
     clearInterval(time); 
     E('countdown').innerHTML = ''; 
     E('imageoef').style.visibility = 'hidden'; 
     E('link').style.visibility = 'visible'; 
    } 
    }, 1000); 
}

其實其他的變化是所有非必要的，但一些解釋呢：

你最好想要2個功能，不只是1個 - 第一個觸發倒計時，第二個每次計數器減少時
setInterval在這裏比setTimeout更有用，因爲它會自動復現，您不需要繼續設置;但是，您需要使用clearInterval來停止定時器。在你原來的代碼中，你沒有做任何事情來阻止定時器，所以它會無限期地繼續（但隱藏效果）。
我喜歡在javascript中設置onclick而不是具有html標記的onclick屬性。但是你的原始方法也可以工作。

（Here是你的原代碼，只有進行必要的修改，使其工作。）

來源

2013-01-05 16:58:26 Stuart

如果發生在頭部分的JavaScript代碼可能無法正常工作。因爲您在頁面加載時存儲了countdown and link元素值。那時如果你的元素沒有加載到頁面，你的變量將變爲空值。點擊按鈕後，訪問您的elemet會更好。

var i = 10; 
var time; 
var countdown = document.getElementById("countdown"); 
var link = document.getElementById("link"); 

function MyFunction3() { 
    countdown = document.getElementById("countdown"); 
    link = document.getElementById("link"); 

    document.getElementById("imageoef").style.visibility="visible"; 
    link.style.visibility="hidden"; 

    i--; 
    countdown.innerHTML= i; 
    time = setTimeout ("MyFunction3();",1000); 

    if (i < 1) { 
     countdown.innerHTML=""; 
     document.getElementById("imageoef").style.visibility="hidden"; 
     link.style.visibility="visible"; 
    } 
}

來源

2013-01-05 18:46:52

我可以隱藏使用javascript的Html鏈接嗎？

回答

相關問題