前端---雪花飘飘

最新推荐文章于 2021-05-31 04:57:18 发布

铃兰_

最新推荐文章于 2021-05-31 04:57:18 发布

阅读量183

点赞数

本文链接：https://blog.csdn.net/weixin_45881192/article/details/104276199

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style type="text/css">
			html,body{
				 margin: 0;
		         padding: 0;
		         overflow: hidden;
		         height: 100%;
			}
			body{
				/*background-image: url(img/雪壁纸2.jpg) ;
				background-size: 100%;*/
				background-color: black;
			}
			
			//雪花元素 的 css
			.simg{
				position: absolute;//绝对定位
				/*color: white;*/
				/*width: 40px;*/	
				
							
			}
			
			
			
			
		</style>
		<script type="text/javascript">
			window.onload=function(){
				//获取屏幕 宽 长	:		
				var pingkuan=window.screen.width;
				var pingchang=window.screen.height;
				
				//出现雪花的方法：
				function createSnow(){			
						//创建 1个雪花元素		
						var simg=document.createElement("img");
						simg.className="simg";
						simg.src="img/雪花花.jpg";
	           			simg.style.left=Math.random()*pingkuan+"px";
	           			simg.style.top=((Math.random()*pingchang)/3)+"px";	
	           			simg.style.width=Math.random()*50+"px";
	           			//鼠标移上去 雪花变大；移出 变回原小
	           			var temp;
	           			simg.onmouseover=function(){
	           				temp=simg.style.width;
	           				simg.style.width="100px";
	           				
	           			}
	           			simg.onmouseout=function(){
	           				simg.style.width=temp;
	           			}
	           			//雪花元素  加入body中big的div中展现
						document.getElementById("big").appendChild(simg);						
				}
				
				//点击出现：  
				//    =循环创建出40个雪花=雪花调用40次创建1个雪花方法
				var chu=document.getElementById("chu");
				chu.onclick=function(){
					for(var i=0;i<40;i++){
						createSnow();
					}
				}
				
				
				//开始飘：  
				/*   =定时器
				每3秒（3000 毫秒）弹出 "Hello" :
				setInterval(function(){ alert("Hello"); }, 3000);  
				 */
				var stime;
				function piao(){	
					if(stime==null){
						stime= setInterval(function(){
					 	var simg=document.getElementsByClassName("simg");
					 	console.log(simg);
					 	for(var i=0;i<simg.length;i++){
//					 		var t_=simg[i].style.top;
//					 		var t=parseInt(t_.substring(0,t_.indexOf("p")));
							var t=simg[i].offsetTop;
					 		var l_=simg[i].style.left;
					 		var l=parseInt(l_.substring(0,l_.indexOf("p")));
					 		if(t<=pingchang){
					 			simg[i].style.top=t+10+"px";
					 			simg[i].style.left=l+4+"px";
					 		}	
					 		if(t>=600){
					 			simg[i].remove();
					 			createSnow();
					 		}
					 	} 	
					 },100)		
					}
								     
				}
						
				var piaoyo=document.getElementById("piaoyo");
				piaoyo.onclick=function(){
					piao();
				}
				
				//定格：
				//   =杀死定时器
				document.getElementById("ding").onclick=function(){
					clearInterval(stime);
					stime=null;
				}
				
				//删雪花：
				document.getElementById("shan").onclick=function(){
					//获得 all雪花元素数组
					var simg=document.querySelectorAll("#big .simg");
					//在big的div中 删掉
					for(var i=0;i<simg.length;i++){
						document.getElementById("big").removeChild(simg[i]);
					}
				}
				
		
				
			}
		</script>
	</head>
	<body>
	<div id="big">	
		<input type="button" value="雪花出现" id="chu"/>
		<input type="button" value="开始飘" id="piaoyo"/>
		<input type="button" value="定格" id="ding"/>
		<input type="button" value="删除雪花" id="shan" />
	</div>	
		
		
		
		
	</body>
</html>