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

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

这是javascript位 （下面是html位）

var i=10；
var时间；
var countdown=document.getElementById（“倒计时”）；
var link=document.getElementById（“链接”）；
函数MyFunction3（）{
document.getElementById（“imageoef”）.style.visibility=“visible”；
link.style.visibility=“hidden”；
我--；
倒计时。innerHTML=i；
time=setTimeout（“MyFunction3（）；”，1000）；
if（i<1）{
倒计时。innerHTML=“”；
document.getElementById（“imageoef”）.style.visibility=“hidden”；
link.style.visibility=“可见”；
}
}

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:

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

var timeLeft=10；
var计数；
window.hideLink=函数hideLink（）
{
document.getElementById（“link”）.style.visibility=“hidden”；
计数=设置间隔（递减计数器，1000）；
设置超时（showLink，1000*timeLeft）；
};
函数递减器（）
{
timeLeft=timeLeft-1；
document.getElementById（“计时器”）.innerHTML=timeLeft+“秒”；
如果（timeLeft您的代码不工作，因为它将
倒计时设置为“”，但链接位于该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>



当我做这件事的时候，我把你的剧本改了一点…（）

var i=10，
时间
函数E（id）{return document.getElementById（id）}
E（'myInput'）。onclick=函数（）{
E（'imageoef'）。style.visibility='visible'；
E（'link'）。style.visibility='hidden'；
时间=设置间隔（函数（）{
我--；
E（‘倒计时’）。innerHTML=i；
if（i<1）{
清除间隔（时间）；
E（‘倒计时’）。innerHTML=“”；
E（'imageoef'）。style.visibility='hidden'；
E（'link'）。style.visibility='visible'；
}
}, 1000);
}

实际上，其他的变化都是不必要的，但还是有一些解释：


理想情况下，您需要2个函数，而不仅仅是1个-第一个用于触发倒计时，第二个用于计数器每次减小
setInterval
在这里比
setTimeout
更有用，因为它会自动循环，您不需要继续设置它；但是您确实需要使用
clearInterval
停止计时器。在您的原始代码中，您没有停止计时器，因此它将无限期地继续（但效果是隐藏的）
我更喜欢在javascript中设置
onclick
，而不是在html标记中设置
onclick
属性

（是您的原始代码，只有必要的更改才能使其正常工作。）
如果您将javascript放在页眉部分，您的代码可能无法工作。因为您在页面加载时存储了
倒计时和链接
元素值。此时，如果您的元素尚未加载到页面，您的
倒计时和链接
变量将为空。更好的做法是在您的按一下按钮

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

var i=10；
var时间；
var countdown=document.getElementById（“倒计时”）；
var link=document.getElementById（“链接”）；
函数MyFunction3（）{
倒计时=document.getElementById（“倒计时”）；
link=document.getElementById（“link”）；
document.getElementById（“imageoef”）.style.visibility=“visible”；
link.style.visibility=“hidden”；
我--；
倒计时。innerHTML=i；
time=setTimeout（“MyFunction3（）；”，1000）；
if（i<1）{
倒计时。innerHTML=“”；
document.getElementById（“imageoef”）.style.visibility=“hidden”；
link.style.visibility=“可见”；
}
}
id为imageoef的元素在哪里？应该在同行评审时修复。我没有包括它，因为它已经可以工作了，不需要注意这一点。它是html中的一个图像，一开始是隐藏的，但在按下按钮时出现。当计时器用完时消失。我似乎无法做到这一点他和链接一样。谢谢你的回复，但这不是我想要的。当我按下按钮时，计时器启动。当计时器达到零时，我希望链接出现。因此，将上面的代码放在一个函数中，与onclek事件一起吃午餐。这可能不是很明显，但问题实际上是关于倒计时er出现，从10运行到0，然后使链接在末尾重新出现。
<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>

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

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