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

标签 javascript html hyperlink

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

最佳答案

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/

关于javascript - 我可以使用 javascript 隐藏 Html 链接吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14173768/

相关文章:

html - 根据页面位置加载 CSS

javascript - 带有静态查询字符串的动态 URL

JavaScript : ParseInt the computed transform matrix values returns NaN

javascript - Chrome 扩展 - 与外部程序通信

PHP 联系表单失败

JavaScript - 无论窗口大小如何修复图像

html - 同一 HTML 页面上的不同颜色链接

html - 外部 CSS 文件不适用于某一页

javascript - 递归更新一个值到顶部的方法

javascript - 如何取消 AngularJS 中的 $resource 请求