1

我在网页上创建了一个小部分，每次打开网页时都会随机更改。代码看起来像这样。

<div id ="quote-text">
    <?php
    mysql_connect("localhost", "xxxxxxx", "xxxxxxx") or die(mysql_error());
    mysql_select_db("xxxxxxx") or die(mysql_error());
    $result = mysql_query("SELECT * FROM quotes WHERE approved=1 ORDER BY RAND () LIMIT 1") 
    or die(mysql_error()); 
    while($row = mysql_fetch_array( $result )) {
        echo "<img src=http://www.xxxxxxxxxx.com/images/".$row['image'] ." width=280px ><br>";
        echo '<span class="style2">'.$row['quote'].'</span class>';
        echo "<tr><td><br>";
        echo "<tr><td>";
    } 
    echo "</table>";
    ?>
</div>

在不刷新整个页面的情况下，我需要做什么才能随机每 5 秒进行一次更改？

谢谢你

4

3 回答 3

2

我想说最优化的解决方案是使用同时使用 PHP 和 javascript/Jquery 的解决方案。

首先，我会避免每 5 秒对 PHP 脚本进行一次 AJAX 调用。

相反，您可以每 X 分钟打一个电话并获得一组 12X 图像。

然后我会使用 javascript，setInterval让客户端更改图像。

在进行到一半时，您可以再次调用 PHP 脚本以将新元素添加到您的图像集，并删除之前的元素。

像这样的方法将减少客户端和服务器端的开销。

更新：下面是这个方法的粗略实现

Javascript：

<?php
if(isset($_GET['getBanners']))
{
    header('Content-Type: application/json');
    mysql_connect("localhost", "root", "") or die(mysql_error());
    mysql_select_db("stackoverflow2") or die(mysql_error());

    $json_rows = array();

    $result = mysql_query("SELECT * FROM quotes WHERE approved=1   ORDER BY RAND ()  LIMIT 12;") 

    or die(mysql_error()); 
    $element = 0;
    while($row = mysql_fetch_array( $result )) {
        $json_rows[$element] = $row['image'];
        $element++;
    } 

    print '{"dataVal":'.json_encode($json_rows).'}';
    return;
}
?>
<html>
<head>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script>
//alert('test1');
var randomBanners = new Array ( );
var currentBannerIndex = 0;

function readNewBanners(startElement, numElements)
{
    $.getJSON('http://127.0.0.1/stackoverflow/Banner.php?getBanners=1', function(data) {
            for (var i = startElement; i < data.dataVal.length && i<startElement + numElements ; i++) {
            randomBanners[i] = data.dataVal[i];
            }           
    });
}

function refreshBannerImage()
{
    if(document.getElementById('banner') == undefined) return;
    document.getElementById('banner').innerHTML = ("<img src='"+randomBanners[currentBannerIndex]+"'/>");
    currentBannerIndex = (currentBannerIndex+1)%12;
}

$( document ).ready(function() {
    readNewBanners(0, 12);
    setInterval(function() {
          readNewBanners(0, 12);
    }, 60000);
     setInterval(function() {
          refreshBannerImage();
    }, 500);
});
</script>

</head>
<body>

<div id="banner">
Banner Here
</div>

</body>
</html>

SQL：

   create table quotes
    (
    image varchar(10),
    approved int
    );

    insert into quotes values ('http://dummyimage.com/600x400/000/fff&text=1',1);
    insert into quotes values ('http://dummyimage.com/600x400/000/fff&text=2',1);
    insert into quotes values ('http://dummyimage.com/600x400/000/fff&text=3',1);
    etc...
于 2013-06-19T22:05:15.343 回答
2

您需要进行 AJAX 调用来更改页面上的内容而不刷新。

在此处查看 W3Schools 教程：http: //www.w3schools.com/ajax/ajax_intro.asp

或者更好地使用 Mozilla 教程：

https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started

于 2013-06-19T22:04:24.360 回答
0

为此，您需要使用 AJAX。我建议你使用 jQuery 或类似的框架。这是您想要的一个很好的示例How to update a specific div with ajax 和 jquery。添加一个 setInterval() 调用，就像这篇文章http://forum.jquery.com/topic/jquery-setinterval-function一样，你就完成了。

于 2013-06-19T22:07:30.410 回答