Move next element/ recordset with interval javascript - Jquery

radityonugroho
August 23, 2022
202 views
1 vote
2 Answers

If document.getElementById("countdowntimer").innerHTML is ‘0’ then move to next recordset, i have set div class="area" 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 class="area">
<div class="boxquestion">
<label>'.$record['no'].'</label><br>
<label>'.$record['question'].'</label><br>
<label id="countdowntimer">'.$record['time'].'</label><br>
</div></div>';              
}?>

Answers

<?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 class="area">
<div class="boxquestion">
<label>'.$record['no'].'</label><br>
<label>'.$record['question'].'</label><br>
<label id="countdowntimer">'.$record['time'].'</label><br>
</div></div>';
  }              
}?>

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>

Please signup or login to give your own answer.

Click here to cancel reply.

Move next element/ recordset with interval javascript – Jquery

Answers