jquery - 如何使用 jQuery 创建倒数计时器？

Question

我的网站上会有不止一个这样的小盒子，每个盒子都会在不同的时间开始倒计时。

如何减少每秒计时器的数值，模拟倒数计时器？

<p class="countdown">15</p>

使用此 javascript 可以正确倒计时，但每个拍卖箱都会受到影响。你会如何建议我隔离计时器以仅对一个元素起作用？

<script>
var sec = 15
var timer = setInterval(function() {
   $('.auctiondiv .countdown').text(sec--);
   if (sec == -1) {
      $('.auctiondiv .countdown').fadeOut('slow');
      clearInterval(timer);
   }
}, 1000);
</script>

Answer 1

尝试以下将正确发出所选值的倒计时。

$(document).ready(function() {

  // Function to update counters on all elements with class counter
  var doUpdate = function() {
    $('.countdown').each(function() {
      var count = parseInt($(this).html());
      if (count !== 0) {
        $(this).html(count - 1);
      }
    });
  };

  // Schedule the update to happen once every second
  setInterval(doUpdate, 1000);
});

JSFiddle 示例

• http://jsfiddle.net/n24BP/

注意:这将在每个具有 countdown 类的元素上运行倒计时序列。如果你想让它对单个元素有更多限制，你需要将选择器从 .countdown 更改为更具限制性的内容。最简单的方法是添加一个 id 并直接引用该元素。

<p id='theTarget'>15</p>

这里的 JavaScript 有点复杂，因为您希望计时器最终关闭，因为添加具有重复 id 的元素的可能性不大，也不太可能被使用

$(document).ready(function() {

  var timer = setInterval(function() {

    var count = parseInt($('#theTarget').html());
    if (count !== 0) {
      $('#theTarget').html(count - 1);
    } else {
      clearInterval(timer);
    }
  }, 1000);
});

JSFiddle 示例

• http://jsfiddle.net/bSe9E/