一页内有多个倒计时

Question

首先，我使用 jalali/persian 日期和倒计时 jQuery 插件对我不起作用。对于 ex 插件，必须输入公历日期，例如 2017/5/2 但 persian/jalali 日期是 1396/2/17 .

我有多个日期时间，指定了 day 、 hour 、 min 和 sec 。例如：

3 天 13 小时 4 分 25 秒

23 天 2 小时 41 分 3 秒...

我将天、时、分、秒分开，

我想在一页中为他们的日期倒计时（他们的日期数是日动态的）

我使用此代码并且在页面中只有一个日期时工作正常

html :

  <div class="row">

@{TimeSpan span = (item.DiscountExpireDate - DateTime.Now);}

    <ul class="countdown">
        <li>
             <span class="seconds">@span.Seconds</span>
        <p class="seconds_ref">ثانیه</p>
        </li>
         <li class="seperator">:</li>
         <li>
         <span class="minutes">@span.Minutes</span>
           <p class="minutes_ref">دقیقه</p>
           </li>
           <li class="seperator">:</li>

           <li>
          <span class="hours">@span.Hours</span>
            <p class="hours_ref">ساعت</p>
           </li>
           <li class="seperator"> </li>
           <li>
           <span class="days">@span.Days</span>
         <p class="days_ref">روز</p>
         </li>
         </ul>

</div>

和 js

<script type="text/javascript">//for countdown
    $(document)
        .ready(function () {
            var theDaysBox = $(".days");
            var theHoursBox = $(".hours");
            var theMinsBox = $(".minutes");
            var theSecsBox = $(".seconds");

                var refreshId = setInterval(function() {
                        var currentSeconds = theSecsBox.text();
                        var currentMins = theMinsBox.text();
                        var currentHours = theHoursBox.text();
                        var currentDays = theDaysBox.text();

                        if (currentSeconds == 0 && currentMins == 0 && currentHours == 0 && currentDays == 0) {
                            // if everything rusn out our timer is done!!
                            // do some exciting code in here when your countdown timer finishes

                        } else if (currentSeconds == 0 && currentMins == 0 && currentHours == 0) {
                            // if the seconds and minutes and hours run out we subtract 1 day
                            theDaysBox.html(currentDays - 1);
                            theHoursBox.html("23");
                            theMinsBox.html("59");
                            theSecsBox.html("59");
                        } else if (currentSeconds == 0 && currentMins == 0) {
                            // if the seconds and minutes run out we need to subtract 1 hour
                            theHoursBox.html(currentHours - 1);
                            theMinsBox.html("59");
                            theSecsBox.html("59");
                        } else if (currentSeconds == 0) {
                            // if the seconds run out we need to subtract 1 minute
                            theMinsBox.html(currentMins - 1);
                            theSecsBox.html("59");
                        } else {
                            theSecsBox.html(currentSeconds - 1);
                        }
                    },
                    1000);

       });
</script>

但是当我在页面上有多个日期时效果不佳，而且数字似乎是加在一起的。

https://jsfiddle.net/a7ucv468/1/

谁能帮帮我？

Answer 1

您只需为每个元素标识一个包装器元素，例如：

$('.countdown").each( function {

然后在元素选择器前使用 $(this).find() 。这会将函数绑定到倒计时的每个实例。目前它只是在寻找 class "days" 所以它只会使用它找到的第一个，否则会导致其他错误。我会尽快写一个工作示例。

我不确定这些数字，但它们在这里似乎是运行独立的（将超时设置为更少以进行调试）https://jsfiddle.net/7nzcdhn3/

一页内有多个倒计时

multiple countdown time in one page

javascript

jquery

countdowntimer

jalali-calendar