PHP随机图像与数据库

Question

I'm using this script for my website to show the random images that are set in the database with ever new setting gamenumbers. set.php is where the database settings are saved.

<?php
@include_once('set.php');
$gamenum = fetchinfo("value","info","name","current_game")-1;
    $rs = mysql_query("SELECT * FROM `game".$gamenum."` GROUP BY `userid`");
    $i = 0;
    $crd = "";
    while($row = mysql_fetch_array($rs)) {
        $crd .= 'avatar.push(\''.$row["avatar"].'\');';
        $i++;
    }
echo '<script src="js/jquery.easing.1.3.js"></script>
<script>
    $(".stop-game").addClass("hidden");
    function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }
    var avatar=[]; 
    '.$crd.' 
    $( ".hhdgfbd" ).after( "<div id=\"hjgfd\" style=\"width: 1000px;margin: auto;overflow: hidden\"><div id=\"rouletbox\" style=\"height: 140px; width: 100%;  margin: auto\"><div class=\"roulet\"><div class=\"weaponline\" style=\"  margin-left: 330px\"></div><div class=\"mainbox\"><div class=\"weaponbox\" style=\"margin: 5px\"><div class=\"weaponheader\"><center><img style=\"width: 125px; height: 125px\" id=\"img1\"></center></div></div><div class=\"weaponbox\" style=\"margin: 5px\"><div class=\"weaponheader\"><center><img style=\"width: 125px; height: 125px\" id=\"img2\"></center></div></div><div class=\"weaponbox\" style=\"margin: 5px\"><div class=\"weaponheader\"><center><img style=\"width: 125px; height: 125px\" id=\"img3\"></center></div></div><div class=\"weaponbox\" style=\"margin: 5px\"><div class=\"weaponheader\"><center><img style=\"width: 125px; height: 125px\" id=\"img4\"></center></div></div><div class=\"weaponbox\" style=\"margin: 5px\"><div class=\"weaponheader\"><center><img style=\"width: 125px; height: 125px\" id=\"img5\"></center></div></div><div class=\"weaponbox\" style=\"margin: 5px\"><div class=\"weaponheader\"><center><img style=\"width: 125px; height: 125px\" id=\"img6\"></center></div></div><div class=\"weaponbox\" style=\"margin: 5px\"><div class=\"weaponheader\"><center><img style=\"width: 125px; height: 125px\" id=\"img7\"></center></div></div><div class=\"weaponbox\" style=\"margin: 5px\"><div class=\"weaponheader\"><center><img style=\"width: 125px; height: 125px\" id=\"img8\"></center></div></div><div class=\"weaponbox\" style=\"margin: 5px\"><div class=\"weaponheader\"><center><img style=\"width: 125px; height: 125px\" id=\"img9\"></center></div></div><div class=\"weaponbox\" style=\"margin: 5px\"><div class=\"weaponheader\"><center><img style=\"width: 125px; height: 125px\" id=\"img10\"></center></div></div><div class=\"weaponbox\" style=\"margin: 5px\"><div class=\"weaponheader\"><center><img style=\"width: 125px; height: 125px\" id=\"img11\"></center></div></div><div class=\"weaponbox\" style=\"margin: 5px\"><div class=\"weaponheader\"><center><img style=\"width: 125px; height: 125px\" id=\"img12\"></center></div></div><div class=\"weaponbox\" style=\"margin: 5px\"><div class=\"weaponheader\"><center><img style=\"width: 125px; height: 125px\" id=\"img13\"></center></div></div><div class=\"weaponbox\" style=\"margin: 5px\"><div class=\"weaponheader\"><center><img style=\"width: 125px; height: 125px\" id=\"img14\"></center></div></div><div class=\"weaponbox\" style=\"margin: 5px\"><div class=\"weaponheader\"><center><img style=\"width: 125px; height: 125px\" id=\"img15\"></center></div></div><div class=\"weaponbox\" style=\"margin: 5px\"><div class=\"weaponheader\"><center><img style=\"width: 125px; height: 125px\" id=\"img16\"></center></div></div><div class=\"weaponbox\" style=\"margin: 5px\"><div class=\"weaponheader\"><center><img style=\"width: 125px; height: 125px\" id=\"img17\"></center></div></div><div class=\"weaponbox\" style=\"margin: 5px\"><div class=\"weaponheader\"><center><img style=\"width: 125px; height: 125px\" id=\"img18\"></center></div></div><div class=\"weaponbox\" style=\"margin: 5px\"><div class=\"weaponheader\"><center><img style=\"width: 125px; height: 125px\" id=\"img19\"></center></div></div><div class=\"weaponbox\" style=\"margin: 5px\"><div class=\"weaponheader\"><center><img style=\"width: 125px; height: 125px\" id=\"img20\"></center></div></div><div class=\"weaponbox\" style=\"margin: 5px\"><div class=\"weaponheader\"><center><img style=\"width: 125px; height: 125px\" id=\"img21\"></center></div></div><div class=\"weaponbox\" style=\"margin: 5px\"><div class=\"weaponheader\"><center><img style=\"width: 125px; height: 125px\" id=\"img22\"></center></div></div><div class=\"weaponbox\" style=\"margin: 5px\"><div class=\"weaponheader\"><center><img style=\"width: 125px; height: 125px\" id=\"img23\"></center></div></div><div class=\"weaponbox\" style=\"margin: 5px\"><div class=\"weaponheader\"><center><img style=\"width: 125px; height: 125px\" id=\"img24\"></center></div></div><div class=\"weaponbox\" style=\"margin: 5px\"><div class=\"weaponheader\"><center><img style=\"width: 125px; height: 125px\" id=\"img25\"></center></div></div><div class=\"weaponbox\" style=\"margin: 5px\"><div class=\"weaponheader\"><center><img style=\"width: 125px; height: 125px\" id=\"img26\"></center></div></div><div class=\"weaponbox\" style=\"margin: 5px\"><div class=\"weaponheader\"><center><img style=\"width: 125px; height: 125px\" id=\"img27\"></center></div></div><div class=\"weaponbox\" style=\"margin: 5px\"><div class=\"weaponheader\"><center><img style=\"width: 125px; height: 125px\" id=\"img28\"></center></div></div><div class=\"weaponbox\" style=\"margin: 5px\"><div class=\"weaponheader\"><center><img style=\"width: 125px; height: 125px\" id=\"img29\"></center></div></div><div class=\"weaponbox\" style=\"margin: 5px\"><div class=\"weaponheader\"><center><img style=\"width: 125px; height: 125px\" id=\"img30\"></center></div></div><div class=\"weaponbox\" style=\"margin: 5px\"><div class=\"weaponheader\"><center><img style=\"width: 125px; height: 125px\" id=\"img31\"></center></div></div><div class=\"weaponbox\" style=\"margin: 5px\"><div class=\"weaponheader\"><center><img style=\"width: 125px; height: 125px\" id=\"img32\"></center></div></div><div class=\"weaponbox\" style=\"margin: 5px\"><div class=\"weaponheader\"><center><img style=\"width: 125px; height: 125px\" id=\"img33\"></center></div></div><div class=\"weaponbox\" style=\"margin: 5px\"><div class=\"weaponheader\"><center><img style=\"width: 125px; height: 125px\" id=\"img34\"></center></div></div></div></div></div></div>");
    for(var i=1; i <= 34; i++) {
        var rand = getRandomInt(0,(avatar.length-1));
        $(\'#img\'+i).attr("src",avatar[rand]); 
        //alert(avatar[rand]);
    }';

$winner = fetchinfo("userid","games","id",$gamenum);
$avatar = fetchinfo("avatar","users","steamid",$winner);
echo '$(\'#img30\').attr("src","'.$avatar.'");'; 
echo '$(\'.mainbox\').css("margin-left",getRandomInt(-425,-5)+"px");
    setTimeout(function() {
        $(".mainbox").animate({marginLeft: getRandomInt(-3715,-3590)+"px"}, 7000, "easeOutExpo");
        audioElement3.play();
    },50);
    setTimeout(function() {
        $("#hjgfd").remove();
        roulet = 0;
    },10000);
</script>';
?>

But everytimes it displays the images of the gamenumber before. I tried different things but i couldn't find a solution.

Answer 1

You could simplify a lot of your fetch/string building code. It's totally redundant, and also vulnerable to the JS equivalent of sql injection attacks.

$crd = array();
while($row = mysql_fetch_array($rs)) {
    $crd[] = $row['avatar'];
}
... blah blah blah
var avatar = <?php echo json_encode($crd); ?>;

Now you're directly creating the string representation of an array, without wasting cpu cycles building up the array one-item-at-a-time with push() operations, and you also eliminate the possibility of these avatar values causing a JS syntax error, if they're something OTHER than numbers.