自定义递送倒计时器

Question

我目前正在处理一个自定义的jquery/javascript倒计时器，以指示客户在发货前已经有多少时间去购买东西。这非常粗糙 - 但它对我很有用，我本身并不是一个编码器。

jQuery(function($) { 
 
    $(document).ready(function() { 
 
    setInterval(function() { 
 
     var now = new Date(); 
 
     var day = now.getDay(); 
 
     //var day = 6; 
 
     var day2 = (now.getDate() < 10 ? '0' : '') + now.getDate(); 
 
     var month = ("0" + (now.getMonth() + 1)).slice(-2); 
 
     var offday = day2 + month; 
 
     var offdayset = false; 
 
     var end; 
 

 
     if (day >= 1 && day <= 4) { 
 
     end = new Date(now.getYear(), now.getMonth(), day, 15, 30, 0, 0); 
 
     } else if (day == 5) { 
 
     end = new Date(now.getYear(), now.getMonth(), day, 15, 30, 0, 0); 
 
     } else { 
 
     end = new Date(now.getYear(), now.getMonth(), day, 15, 30, 0, 0); 
 
     } 
 

 
     var timeleft = end.getTime() - now.getTime(); 
 
     var diff = new Date(timeleft); 
 
     var weekday = new Array(7); 
 
     weekday[0] = "Zondag"; 
 
     weekday[1] = "Maandag"; 
 
     weekday[2] = "Dinsdag"; 
 
     weekday[3] = "Woensdag"; 
 
     weekday[4] = "Donderdag"; 
 
     weekday[5] = "Vrijdag"; 
 
     weekday[6] = "Zaterdag"; 
 
     var shippingday = weekday[now.getDay()]; 
 

 
     /* Declare an array. */ 
 
     var offdays = new Array('2303', '2412', '2512', '3112'); 
 
     /* Traverse each of value of an array using for loop to 
 
     check whether the value is exist in array*/ 
 
     for (var i = 0; i < offdays.length; i++) { 
 
     if (offdays[i] === offday) { 
 
      //alert('Value exist'); 
 
      offdayset = true; 
 
     } 
 
     } 
 

 
     if (shippingday == "Zaterdag" || shippingday == "Zondag") 
 
     { 
 
     shippingday = "Maandag"; 
 
     } else if ("" + diff.getHours() + ('0' + diff.getMinutes()).slice(-2) <= 1630 && offdayset == false) { 
 
     shippingday = "Vandaag"; 
 
     } else { 
 
     shippingday = weekday[now.getDay() + 1]; 
 
     } 
 

 
     $("#datecountdown").html("binnen " + diff.getHours() + "u " + diff.getMinutes() + "min " + diff.getSeconds() + "sec"); 
 
     $("#dateshipping").html(shippingday); 
 
     //below are just for testing purposes 
 
     $("#time1").html(offday); 
 
     $("#time2").html(offdayset); 
 
     $("#time3").html(end); 
 

 
    }, 1000); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="/verzending-bezorging/" class="shippingtimer" title="*wanneer product op voorraad is"> 
 
    <p class="shippingtimer"> Besteld <span id="datecountdown"></span> = <span id="dateshipping"></span> verzonden*</p> 
 
</a> 
 

 
<span id="time1"></span> 
 
<br> 
 
<span id="time2"></span> 
 
<br> 
 
<span id="time3"></span>

到目前为止，我得到了倒计时工作和检查它是否是weekendl;当它是周末（星期六或星期日），航运将只在星期一。然而，我无法让计时器将这个数字表示为一个更大的小时数：即星期五16.30之后周五将是+ 72h，周六将是+ 48小时，周日+24，直到周一16.30。

有人可以借我一把吗？

Answer 1

我重组了你的代码，使逻辑更清晰一点，我想这可能是你想要的。

编辑： VAR shippingDate =新日期（bookingDate.getFullYear（），bookingDate.getMonth（），bookingDate.getDay（），15，30，0，0）; （），bookingDate.getDay（），bookingDate.getDate（），bookingDate.getDate（），15，30，0，0）;

jQuery(function($) { 
 
    $(document).ready(function() { 
 
    var weekday = new Array(7); 
 
    weekday[0] = "Zondag"; 
 
    weekday[1] = "Maandag"; 
 
    weekday[2] = "Dinsdag"; 
 
    weekday[3] = "Woensdag"; 
 
    weekday[4] = "Donderdag"; 
 
    weekday[5] = "Vrijdag"; 
 
    weekday[6] = "Zaterdag"; 
 
    //var bookingDate - the date you book 
 
    var bookingDate = new Date(); 
 
    //var bookingDay - the day you book 
 
    var bookingDay = weekday[bookingDate.getDay()]; 
 
    //var shippingDay - the day you ship 
 
    var shippingDay = null; 
 
    //var shippingDate - the date you ship 
 
    var shippingDate = new Date(bookingDate.getFullYear(), bookingDate.getMonth(), bookingDate.getDate(), 15, 30, 0, 0); 
 

 
    //logic to get shippingDay and shippingDate 
 
    if (bookingDay == "Zaterdag") { 
 
     shippingDate = shippingDate.setDate(bookingDate.getDate() + 2) 
 
     shippingDay = weekday[bookingDate.getDay() + 2]; 
 
    } else if (bookingDay == "Zondag") { 
 
     shippingDate = shippingDate.setDate(bookingDate.getDate() + 1) 
 
     shippingDay = weekday[bookingDate.getDay() + 1]; 
 
    } else { 
 
     //if we book before 15:30, we still can catch today's shipping 
 
     //otherwise +1 day 
 
     if (shippingDate - bookingDate >= 0) { 
 
     shippingDay = "Vandaag"; 
 
     } else { 
 
     shippingDate.setDate(bookingDate.getDate() + 1); 
 
     shippingDay = weekday[bookingDate.getDay() + 1]; 
 
     } 
 
    } 
 
    //you can deal with offdays with similar logic, I don't know what does shippingday = "Vandaag"; means 
 
    /*} else if ("" + diff.getHours() + ('0' + diff.getMinutes()).slice(-2) <= 1630 && offdayset == false) { 
 
     shippingday = "Vandaag"; 
 
    } */ 
 

 
    //I didn't touch your offday logic, you can fill in the gap 
 
    var now = new Date(); 
 
    var day = now.getDay(); 
 
    //var day = 6; 
 
    var day2 = (now.getDate() < 10 ? '0' : '') + now.getDate(); 
 
    var month = ("0" + (now.getMonth() + 1)).slice(-2); 
 
    var offday = day2 + month; 
 
    var offdayset = false; 
 

 

 

 

 
    /* Declare an array. */ 
 
    var offdays = new Array('2303', '2412', '2512', '3112'); 
 
    /* Traverse each of value of an array using for loop to 
 
    check whether the value is exist in array*/ 
 
    for (var i = 0; i < offdays.length; i++) { 
 
     if (offdays[i] === offday) { 
 
     //alert('Value exist'); 
 
     offdayset = true; 
 
     } 
 
    } 
 

 

 

 
    setInterval(function() { 
 
     now = new Date(); 
 
     var timeleft = shippingDate - now; 
 
     var diff = new Date(timeleft); 
 

 
     $("#datecountdown").html("binnen " + diff.getHours() + "u " + diff.getMinutes() + "min " + diff.getSeconds() + "sec"); 
 
     $("#dateshipping").html(shippingDay); 
 
     //below are just for testing purposes 
 
     $("#time1").html(offday); 
 
     $("#time2").html(offdayset); 
 
     $("#time3").html("bookingdate: " + bookingDate); 
 
     $("#time4").html("shippingdate: " + shippingDate); 
 

 

 
    }, 1000); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<a href="/verzending-bezorging/" class="shippingtimer" title="*wanneer product op voorraad is"> 
 
    <p class="shippingtimer"> Besteld <span id="datecountdown"></span> = <span id="dateshipping"></span> verzonden*</p> 
 
</a> 
 

 
<span id="time1"></span> 
 
<br> 
 
<span id="time2"></span> 
 
<br> 
 
<span id="time3"></span> 
 
<br> 
 
<span id="time4"></span> 
 
<br> 
 
<span id="time5"></span>