博客园

HTML_13_javascript_小游戏_开心消消乐 


<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>

  <style type="text/css">
  
  #d2{
  width:100px;
  height:20px;
  border:1px solid black;
  display:inline-block;
  }

  #d3{
  display:inline-block;
  background:red;
  height:20px;
  }
 
  </style>

  <script type="text/javascript">
var dsq;
var count=0;
var n=0;
var js;

function starGame(){	
window.clearInterval(dsq);
window.clearInterval(js);
js=window.setInterval("shijian()",1000)
dsq=window.setInterval("star()",400);
}
function star(){
var obj=document.createElement("img");
obj.src="xingxing.jpg"
var w=Math.floor(Math.random()*80+20);
obj.width=w;
obj.height=w;
//随机位置
var x=Math.floor(Math.random()*1166+100);
var y=Math.floor(Math.random()*500+100);
obj.style.position="absolute";
obj.style.top=y+"px";
obj.style.left=x+"px";
document.body.appendChild(obj);
obj.οnclick=removeStar;
count++;
var sp=document.getElementById("d3");
d3.style.width=count*5+"px";
if(count>=20)
	{
	alert("OVER");
	window.clearInterval(dsq);
	location.reload();
	}
	
}
function removeStar(){
this.parentNode.removeChild(this);
count--;
var sp=document.getElementById("d3");
d3.style.width=count*5+"px";
}

function zanting(){
alert("STOP");
}
  
  function shijian(){
  n++;
  var obj=document.getElementById("d1");
  obj.innerHTML="已经进行"+n+"秒";
  
  }
  
  
  
  </script>

 </head>
 <body  style='cursor:url(http://asp.7i24.com/yhsjxe/book1/images/c2.cur)'>
  <input type="button" value="开始" οnclick="starGame()">
  <input type="button" value ="暂停" οnclick="zanting()">
  <span id="d1">已经进行了0秒</span>
  <span id="d2"><span  id ="d3">  </span></span>
  
 </body>
</html>

posted @ 2016-10-31 22:12  孙中明  阅读(202)  评论(0)  编辑  收藏  举报