HTML选取框更改行为

Question

If I put marquee in while loop it shows all the data at the same time, sliding right to left. I want this to behave one by one, when one finishes the second starts... and lastly the first comes again, how can I do this please help me out I would be very grateful to you, thanks in advance :)

$data=mysql_query("SELECT heading from moto_static_pages");
while($res = mysql_fetch_assoc($data)){ 
  echo '<marquee  behavior="scroll" direction="left" style="padding:0 0 10px 0;">';
  echo $res['heading'];
  echo '</marquee>';
}

Answer 1

PHP is server-side. Everything is computed on the server, and then all at the same time displayed on the browser in-front of you. So your loop is merely looping around what eventually will be displayed in the browser, and printing it all out at once, which is what it's supposed to do.

You will need to use JavaScript to accomplish this, as this is client-side. You cannot do this with PHP.

You will need to retrieve all the data from your database, convert it to json (json_encode()), and send this to your browser as one string. Then, in JavaScript, loop through the json and print out each one as a marquee with a timed event.

To reiterate, unless you are going to be doing something with asynchronous I/O with PHP, which you aren't, you will need to do this with JavaScript.

---

This is untested code and straight from the top of my head, but hopefully this will point you in the right direction.

<?php

// Server-side code, get your data, json encode it too!

$data = json_encode(mysql_query("SELECT heading from moto_static_pages"));

?>

<script type = "text/javascript">

    // Client side code that happens in real time in the browser

    // Get your data from your php variable
    var data = JSON.parse(<?php echo $data; ?>);

    // Loop your data
    for (var i = 0; i < data.length; i++)
    {
        // Output your data in marquees
        setTimeout(function() {
            document.write("<marquee behaviour='scroll' direction='left'>");
            document.write(data[i].heading);
            document.write("</marquee>");
        }, 4000); // Every 4 seconds
    }

</script>

Don't expect this code to just work for you, so get debugging it and using var_dump() to see what you get from PHP, and console.log() to see what you have in JavaScript.

Final Note

mysql_query has been deprecated and should be used with caution. You should check out PDO / mysqli instead; they're not too hard to understand and they're interesting too!