Question

我已经达到了想要的目的（可以在预览中看到），但是仍然存在一些问题。例如，当我单击“再次请求代码”超链接时，在启动计时器之前会突然暂停，如何删除该突然暂停？其次，如何删除计时器上的超链接？

最后，如何将以秒（60，59，58 ..）为单位的计时器更改为分钟和秒，例如（02:00，01:59，01:58，...），并添加文本。例如，“在02:00请求另一个代码”，“在01:59请求另一个代码”，“在01:58请求另一个代码”，等等。

我希望看到有人帮助我。

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);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="javascript:void(1);" id="timer_link">Request code again</a>

Answer 1

发生“突然暂停”是因为不会立即触发setinterval的回调函数。如果第二秒过去了，它将首先被调用。

您可以通过一次调用回调本身来克服这一问题。

要格式化数字以显示2位数字，您必须检查数字是否小于10，如果小于10，则在数字前加上零。

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_time(clicked_element);
  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 {
    var minutes = Math.floor(timer_output / 60);
    var seconds = timer_output - minutes * 60
    if (minutes < 10) {
      minutes = "0" + minutes;
    }
    if (seconds < 10) {
      seconds = "0" + seconds;
    }
    $(element).html(minutes + ":" + seconds);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="javascript:void(1);" id="timer_link">Request code again</a>

如何加载按钮上的等待计时器onclick？

1 个答案: