如何让这个JS倒计时时钟依靠DB值倒计时？

Question

我有一个倒计时的JS代码。我希望它从数据库中获得价值，并从该价值中进行倒计时。因此，如果数据库中的值是8，则应该从8小时开始倒计时。我怎样才能做到这一点？

代码：

<div data-countdown="Wed Feb 1 2020 00:00:00 GMT+0100"> 
     <div> 
     <time data-countdown-unit="days">0</time> 
     <span>Days</span> 
    </div> 
    <div> 
     <time data-countdown-unit="hours">0</time> 
     <span>Hours</span> 
    </div> 
    <div> 
     <time data-countdown-unit="minutes">0</time> 
     <span>Minutes</span> 
    </div> 
    <div> 
     <time data-countdown-unit="seconds">0</time> 
     <span>Seconds</span> 
    </div> 
</div> 
</center> 

<style> 

[data-countdown], 
data-countdown *{ 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
} 
[data-countdown]{ 
    display: flex; 
    justify-content: space-around; 

    min-height: 100px; 
    width: 550px; 
    max-width: 90%; 
    font-family: Lato, Arial, sans-serif; 
    color: #039ddb; 
    background-color: rgb(255,255,255); 
    border-radius: 5px; 
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); 
} 
[data-countdown] > div{ 
    text-align: center; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
} 
[data-countdown] > div > time{ 
    display: block; 
    font-size: 30px; 
    font-weight: 700; 
} 
[data-countdown] > div > span{ 
    color: rgb(119,119,119); 
    font-size: 12px; 
} 
</style> 


<script> 

;(function($) { 
    var jCountdown = { 
     countdowns: [], 

     init: function(){ 
      $('[data-countdown]').each(function(){ 
       var $this = $(this), 
         data = { 
          self: $this, 
          target: $this.data('countdown') 
         }; 
       $.extend(data, jCountdown.getUnits($this)); 
       data.biggestUnit = jCountdown.getBiggestUnit(data.unitNames); 

       jCountdown.countdowns.push(data); 
      }); 
      jCountdown.startCountdowns(); 
     }, 

     getUnits: function($countdown){ 
      var unitNames = [], 
        unitFields = {}; 
      $('[data-countdown-unit]', $countdown).each(function(){ 
       var $this = $(this), 
         name = $this.data('countdown-unit'); 
       unitNames.push(name); 
       unitFields[name] = $this; 
      }) 

      return {'unitNames': unitNames, 'unitFields': unitFields}; 
     }, 
     getBiggestUnit: function(units){ 
      var lookup = {//use steps of 10 for later sub units 
         seconds: 10, 
         minutes: 20, 
         hours: 30, 
         days: 40, 
         weeks: 50, 
         months: 60, 
         years: 70 
        }, 
        list = []; 
      units.forEach(function(unit){ 
       list.push(lookup[unit]); 
      }); 

      return Math.max.apply(null, list); 
     }, 

     startCountdowns: function(){ 
      jCountdown.countdowns.forEach(function(countdown, key){ 
       if(jCountdown.updateCountdown(countdown)){ 
        jCountdown.countdowns[key].interval = setInterval(function(){ 
         if(!jCountdown.updateCountdown(countdown)){ 
          clearInterval(countdown.interval); 
         } 
        }, 1000); 
       } 
      }) 
     }, 
     updateCountdown: function(countdown){ 
      var remaining = jCountdown.timeRemaining(countdown); 
      if(remaining.total > 0){ 
       countdown.unitNames.forEach(function(name){ 
        countdown.unitFields[name].text(remaining[name]); 
       }) 

       return true; 
      } 
      else{ 
       return false; 
      } 
     }, 
     timeRemaining: function(countdown){ 
      var difference = Date.parse(countdown.target) - Date.parse(new Date()), 
        data = { 
         total: difference 
        }; 

      if(countdown.unitNames.indexOf('seconds')+1){ 
       data.seconds = Math.floor(difference/1000); 
       if(countdown.biggestUnit > 10){data.seconds = Math.floor(data.seconds % 60)} 
      } 
      if(countdown.unitNames.indexOf('minutes')+1){ 
       data.minutes = Math.floor(difference/1000/60); 
       if(countdown.biggestUnit > 20){data.minutes = Math.floor(data.minutes % 60)} 
      } 
      if(countdown.unitNames.indexOf('hours')+1){ 
       data.hours = Math.floor(difference/(1000 * 60 * 60)); 
       if(countdown.biggestUnit > 30){data.hours = Math.floor(data.hours % 24)} 
      } 
      if(countdown.unitNames.indexOf('days')+1){ 
       data.days = Math.floor(difference/(1000 * 60 * 60 * 24)); 
       if(countdown.biggestUnit > 40){data.days = Math.floor(data.days % 7)} 
      } 
      if(countdown.unitNames.indexOf('weeks')+1){ 
       data.weeks = Math.floor(difference/(1000 * 60 * 60 * 24 * 7)); 
       if(countdown.biggestUnit > 50){data.weeks = Math.floor(data.weeks % 4.35)} 
      } 
      if(countdown.unitNames.indexOf('months')+1){ 
       data.months = Math.floor(difference/(1000 * 60 * 60 * 24 * 7 * 4.35)); 
       if(countdown.biggestUnit > 60){data.months = Math.floor(data.months % 12)} 
      } 
      if(countdown.unitNames.indexOf('years')+1){ 
       data.years = Math.floor(difference/(1000 * 60 * 60 * 24 * 7 * 4.35 * 12)); 
      } 

      return data; 
     } 
    } 

    $(document).ready(jCountdown.init); 
})(jQuery); 
</script> 

<?php 

$servername = ""; 
$username = ""; 
$password = ""; 
$dbname = ""; 


$con = new mysqli($servername, $username, $password, $dbname); 

if ($con->connect_error) { 
    die("Connection failed: " . $con->connect_error); 
} 
else{ 
    $sql = "SELECT roundstime FROM vf_Discussion"; 
    $roundstime = $con->query($sql); 

    var_dump($roundstime); 

    echo 'successful'; 
} 












    mysqli_close($con); 

?> 

Answer 1

希望这会有所帮助。

现在你只需要将你的DB值传递给countdown()函数。

进一步详细http://hilios.github.io/jQuery.countdown/documentation.html

$(document).ready(function(e) { 
 
    $('#clock').countdown('2017-06-16 8:00:00') // Get you DB value and pass in this funciton. 
 
    .on('update.countdown', function(event) { 
 
     var format = '%H:%M:%S'; 
 
     $(this).html(event.strftime(format)); 
 
    }) 
 
    .on('finish.countdown', function(event) { 
 
     $(this).html('This offer has expired!') 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.countdown/2.2.0/jquery.countdown.js"></script> 
 
<div class="countdownc"> 
 
    Limited Time Only! 
 
    <span id="clock"></span> 
 
</div>