时间戳

首页 > 解决方案 > 同一类div的多个倒计时

javascript - 同一类div的多个倒计时

问题描述

我有一些通过 foreach 循环创建的产品。每个产品都有不同的销售规则，如百分比折扣、销售开始和结束时间。

在此处输入图像描述

现在这是我的 js 代码，我在其中传递了一个具有销售结束时间的变量。

 var saleEndDate = '2019-01-26';
var countDownDate = new Date(saleEndDate).getTime();
var x = setInterval(function() {
  console.log(saleEndDate);

  var now = new Date().getTime();
  var distance = countDownDate - now;
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  $('.woops_sheduler_timer').html('<span class="days">'+days + "d " +'</span><span class="hours">'+ hours + "h "+'</span><span class="mints">'+ minutes + "m "+'</span><span class="secs">'+ seconds + "s "+'</span>');
                // console.log('abcx');
  if (distance < 0) {
    // clearInterval(x);
    $(".woops_sheduler_timers").html("Sale has been Expired!");
  }
}, 1000);

我想根据销售规则显示不同的倒计时。

标签： javascriptjquery

解决方案

假设您有一个呈现动态内容的 div：

<?php if (!empty($_ruleCollection)): $_productId = $_product->getEntityId() ?>
   <?php if ($block->productInRule($_productId)): $_ruleData = $block->productInRule($_productId) ?>

        <div class="sales">
            <div class="woops_sheduler_timer" id="<?= 'woops_sheduler_timer_'.$_productId; ?>">
                <span></span>
            </div>
        </div>
    <?php endif; ?>
<?php endif; ?>

现在很好地将脚本应用于内容：

<script type="text/javascript">
        var rulesCollection = <?= json_encode($_ruleCollection); ?>;
                var saleInterval = [];
                $(rulesCollection).each(function (key, value) {

                    applyOnSale(key, value.product_id, value.to_date)
                });


                function applyOnSale(key, productId, saleEndDate)  {

                    var productCounterId = '#woops_sheduler_timer_' + productId;

                    if ($(productCounterId).length) {
                        var countDownDate = new Date(saleEndDate).getTime(),
                            distance, now;
                        saleInterval[key] = setInterval(function() {

                            now = new Date().getTime();

                            distance = countDownDate - now;


                            $(productCounterId).html(
                                '<span class="days">'+getDays(distance) + "d </span>"
                                + '<span class="hours">'+ getHours(distance) + "h </span>"
                                + '<span class="mints">' + getMinutes(distance) + "m </span>"
                                + '<span class="secs">'+ getSeconds(distance) + "s "+'</span>'
                            );

                            if (distance < 0) {
                                clearInterval(saleInterval[key]);
                                $(".woops_sheduler_timers").html("Sale has been Expired!");
                            }
                        }, 1000);
                    }

                };

                function getDays(distance) {
                    return Math.floor(distance / (1000 * 60 * 60 * 24));
                }

                function getHours(distance) {
                    return Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                }

                function getMinutes(distance) {
                    return Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                }

                function getSeconds(distance) {
                    return Math.floor((distance % (1000 * 60)) / 1000);
                }
 </script>

推荐阅读