案例---随机图片加强版

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{padding:0px;margin: 0px;}
#span2{width:200px;height: 30px;border: 1px solid red;display: inline-block;}
#span3{height:30px;background: yellow;display: inline-block;}
</style>
<script type="text/javascript">
//网页加载完成创建星星
var dsq;
var sj;
var n=0;
var count=0;//定义星星的数量
function startGame()
{
//清除定时器防止多次点击开始游戏，造成定时器的叠加
window.clearInterval(sj);
window.clearInterval(dsq);
//星星定时器；
dsq=window.setInterval("start1()",400);
//时间定时器
sj=window.setInterval("shijian()",1000);
}
function start1()
{
//创建星星元素
var xing=document.createElement("img");

//给星星计数
count++;
//获取span3对象的id
var obj=document.getElementById("span3");
span3.style.width=count*10+"px";
if(count>20)
{
alert("游戏结束");
//游戏结束删除定时器
window.clearInterval(dsq);
location.reload();
}
//给星星加属性
xing.src="xingxing.jpg";
var w=Math.floor(Math.random()*80+20);
xing.width=w;
var x=Math.floor(Math.random()*1166+100);
var y=Math.floor(Math.random()*500+100);
xing.style.position="absolute";
xing.style.left=x+"px";
xing.style.top=y+"px";
//点击星星删除星星
xing.onclick=remove_xing;
//将img追加到body下；
document.body.appendChild(xing);
}
// 删除星星函数
function remove_xing()
{
// document.body.removeChild(this);
this.parentNode.removeChild(this);
count--;
var obj=document.getElementById("span3");
obj.style.width=count*10+"px";
}
//暂停游戏
function stopGame()
{
alert("暂停游戏");
}
//时间定时器
function shijian()
{
n++;
//计时,获取span对象的id
var Obj=document.getElementById("span1");
Obj.innerHTML="该游戏进行了"+n+"秒！";
}
</script>
</head>
<body>
<input type="button" value="开始游戏" onclick="startGame()">
<input type="button" value="暂停游戏" onclick="stopGame()">
<span id="span1">该游戏进行了0秒！</span>

<span id="span2"><span id="span3"></span></span>
</body>
</html>

案例---随机图片加强版

猜你喜欢