3

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

3 回答 3

4

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-05T16:34:09.683 回答
2

如果您将 javascript 放在标题部分，您的代码可能无法正常工作。因为您countdown and link在页面加载时存储元素值。那时，如果您的元素尚未加载到页面，则您的countdown and linkvars 将为空。更好的方法是在您单击按钮后访问您的元素。 

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-05T18:46:52.183 回答
0

Your code doesn't work because it sets the countdown div's innerHTML to '', 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.

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

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
  • setInterval is more useful than setTimeout here, as it recurs automatically and you don't need to keep setting it; however you do then need to use clearInterval to 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 onclick in javascript rather than having an onclick attribute of the html tag. But your original method does also work.

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

于 2013-01-05T16:58:26.053 回答