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