Question

因此，如果您注意到我在下面的预览中创建了一个链接。我正在寻找的是如果有人单击链接。我想将文本替换为60秒的计时器，并且60秒结束后，文本和链接应重新出现，并且相同的过程继续进行。

有人可以帮忙吗？

<a href="javascript:void(1);">Request code again</a>

Answer 1

您可以先使用JavaScript setInterval，然后再使用clearInterval。

使用jQuery时，您的代码应如下所示：（将timer_output_initial的值更改为您想要的秒数）

    var display_timer_interval;
    var timer_output_initial = 5
    var timer_output = timer_output_initial;
    var initial_text = "";
    $("#timer_link").on("click",function(){
      var clicked_element = $(this);
      initial_text = clicked_element.html();
      display_timer_interval = setInterval(function(){
        display_time(clicked_element);
      }, 1000);
    });
    
    function display_time(element){
        timer_output = timer_output-1;
        if(timer_output === 0) {
          clearInterval(display_timer_interval);
          timer_output = timer_output_initial;
          element.html(initial_text);
        }else{
          $(element).html(timer_output);
        }
    }

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
  
  <a href="javascript:void(1);" id="timer_link">Request code again</a>

</body>
</html>

如何在点击链接后显示计时器？

1 个答案: