本来想模拟一个扫雷的(只画样子,不实现功能),感觉太简单了。只要不停的向div内追加img标签就可以了。所以想弄麻烦点。
效果图:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8"/>
<style type="text/css">
*{margin:0;padding:0}
#asj{
width:550px;
height:380px;
margin:0 auto;
}
#content{
width:550px;
height:380px;
border:1px solid red;
position:fixed;
}
</style>
<script src="./JS/jQuery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
init();// 页面加载时开始在div上随机“画”图片
});
// 函数:初始化函数。
function init(){
// 页面图片的总数
for(var i=1;i<=50;i++){
// 通过getNum函数获取图片xy轴的坐标。
var x=getNum(500),y=getNum(330);
// 追加到div容器中。
$("<img/>",{"id":"img"+i,"src":"black.gif"}).appendTo("#content").click(function(){
alert("hello world");
}).css({"top":y,"left":x,"position":"absolute"});
}
};
// 函数:主动创建符合要求的整数,并返回。
function getNum(limit){
var num;
while(true){
num=Math.random()*1000;
if(num<=limit&&num>0){
break;
}
}
return parseInt(num);
};
</script>
</head>
<body>
<div id="asj">
<div id="content">
</div>
</div>
</body>
</html>