If document.getElementById("countdowntimer").innerHTML is '0' then move to next recordset, i have set div with 100% height 100% with overflow hidden in html, body, i want show recordset one by one with interval time.
<?php
$mysqli = new mysqli("localhost", "root", "", "learningbydoing");
$result = mysqli_query($mysqli, "SELECT * FROM question");
while($record = mysqli_fetch_array($result)){
echo '<div >
<div >
<label>'.$record['no'].'</label><br>
<label>'.$record['question'].'</label><br>
<label id="countdowntimer">'.$record['time'].'</label><br>
</div></div>';
}?>
CodePudding user response:
If you were to fetch the entire recordset using fetch_all()
you could use that to generate a JSON variable which you could then process easily with Javascript using an interval
/ timer
of some sort. For instance, your PHP might look like:
<?php
$db=new mysqli( 'localhost', 'root', '', 'learningbydoing' );
$results=$db->query( 'select * from question' )->fetch_all( MYSQLI_ASSOC );
$json=json_encode( $results );
printf('
<script>
const json=%s;
</script>',
$json
);
?>
The generated json ( the following is random sports from one of my databases to emulate possible data from your database. ) could then be used as in the following snippet. Try running the snippet...
const json = [{
"id": "70",
"question": "Beach Golf",
"time": "25"
},
{
"id": "81",
"question": "Belt Wrestling",
"time": "30"
},
{
"id": "421",
"question": "Lumberjack",
"time": "15"
},
{
"id": "144",
"question": "Chilean Rodeo",
"time": "10"
},
{
"id": "706",
"question": "Swamp Football",
"time": "40"
},
{
"id": "570",
"question": "Rollball",
"time": "1"
},
{
"id": "136",
"question": "Canopy Piloting",
"time": "9"
},
{
"id": "14",
"question": "Air Racing",
"time": "29"
},
{
"id": "402",
"question": "Kurash",
"time": "20"
},
{
"id": "465",
"question": "Northern Praying Mantis",
"time": "16"
},
{
"id": "53",
"question": "Ball Hockey",
"time": "3"
},
{
"id": "156",
"question": "Corkball",
"time": "13"
},
{
"id": "478",
"question": "Outrigger Canoeing",
"time": "7"
},
{
"id": "310",
"question": "Harness Racing",
"time": "9"
},
{
"id": "515",
"question": "Playboating",
"time": "8"
},
{
"id": "500",
"question": "Patball",
"time": "9"
},
{
"id": "202",
"question": "Dog Sledding",
"time": "14"
},
{
"id": "510",
"question": "Pigeon Racing",
"time": "16"
},
{
"id": "697",
"question": "Strongman",
"time": "18"
},
{
"id": "691",
"question": "Stock Car Racing",
"time": "19"
},
{
"id": "522",
"question": "Pommel Horse",
"time": "3"
},
{
"id": "237",
"question": "Field Hockey",
"time": "9"
},
{
"id": "312",
"question": "Heptathlon",
"time": "18"
},
{
"id": "324",
"question": "Horse Racing",
"time": "23"
},
{
"id": "7",
"question": "Aerobatics",
"time": "18"
}
];
const number = document.querySelector('i[data-name="number"]');
const question = document.querySelector('i[data-name="question"]');
const countdown = document.querySelector('i[data-name="countdown"]');
number.textContent = json[0].id;
question.textContent = json[0].question;
let _time = json[0].time;
(function(time) {
let t = NaN;
let i = 0;
(function() {
time--;
if (json[i]) {
countdown.textContent = time 1;
number.textContent = json[i].id;
question.textContent = json[i].question;
}
t = setTimeout(arguments.callee, 1000);
if (time <= 0) {
if (i > Object.keys(json).length) {
clearTimeout(t);
number.textContent = '-';
question.textContent = 'Finished';
countdown.textContent = '-';
return false;
}
i ;
if (json[i]) time = json[i].time;
}
})();
})(_time);
[data-name] {
padding: 1rem;
margin: 1rem 0;
display: inline-block;
}
[data-name='number'] {
color: white;
background: green;
}
[data-name='question'] {
color: blue;
background: gold;
min-width: 15rem
}
[data-name='countdown'] {
color: white;
background: red;
}
<div class='area'>
<div class='boxquestion'>
<i data-name='number'></i>
<i data-name='question'></i>
<i data-name='countdown'></i>
</div>
</div>
example:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title></title>
<style>
[data-name]{padding:1rem;margin:1rem 0;display:inline-block;}
[data-name='number']{color:white;background:green;}
[data-name='question']{color:blue;background:gold;min-width:15rem}
[data-name='countdown']{color:white;background:red;}
</style>
<?php
$db=new mysqli('localhost', 'root', '', 'learningbydoing');
$results=$db->query( 'select * from question' )->fetch_all( MYSQLI_ASSOC );
$json=json_encode( $results );
printf('
<script>
const json=%s;
</script>',
$json
);
?>
</head>
<body>
<div class='area'>
<div class='boxquestion'>
<i data-name='number'></i>
<i data-name='question'></i>
<i data-name='countdown'></i>
</div>
</div>
<script>
const number=document.querySelector('i[data-name="number"]');
const question=document.querySelector('i[data-name="question"]');
const countdown=document.querySelector('i[data-name="countdown"]');
number.textContent=json[0].id;
question.textContent=json[0].question;
let _time=json[0].time;
(function( time ){
let t=NaN;
let i=0;
(function(){
time--;
if( json[i] ){
countdown.textContent=time 1;
number.textContent=json[i].id;
question.textContent=json[i].question;
}
t=setTimeout( arguments.callee, 1000 );
if( time <= 0 ){
if( i > Object.keys( json ).length ){
clearTimeout( t );
number.textContent='-';
question.textContent='Finished';
countdown.textContent='-';
return false;
}
i ;
if( json[ i ] ) time=json[ i ].time;
}
})();
})( _time );
</script>
</body>
</html>
CodePudding user response:
<?php
$mysqli = new mysqli("localhost", "root", "", "learningbydoing");
$result = mysqli_query($mysqli, "SELECT * FROM question");
while($record = mysqli_fetch_array($result)){
if( $record['time'] > 0 ){ // assuming the column is actually a number
echo '<div >
<div >
<label>'.$record['no'].'</label><br>
<label>'.$record['question'].'</label><br>
<label id="countdowntimer">'.$record['time'].'</label><br>
</div></div>';
}
}?>