同一班div的多重倒数计时

Question

我有一些产品是通过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);

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

Answer 1

让我们假设您有一个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>

Answer 2

欢迎您！

您可以通过两种不同的方法来执行此操作，选择哪种方法取决于您的偏好和所拥有的条件。

第一个选项是将您为销售项目创建的元素传递到函数中，并在该销售项目元素中找到具有指定类的元素。例如，您可以执行以下操作：

function startSaleCountdown($item, saleEndDate) {
  const timer = setInterval(() => {
    const diff = saleEndDate.getTime() - Date.now();
    
    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
    const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((diff % (1000 * 60)) / 1000);
    
    if (diff <= 0) {
      clearInterval(timer);
      
      $(".woops_sheduler_timers").html("Sale has been Expired!");
    } else {
      $item.find('.woops_scheduler_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>
      `);
    }
  }, 1000);
}

const item = $(`
  <div class="item">
    <p>Sale Item!</p>
    <div class="woops_scheduler_timer"></div>
  </div>
`);

$('body').append(item);

startSaleCountdown(item, new Date(2019, 0, 30));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

或者，如果您给每个销售商品一个唯一的ID，则可以将该ID传递给启动倒计时的功能。

function startSaleCountdown(itemId, saleEndDate) {
  const timer = setInterval(() => {
    const diff = saleEndDate.getTime() - Date.now();

    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
    const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((diff % (1000 * 60)) / 1000);

    if (diff <= 0) {
      clearInterval(timer);

      $(".woops_sheduler_timers").html("Sale has been Expired!");
    } else {
      $(`#${itemId} .woops_scheduler_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>
      `);
    }
  }, 1000);
}

const barcodeNumber = 'barcodeNumber';
const id = `item_${barcodeNumber}`;

$('body').append($(`
  <div class="item" id="${id}">
    <p>Sale Item!</p>
    <div class="woops_scheduler_timer"></div>
  </div>
`));

startSaleCountdown(id, new Date(2019, 0, 30));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

为便于输入，我使用了一些ES6语法，但是所有内容都可以转换或转换为ES5或更早的版本。