如何使用 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>

原文由 Only Bolivian Here 发布，翻译遵循 CC BY-SA 4.0 许可协议

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/

原文由 JaredPar 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

HTML:

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

记者：

 var count = document.getElementById('countdown');
timeoutfn = function(){
       count.innerHTML = parseInt(count.innerHTML) - 1;
       setTimeout(timeoutfn, 1000);
};
setTimeout(timeoutfn, 1000);

小提琴：http: //jsfiddle.net/wwvEn/

原文由 Naftali 发布，翻译遵循 CC BY-SA 3.0 许可协议