我可以使用 javascript 隐藏 Html 链接吗？

Can I hide an Html link using javascript?

提问by user1951350

It's a simple exercise in which I want to hide a link I put in my Html file. But make it appear after a timer has run out in my function.

这是一个简单的练习，我想隐藏我放在 Html 文件中的链接。但是让它在我的函数中的计时器用完后出现。

This is the javascript bit (below is the html bit)

这是 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

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>

回答by Alex W

HTML:

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:

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/

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

回答by New Developer

If you have place the javascript in the header section your code may not work. Because you are storing the countdown and linkelement value at the page loading. At that time if your elements has not get loaded to the page your countdown and linkvars going to be null. better thing is access your elemet after your button click.

如果您将 javascript 放在标题部分，您的代码可能无法工作。因为您countdown and link在页面加载时存储元素值。那时，如果您的元素尚未加载到页面，则您的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";
    }
}

回答by Stuart

Your code doesn't work because it sets the countdowndiv's innerHTMLto '', but the link was inside that div, so gets deleted and you can't then make it reappear just by setting its visibility. You could fix it just by putting the link outside of the div in the HTML.

您的代码不起作用，因为它将countdowndiv设置innerHTML为“”，但链接位于该 div 内，因此被删除，然后您无法仅通过设置其可见性来使其重新出现。您可以通过将链接放在 HTML 中的 div 之外来修复它。

<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>

While I was at it I altered your script a bit... (jsfiddle)

当我在那里时，我稍微改变了你的脚本......（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);
}

Actually the other changes are all non-essential but some explanation anyway:

实际上，其他更改都不是必需的，但无论如何都要进行一些解释：

• you ideally want 2 functions, not just 1 - the first to trigger the countdown and the second for each time the counter decreases
• setIntervalis more useful than setTimeouthere, as it recurs automatically and you don't need to keep setting it; however you do then need to use clearIntervalto stop the timer. In your original code you were doing nothing to stop the timer so it would just carry on indefinitely (but with the effects hidden).
• I preferred to set onclickin javascript rather than having an onclickattribute of the html tag. But your original method does also work.

• 理想情况下，您需要 2 个功能，而不仅仅是 1 个 - 第一个触发倒计时，第二个触发计数器每次减少
• setInterval比setTimeout这里更有用，因为它会自动重复出现，您不需要继续设置它；但是，您确实需要使用clearInterval来停止计时器。在您的原始代码中，您没有采取任何措施来停止计时器，因此它会无限期地继续运行（但隐藏了效果）。
• 我更喜欢onclick在 javascript 中设置而不是具有onclickhtml 标签的属性。但是你原来的方法也行。

(Hereis your original code with only the necessary changes to make it work.)

（这是您的原始代码，仅进行了必要的更改以使其正常工作。）