==========PHP DIV==========

Question

这是我的代码：
<center>
<div style="width:800px;height:500px;">
<?php 
for($j=0;$j<10;$j++){
for($i=0;$i<10;$i++){
$s =rand(1,3);
if($s == 1)
echo "<img src='../img/1.jpg' onclick='sclick($j,$i,$s)'/>  ";
else if($s == 2)
echo "<img src='../img/2.jpg' onclick='sclick($j,$i,$s)'/>  ";
else
echo "<img src='../img/3.jpg' onclick='sclick($j,$i,$s)'/>  ";
}
echo "<br>";
}
?>
<div><img src='../img/4.jpg' onclick='sclick($j,$i,$s)'/></div>
<label id='lbl'></label>
</div>
</center> <script type="text/javascript">
var div=document.getElementById('divid');
function sclick(j,i,s){
if(s == 1)
var s= j+","+i+"(白色)";
else if(s ==2)
var s= j+","+i+"(黑色)";
else
var s= j+","+i+"(绿色)";
document.getElementById('lbl').innerText= s;
}
</script>我的问题是怎么把人放在我循环出来的格子里，然后点哪个格子目标就移动到那个位置。。跟扫雷性质差不多PHPdivfunction

Answer 1

用table布局吧  感觉你的这个用table方便一点

Answer 2

呵呵，帖子被扔到这边来了，LZ不知道会不会迷路好久没写js，手生
只能说说思路，坐等大神代码 table，div或其他tag没所谓，能排整齐就行，关键是每个单元给定坐标（不是像素坐标，是行列，或者js算出来也可以），点击某个单元用onclick，然后修改innerHtml插入图片，同时把上一个位置（当然要记录下来）的innerHtml清空（看需求是否清空）另一种做法是每个单元都放入空图片，点击时修改图片的src颜色问题可以预设一个数列（看顶楼是随机值），这样坐标与数列key互相换算就能产生“棋盘”和某单元格的相关参数了

Answer 3

<center>
<div style="width:800px;height:500px;">
<?php 
for($j=0;$j<10;$j++){
for($i=0;$i<10;$i++){
$s =rand(1,3);
echo "<img src='../img/$s.jpg' onclick='sclick($j,$i,$s,event)'/>  ";///多增加一个event参数
/*
if($s == 1)
echo "<img src='../img/$s.jpg' onclick='sclick($j,$i,$s,event)'/>  ";
else if($s == 2)
echo "<img src='../img/2.jpg' onclick='sclick($j,$i,$s)'/>  ";
else
echo "<img src='../img/3.jpg' onclick='sclick($j,$i,$s)'/>  ";*/
}
echo "<br>";
}
?>
<img src='../img/4.jpg' id="imgBeauty" style="position:absolute"/>
<label id='lbl'></label>
</div>
</center><script type="text/javascript">
    var div = document.getElementById('divid');
    function getPosition(o) { var p = { x: o.offsetLeft, y: o.offsetTop }; while (o = o.offsetParent) { p.x += o.offsetLeft; p.y += o.offsetTop; } return p; }
    function sclick(j, i, s, e) {
        var p = getPosition(e.srcElement || e.target); //获取点击到的格子位置
        document.getElementById('imgBeauty').style.left = p.x + 'px';
        document.getElementById('imgBeauty').style.top = p.y + 'px';
        if (s == 1)
            var s = j + "," + i + "(白色)";
        else if (s == 2)
            var s = j + "," + i + "(黑色)";
        else
            var s = j + "," + i + "(绿色)";
        document.getElementById('lbl').innerHTML = s;
    }
</script>