Question

我有这个JavaScript函数，它会倒计时直到你可以点击下载按钮，但我想点击它再次禁用或再次开始倒计时，最好是禁用。

这是JavaScript。

<script type="text/javascript">
  x = 10;
  function countdown() {
    if (x > 1) {
      x--;
      document.getElementById("button").innerHTML = x;
      r = setTimeout("countdown()",1000);
    }
    else {
      clearTimeout(r);
      document.getElementById("button").innerHTML = "Click to download";
      document.getElementById("button").disabled = "";
    }
  }
  r = setTimeout("countdown()",1000);

</script>

这是按钮，

<label><font size="5">Your download will start in: </label><a href="download.php?shortURL=<?php echo $fullfile; ?>"><button class="btn orange" id="button" disabled="disabled" onclick="window.location.reload()" >10</button></font></a>

谢谢！

Answer 1

要再次开始倒计时，您可以创建一个功能来清除任何现有的计时器并重置您的计数器变量，然后从按钮的onclick事件中调用此函数：

function resetCountdown() {
    clearTimeout(r);
    x = 10;
    countdown();
}

要禁用该按钮，您可以将其设置为禁用：

document.getElementById("button").disabled = "disabled";

Answer 2

首先为什么你使用window.location.reload（）？..这是你的脚本相关的东西？如果不是删除它并尝试下面的jquery代码

        $(function(){
    $('#button').click(function(){
        $(this).attr("disabled",true);
    });

并确保包含jquery的副本以使其正常工作或在此脚本之前在头标记中包含以下链接

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

Answer 3

我相信这是您需要的代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <script type="text/javascript">
        var x = 10;
        var r = 0;
        function countdown() {
            if (x > 1) {
                x--;
                document.getElementById("button").innerHTML = x;
                r = setTimeout("countdown()",1000);
            }
            else {
                clearTimeout(r);
                document.getElementById("button").innerHTML = "Click to download";
                document.getElementById("button").disabled = "";
                document.getElementById("button").onclick = function() {
                    document.getElementById("button").disabled = "disabled";
                };

            }
        }
        setTimeout("countdown()",1000);
    </script>
</head>
<body>
<label>
    <font size="5">Your download will start in:</font>
</label>
<a href="download.php?shortURL=<?php echo $fullfile; ?>" target="_blank">
    <button class="btn orange" id="button" disabled="disabled">10</button>
</a>
</body>
</html>

Answer 4

未经测试但请尝试此操作。一旦显示“点击下载”，它将在点击后禁用该按钮。

<script type="text/javascript">
 x = 10;
 function countdown() {
    if (x > 1) {
       x--;
       document.getElementById("button").innerHTML = x;
       r = setTimeout("countdown", 1000);
    } else {
       clearTimeout(r);
       document.getElementById("button").innerHTML = "Click to download";
       document.getElementById("button").disabled = "";
       document.getElementById("button").onclick = function() {
          document.getElementById("button").disabled = "disabled";
       };
    }
 }
 r = setTimeout("countdown",1000);
</script>

Answer 5

这应该可以解决问题：

var x = 10;
var r = setInterval(
  function() {
    if (x > 1) {
      x--;
      document.getElementById("button").innerHTML = x;
    }
    else {
      clearInterval(r);
      document.getElementById("button").innerHTML = "Click to download";
      document.getElementById("button").disabled = "";
    }
}, 1000);

单击或禁用它时重新启动计数器 - Javascript

5 个答案: