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 は null になります。ボタンをクリックした後に要素にアクセスすることをお勧めします。 

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

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>

私がそれをしている間、私はあなたのスクリプトを少し変更しました... ( 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);
}

実際、他の変更はすべて重要ではありませんが、とにかくいくつかの説明があります。

  • 理想的には、1つだけでなく2つの機能が必要です.1つ目はカウントダウンをトリガーし、2つ目はカウンターが減少するたびに
  • setIntervalsetTimeout自動的に繰り返され、設定し続ける必要がないため、ここよりも便利です。clearIntervalただし、タイマーを停止するには を使用する必要があります。元のコードでは、タイマーを停止するために何もしていなかったため、タイマーは無期限に続行されます (ただし、効果は隠されています)。
  • htmlタグonclickの属性を持つよりも、JavaScriptで設定することを好みました。onclickしかし、あなたの元の方法も機能します。

(これは、機能させるために必要な変更のみを加えた元のコードです。)

于 2013-01-05T16:58:26.053 に答える