午夜重置javascript倒計時

Question

我有倒計時的頁面，我想在每個午夜重置倒計時。我想重置每個午夜，從23小時59分59秒開始，da.y你能幫我嗎？這裏是html，css和javascript。現在它被手動固定到一個日期，但這對我不好。那可能嗎？

<div class="wrapper"> 
    <div class="clock"> 
     <div class="column days"> 
      <div class="timer" id="days"></div> 
      <div class="text">DAYS</div> 
     </div> 
     <div class="timer days">:</div> 
     <div class="column"> 
      <div class="timer" id="hours"></div> 
      <div class="text">ORE</div> 
     </div> 
     <div class="timer">:</div> 
     <div class="column"> 
      <div class="timer" id="minutes"></div> 
      <div class="text">MINUTE</div> 
     </div> 
     <div class="timer">:</div> 
     <div class="column"> 
      <div class="timer" id="seconds"></div> 
      <div class="text">SECUNDE</div> 
     </div> 
    </div> 
</div> 


* { 
    padding: 0; 
    margin: 0; 
    list-style: none; 
    box-sizing: border-box; 
    outline: none; 
    font-weight: normal; 
} 
html { 
    height: 100%; 
    display: table; 
    width: 100%; 
} 
body { 
    background: #3498DB; 
    font-family: "Segoe UI", "Microsoft YaHei"; 
    font-size: 18px; 
    height: 100%; 
    width: 100%; 
    min-width: 320px; 
    color: #fff; 
    display: table-cell; 
    vertical-align: middle; 
} 
.wrapper { 
    box-sizing: border-box; 
    width: 640px; 
    margin: 0 auto; 
    text-align: center; 
} 
.timer { 
    font-family: "Segment7Standard"; 
    font-size: 60px; 
    display: inline-block; 
    vertical-align: top; 
} 
.clock { 
    margin-top: 30px; 
} 
.clock .column { 
    display: inline-block; 
} 
p { 
    line-height: 27px; 
} 
h1 { 
    font-size: 31px; 
    color: #ffffff; 
    margin-top: 20px; 
    margin-bottom: 20px; 
} 
h2 { 
    font-size: 16px; 
    color: #a3deff; 
    margin: 0 0 10px; 
} 
a { 
    color: #a3deff; 
    text-decoration: none; 
} 
.days { 
    display: none; 
} 
@media only screen and (max-width: 768px) { 
    .wrapper { 
     width: 100%; 
     padding: 0 20px; 
    } 
    .timer { 
     font-size: 35px; 
    } 
} 
.container { 
    width: 100%; 
    max-width: 1200px; 
    margin: 0 auto; 
} 
.clear-loading { 
    text-align: center; 
    margin: 0 auto; 
    position: relative; 
    box-sizing: border-box; 
} 
.spinner { 
    width: 100px; 
    height: 100px; 
} 
.spinner > span, 
.spinner > span:before, 
.spinner > span:after { 
    content: ""; 
    display: block; 
    border-radius: 50%; 
    border: 2px solid #fff; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    -webkit-transform: translate(-50%, -50%); 
    -moz-transform: translate(-50%, -50%); 
    -o-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
} 
.spinner > span { 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    border-left-color: transparent; 
    -webkit-animation: effect-2 2s infinite linear; 
    -moz-animation: effect-2 2s infinite linear; 
    -o-animation: effect-2 2s infinite linear; 
    animation: effect-2 2s infinite linear; 
} 
.spinner > span:before { 
    width: 75%; 
    height: 75%; 
    border-right-color: transparent; 
} 
.spinner > span:after { 
    width: 50%; 
    height: 50%; 
    border-bottom-color: transparent; 
} 
@-webkit-keyframes effect-2 { 
    from { 
     transform: rotate(0deg); 
    } 
    to { 
     transform: rotate(360deg); 
    } 
} 
@keyframes effect-2 { 
    from { 
     transform: rotate(0deg); 
    } 
    to { 
     transform: rotate(360deg); 
    } 
} 

    $(function(){ 
    function timer(settings){ 
     var config = { 
      endDate: '2018-05-19 09:00', 
      timeZone: 'Europe/Dublin', 
      hours: $('#hours'), 
      minutes: $('#minutes'), 
      seconds: $('#seconds'), 
      newSubMessage: 'and should be back online in a few minutes...' 
     }; 
     function prependZero(number){ 
      return number < 10 ? '0' + number : number; 
     } 
     $.extend(true, config, settings || {}); 
     var currentTime = moment(); 
     var endDate = moment.tz(config.endDate, config.timeZone); 
     var diffTime = endDate.valueOf() - currentTime.valueOf(); 
     var duration = moment.duration(diffTime, 'milliseconds'); 
     var days = duration.days(); 
     var interval = 1000; 
     var subMessage = $('.sub-message'); 
     var clock = $('.clock'); 
     if(diffTime < 0){ 
      endEvent(subMessage, config.newSubMessage, clock); 
      return; 
     } 
     if(days > 0){ 
      $('#days').text(prependZero(days)); 
      $('.days').css('display', 'inline-block'); 
     } 
     var intervalID = setInterval(function(){ 
      duration = moment.duration(duration - interval, 'milliseconds'); 
      var hours = duration.hours(), 
       minutes = duration.minutes(), 
       seconds = duration.seconds(); 
      days = duration.days(); 
      if(hours <= 0 && minutes <= 0 && seconds <= 0 && days <= 0){ 
       clearInterval(intervalID); 
       endEvent(subMessage, config.newSubMessage, clock); 
       window.location.reload(); 
      } 
      if(days === 0){ 
       $('.days').hide(); 
      } 
      $('#days').text(prependZero(days)); 
      config.hours.text(prependZero(hours)); 
      config.minutes.text(prependZero(minutes)); 
      config.seconds.text(prependZero(seconds)); 
     }, interval); 
    } 
    function endEvent($el, newText, hideEl){ 
     $el.text(newText); 
     hideEl.hide(); 
    } 
    timer(); 
}); 

https://jsfiddle.net/zd82dav7/

Answer 1

編輯您的提琴在這裏https://jsfiddle.net/zd82dav7/1/

增加了一個新的Date對象，並用它作爲結束日期：

endDate: dT.getFullYear() + "-" + prependZero(dT.getMonth() + 1) + "-" + prependZero(dT.getDate()) + ' 23:59',

現在使用當前日期和將結束時間設置爲當天的23:59。這意味着當時鍾經過午夜時，它將啓動一個新的計數器23小時59分鐘。不知道結束時間是否支持秒...沒有檢查。但是你總是可以將它添加到字符串中。