javascript - 如何让这个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

希望这会有所帮助。

现在您只需将数据库值传递给 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>