Question

这是一个简单的练习，我想隐藏我放在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>

Answer 1

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/

Answer 2

如果您将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";
    }
}

Answer 3

您的代码无效，因为它将countdown div的innerHTML设置为''，但链接位于该div内部，因此会被删除，然后您无法再将其重新显示设置其可见性。您可以通过将div中的链接放在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是您的原始代码，只需进行必要的更改即可使其正常工作。）

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

3 个答案: