1

ねえ、どうすればダウンロードリンクを非表示にして、カウントダウンタイプのものを作成できますか。たぶんそれを10からカウントダウンして、ダウンロードリンクが表示されるようになったら、jsで実行するのが最善でしょうか？

誰かがこれを行う方法を知っていますか？：D

ありがとう

4

4 に答える 4

2

完全な例：

<span id="countdown"></span>
<a id="download_link" href="download.zip" style="display:none;">Download</a>
<noscript>JavaScript needs to be enabled in order to be able to download.</noscript>
<script type="application/javascript">
(function(){
   var message = "%d seconds before download link appears";
   // seconds before download link becomes visible
   var count = 10;
   var countdown_element = document.getElementById("countdown");
   var download_link = document.getElementById("download_link");
   var timer = setInterval(function(){
      // if countdown equals 0, the next condition will evaluate to false and the else-construct will be executed
      if (count) {
          // display text
          countdown_element.innerHTML = "You have to wait %d seconds.".replace("%d", count);
          // decrease counter
          count--;
      } else {
          // stop timer
          clearInterval(timer);
          // hide countdown
          countdown_element.style.display = "none";
          // show download link
          download_link.style.display = "";
      }
   }, 1000);
})();
</script>
于 2011-03-05T21:53:58.387 に答える
1

setTimeout関数を見てください。あなたは次のようなことをすることができます：

function displayLink() {
  document.getElementById('link_id').style.display = 'block';
}

setTimeout(displayLink, 10000);
于 2011-03-05T21:38:18.460 に答える
1

これにはsetIntervalを使用できます。setIntervalはタイマーのように動作し、特定の関数を定期的に実行できます。このような何かが仕事をするはずです（テストされていない）：

$(".link").hide();

var iteration = 0;
var timer = setInterval(function() {
    if(iteration++ >= 10) {
        clearTimeout(timer);
        $(".link").show();
        $(".counter").hide();
    }

    $(".counter").text(10 - iteration);
}, 1000);

これにより、最初はダウンロードリンクが非表示になり、10からカウントダウンする関数が毎秒実行されます。10に達すると、カウンターが非表示になり、リンクが表示されます。ClearTimeoutは、10に達した後にカウントされないようにするために使用されます。デルのように簡単です。

編集：コメントで述べたように、この関数はjQueryを使用して要素を検索しています。

于 2011-03-05T21:44:06.177 に答える
0 
var WAIT_FOR_SECONDS = 10;
var DOWNLOAD_BUTTON_ID = "btnDownload";

if (document.body.addEventListener) {
    document.body.addEventListener("load", displayDownloadButton, false);
} else {
    document.body.onload = displayDownloadButton;
}

function displayDownloadButton(event) {
    setTimeout(function() {
        _e(DOWNLOAD_BUTTON_ID).style.display = "";
    }, WAIT_FOR_SECONDS*1000);
}

function _e(id) {
    return document.getElementById(id);
}
于 2011-10-05T17:22:10.933 に答える