12001 PHP游戏实例,点出满天星 – 恵玩科技

<!DOCTYPE html  >
<html onclick="newStar(event)">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
		//》》案例:点出满天小星星:每点击一下,就“创建一个img对象”
		//需求描述:
		//1, 网页一打开,整个网页就变成“黑色”背景,代表“晚上”。
		//2, 在网页的任何位置点击,就会在该位置出现一颗星星(图)
		//3, 该星星的大小(宽高)在15-100之间随机变化
			function init(){
				//页面加载初始化
				//var obj=document.getElementById("webAll");--->>>通过测试,给html加id设置背景是没有用的
				var obj=document.body;
				obj.bgColor="black";
			}
			window.onload=init;
			
			//第一步,背景黑色完成
			
			//第二步,得到鼠标的位置,点击出现图片
			function newStar(evt){
				//创建图片对象
				var newImg=document.createElement("img");
				//设置图片对象的地址
				newImg.src="images/xingxing.gif";
				//得到xy的坐标
				var x=evt.clientX;
				var y=evt.clientY;//client是客户机的意思,也就是当前电脑的屏幕
				
				//设置绝对定位以及图片的位置
				newImg.style.position="absolute";
				newImg.style.left=x+"px";
				newImg.style.top=y+"px";
				
				//设置图片的随机大小
				//随机数的公式  
				//js中随机数的公式   Math.floor(Math.random()*(最大值-最小值+1))+最小值
				var num=Math.floor(Math.random()*(100-15+1))+15;
				//设置图片的随机宽高  只适用于宽度和高度相等的情况
				
				newImg.width=num;
				newImg.height=num;
				
				//优化 得到图片比例 比如4:3
				
				//newImg.width=(0.4)*num;
				//newImg.height=(0.3)*num;
				
				
				//将图片放入网页的代码
				var obj=document.body;
				obj.appendChild(newImg);//将newImg这个对象插入到obj这个网页中
				
				//alert("测试代码");
			}
			
		</script>
	</head>
	<body>
	</body>
</html>

 

打赏作者