javascript - 当我点击下载按钮时开始 10 秒倒计时

Question

我找到了一个执行此功能的示例，但我想编辑它以在单击按钮时启动，而不是在文档加载时启动。

示例:http://jsfiddle.net/rATW7/506/

var downloadButton = document.getElementById("download");
var counter = 10;
var newElement = document.createElement("p");
newElement.innerHTML = "You can download the file in 10 seconds.";
var id;
downloadButton.parentNode.replaceChild(newElement, downloadButton);
id = setInterval(function() {
    counter--;
    if(counter < 0) {
        newElement.parentNode.replaceChild(downloadButton, newElement);
        clearInterval(id);
    } else {
        newElement.innerHTML = "You can download the file in " + counter.toString() + " seconds.";
    }
}, 1000);

Answer 1

您可以使用 jquery 的单击事件，或者在纯 JavaScript 中，您可以在 onclick 事件上附加函数。

<button id="btn">click</button>

function startDownload(){
  this.style.display = 'none';
  id = setInterval(function () {
    counter--;
    if (counter < 0) {
        newElement.parentNode.replaceChild(downloadButton, newElement);
        clearInterval(id);
    } else {
        newElement.innerHTML = +counter.toString() + " second.";
    }
}, 1000);
};

 var clickbtn= document.getElementById("btn");
 clickbtn.onclick=startDownload;

Fiddle demo