使用间隔 javascript 移动下一个元素/记录集

小编典典

使用间隔 javascript 移动下一个元素/记录集

all

如果 document.getElementById(“countdowntimer”).innerHTML 为 ‘0’ 然后移动到下一个记录集，我已将 div class=”area” 设置为 100% 高度 100% 溢出隐藏在 html、正文中，我想显示记录集一个一个有间隔时间。

<?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>';              
}?>

阅读 53

2022-08-24

共1个答案

小编典典

如果您要使用它来获取整个记录集，fetch_all()您可以使用它来生成一个 JSON 变量，然后您可以使用 Javascript 使用某种interval/轻松处理该变量timer。例如，您的 PHP 可能如下所示：

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

生成的 json（以下是我的一个数据库中的随机运动，用于模拟您的数据库中可能的数据。）然后可以在以下代码段中使用。尝试运行代码段…

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>

例子：

<!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>

2022-08-24