Question

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

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

enter image description here

<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>

enter image description here

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/

Answer 2

HTML：

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

JS：

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

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

Answer 3

你不需要jQuery（虽然它有助于设置文本）。

setInterval就是你想要的。

$.each(
    $('.countdown'), function(el) { 
         setInterval( function() { 
             $(this).text($(this).text()*1 - 1);
         }, 1000); 
    }
);

Answer 4

CountdownTimer是一个反向倒数jQuery插件，用于根据需要使用其不同的配置选项显示倒数。

一个最小的jQuery倒计时时钟插件，通过自定义UTC时区偏移量，您可以倒计时到目标日期时间。

如何使用它：

网页中的jQuery库和jQuery倒数时钟插件。

<script type="text/javascript">
    function SetTimer()
    {
        if(document.SetDefaultTimer != true){ 
            SetDefaultTimeOut(); 
        } 
    }

    function SetDefaultTimeOut()
    {
        //document.SetDefaultTimer = true;
        setTimeout(function () {
            StartTimeOut();             
            $("#videos-container4").css("display", "block");
        }, $("#HdnSetDefaultTime").val());
    }

    function SetTimerByContinue()
    {
        document.SetDefaultTimer = true;
        setTimeout(function () {
            StartTimeOut();             
            $("#videos-container4").css("display", "block");
        }, $("#HdnSMDIdleNotificationRepeatTime").val());
        //}, 600000);
    }

    function ResetTimer()
    {
        $("#videos-container4").css("display", "none");
        clearInterval(cleanTimeOutInterval);
        //SetDefaultTimeOut();
        SetTimerByContinue();
    }

    $('#ClickContinue').click(function () {
        ResetTimer();
    });

    var cleanTimeOutInterval;
    function StartTimeOut() {
        debugger
        var timer2 = $("#HdnTimerCountDownStart").val() + ":00";
        $('.countdown').html($("#HdnTimerCountDownStart").val() + "mins" + ":00" + "secs");
        cleanTimeOutInterval = setInterval(function () {
            var timer = timer2.split(':');
            //by parsing integer, I avoid all extra string processing
            var minutes = parseInt(timer[0], 10);
            var seconds = parseInt(timer[1], 10);
            --seconds;
            minutes = (seconds < 0) ? --minutes : minutes;
            if (minutes < 0) clearInterval(interval);
            seconds = (seconds < 0) ? 59 : seconds;
            seconds = (seconds < 10) ? '0' + seconds : seconds;
            //minutes = (minutes < 10) ?  minutes : minutes;
            //$('.countdown').html(minutes + ':' + seconds);
            if(minutes == "0"){
                $('.countdown').html(seconds + 'secs');
            } else {
                $('.countdown').html(minutes + 'mins ' + seconds + 'secs');
            }
            timer2 = minutes + ':' + seconds;

            if (timer2 == "0:00") {
                //Your action below
            }
        }, 1000);
    }
</script>

使用无序列表为倒计时时钟创建HTML。

<div id="videos-container4" class="container-fluid main-timer">
    <a href="javascript:void(0);" id="btnAnchor" onclick="SetTimer()" runat="server">Timer</a>
    <input type="hidden" id="HdnSetDefaultTime" value="0" />
    <input type="hidden" id="HdnSMDIdleNotificationRepeatTime" value="0" />
    <input type="hidden" id="HdnTimerCountDownStart" value="0" />
    <span>Your Time will be end in </span>
    <br />
    <span style="color: red;">
        <span class="countdown"></span>
    </span>
    <!-- <span>minutes</span> -->
    <div style="margin-top: 10px;">
        <a id="ClickContinue" class="btn-continue">Continue</a>
    </div>
</div>

添加以下CSS片段以设置倒计时时钟的样式。

<style type="text/css">
    .main-timer {
        margin: 10px 15px;
        display: none;
        float: right;
        border: 1px solid #fd0000;
        border-radius: 15px;
        padding-top: 8px;
        height: 100px;
        width: 17%;
        text-align: center;
        background: #fff;
        box-shadow: 0 4px 16px -4px #888;
        position: relative;
    }

    .btn-continue {
        cursor: pointer;
        border: 1px solid #ff0707;
        padding: 4px;
        margin-right: 6px;
        color: green;
        text-decoration: none;
    }

        .btn-continue:hover {
            border: 2px solid #ff0707;
            color: green;
            text-decoration: none;
        }
</style>

Answer 5

var countDown = function() {
    var ct = 15;
    var $elem = $(this);
    var display = function() {
       $elem.text(ct--);
    }
    var iv = setInterval(function() {
        display();
        if (ct === 0) {
          clearInterval(iv);
        }
    }, 1000);
    display();
};
$("#countdown").each(countDown);

Answer 6

在检查器中尝试此操作，以了解倒数计时器应如何工作：

var count = 15; setInterval("if(count>0)console.log(count--)", 1000)

这里是你的案例的完整代码（没有jquery）

var counter = document.getElementsByClassName('countdown')[0],
    count = parseInt(counter);
setInterval("if(count>0)counter.innerHTML(count--)", 1000)

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

6 个答案: