如何讓這個JS倒計時代碼依賴DB值？

Question

我有一個倒數的JS代碼。我希望它從數據庫中獲得價值，並從該價值中進行倒計時。因此，如果數據庫中的值是8，則應該從8小時開始倒計時。我怎樣才能做到這一點？

代碼：

<?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); 

?> 

<input type="hidden" id="set-time" value="<?php echo htmlspecialchars($roundstime); ?>"/> 
<div id="countdown"> 

    <div id='tiles' class="color-full"></div> 
    <div class="countdown-label">Time Remaining</div> 
</div> 
<style> 
.countdown-label { 
    font: thin 15px Arial, sans-serif; 
    color: #65584c; 
    text-align: center; 
    text-transform: uppercase; 
    display: inline-block; 
    letter-spacing: 2px; 
    margin-top: 9px 
} 
#countdown{ 
box-shadow: 0 1px 2px 0 rgba(1, 1, 1, 0.4); 
width: 240px; 
    height: 96px; 
    text-align: center; 
background: #f1f1f1; 

    border-radius: 5px; 

    margin: auto; 

} 



#countdown #tiles{ 
    color: #fff; 
    position: relative; 
    z-index: 1; 
text-shadow: 1px 1px 0px #ccc; 
    display: inline-block; 
    font-family: Arial, sans-serif; 
    text-align: center; 

    padding: 20px; 
    border-radius: 5px 5px 0 0; 
    font-size: 48px; 
    font-weight: thin; 
    display: block; 

} 

.color-full { 
    background: #53bb74; 
} 
.color-half { 
    background: #ebc85d; 
} 
.color-empty { 
    background: #e5554e; 
} 

#countdown #tiles > span{ 
    width: 70px; 
    max-width: 70px; 

    padding: 18px 0; 
    position: relative; 
} 





#countdown .labels{ 
    width: 100%; 
    height: 25px; 
    text-align: center; 
    position: absolute; 
    bottom: 8px; 
} 

#countdown .labels li{ 
    width: 102px; 
    font: bold 15px 'Droid Sans', Arial, sans-serif; 
    color: #f47321; 
    text-shadow: 1px 1px 0px #000; 
    text-align: center; 
    text-transform: uppercase; 
    display: inline-block; 
} 
</style> 
<script> 
var minutes = $('#set-time').val(); 

var target_date = new Date().getTime() + ((minutes * 60) * 1000); // set the countdown date 
var time_limit = ((minutes * 60) * 1000); 
//set actual timer 
setTimeout(
    function() 
    { 
    alert('done'); 
    }, time_limit); 

var days, hours, minutes, seconds; // variables for time units 

var countdown = document.getElementById("tiles"); // get tag element 

getCountdown(); 

setInterval(function() { getCountdown(); }, 1000); 

function getCountdown(){ 

    // find the amount of "seconds" between now and target 
    var current_date = new Date().getTime(); 
    var seconds_left = (target_date - current_date)/1000; 

if (seconds_left >= 0) { 
    console.log(time_limit); 
    if ((seconds_left * 1000) < (time_limit/2)) { 
    $('#tiles').removeClass('color-full'); 
    $('#tiles').addClass('color-half'); 

     } 
    if ((seconds_left * 1000) < (time_limit/4)) { 
     $('#tiles').removeClass('color-half'); 
     $('#tiles').addClass('color-empty'); 
    } 

    days = pad(parseInt(seconds_left/86400)); 
    seconds_left = seconds_left % 86400; 

    hours = pad(parseInt(seconds_left/3600)); 
    seconds_left = seconds_left % 3600; 

    minutes = pad(parseInt(seconds_left/60)); 
    seconds = pad(parseInt(seconds_left % 60)); 

    // format countdown string + set tag value 
    countdown.innerHTML = "<span>" + hours + ":</span><span>" + minutes + ":</span><span>" + seconds + "</span>"; 



} 



} 

function pad(n) { 
    return (n < 10 ? '0' : '') + n; 
} 
</script> 
    <h2 class="CommentHeading"><?php echo Plural(count($Sender->Data('Answers')), 'Rounds', 'Rounds'); ?></h2> 
    <ul class="MessageList DataList AcceptedAnswers"> 

Answer 1

可以在JavaScript調用PHP也通過

var time_limit = <?php echo $db_value; ?> 

Answer 2

你可以做到這一點很簡單的方法。它工作正常。從數據庫中檢索的時間，然後將其轉換H：M：S則值傳遞給javascript和倒計時值

require_once 'db_connect.php'; 

$sql = "SELECT * FROM your_table_name"; 
$result = $con->query($sql); 

if($result->num_rows > 0){ 
    while($row=mysqli_fetch_assoc($result)) { 
     $date_time = $row['date_time']; // column name date_time 10 hours 
    } 
} 

$timestamp = time(); 
$diff = $date_time*60*60); //<-Time of countdown in seconds. ie. 3600 = 1 hr. or 86400 = 1 day. 

//MODIFICATION BELOW THIS LINE IS NOT REQUIRED. 
$hld_diff = $diff; 
if(isset($_SESSION['ts'])) { 
    $slice = ($timestamp - $_SESSION['ts']);  
    $diff = $diff - $slice; 
} 

if(!isset($_SESSION['ts']) || $diff > $hld_diff || $diff < 0) { 
    $diff = $hld_diff; 
    $_SESSION['ts'] = $timestamp; 
} 

//Below is demonstration of output. Seconds could be passed to Javascript. 
$diff; //$diff holds seconds less than 3600 (1 hour); 

$hours = floor($diff/3600) . ' : '; 
$diff = $diff % 3600; 
$minutes = floor($diff/60) . ' : '; 
$diff = $diff % 60; 
$seconds = $diff; 
?> 

//This is java script 

<div id="strclock">Clock Here!</div> 
<script type="text/javascript"> 
var hour = <?php echo floor($hours); ?>; 
var min = <?php echo floor($minutes); ?>; 
var sec = <?php echo floor($seconds); ?> 

function countdown() { 
    if(sec <= 0 && min > 0) { 
     sec = 59; 
     min -= 1; 
    } 
    else if(min <= 0 && sec <= 0) { 
     min = 0; 
     sec = 0; 
    } 
    else { 
     sec -= 1; 
    } 

    if(min <= 0 && hour > 0) { 
     min = 59; 
     hour -= 1; 
    } 

    var pat = /^[0-9]{1}$/; 
    sec = (pat.test(sec) == true) ? '0'+sec : sec; 
    min = (pat.test(min) == true) ? '0'+min : min; 
    hour = (pat.test(hour) == true) ? '0'+hour : hour; 

    document.getElementById('strclock').innerHTML = hour+":"+min+":"+sec; 

    setTimeout("countdown()",1000); 

} 
countdown(); 


</script> 

Answer 3

看來你的代碼不會返回的列值您所期望。顯然，這是當前的代碼是如何可以解釋（詳情請參見代碼註釋）

if ($con->connect_error) { 
    die("Connection failed: " . $con->connect_error); 
} 
else{ 
    $sql = "SELECT roundstime FROM vf_Discussion"; 
    $roundstime = $con->query($sql); //here $roundstime is the result object returned by the query 

    var_dump($roundstime); //dumps the result object fetched in the previous statement 

    echo 'successful'; 
} 

結果中的元素

<input type="hidden" id="set-time" value="<?php echo htmlspecialchars($roundstime); ?>"/> 

值迴盪不是列的值，但以下錯誤

Catchable fatal error: Object of class mysqli_result could not be converted to string

用下面的代碼替換您if...else塊可能會成爲你的目的，50％：

if ($con->connect_error) { 
    die("Connection failed: " . $con->connect_error); 
} 
else{ 
    $sql = "SELECT roundstime FROM vf_Discussion"; 
    $roundstime = $con->query($sql); 
    $row=$roundstime->fetch_assoc(); // this statement fetches the associative array from the object now $row becomes an associative array 

    echo 'successful'; 
} 

而對於其他的50％，以及它只是在html元素一個小編輯在這裏

<input type="hidden" id="set-time" value="<?php echo $row[`roundstime`] ?>"/> 

進一步的細節可以參考以下網址。 Selecting data From mysql using PHP(object oriented)