js简陋下雪特效

最新推荐文章于 2025-07-08 23:23:23 发布

过期了的小朋友

最新推荐文章于 2025-07-08 23:23:23 发布

阅读量245

点赞数

CC 4.0 BY-SA版权

文章标签： javascript css

本文链接：https://blog.csdn.net/insist_LJJ/article/details/103752810

js简陋下雪特效

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>今见下雪特效</title>
<style>
	*{margin:0;padding: 0;}
	body{background-color:black;}
	.snow{
		width: 5px;
		height: 5px;
		border-radius: 10px;
		box-shadow: 0 1px 4px 4px #eee9e9;
        background-color: white;
		position: absolute;
		transition: 1s;
	}
	</style>
</head>
   
<body>
     <div id="body">
     	
     </div>
</body>
<script>
	
	var oBody=document.getElementsByTagName('body')[0];

//	随机数函数
	 function zoneRandom(start,final)
	{
		var sum=final-start+1; //总个数=最后一个数（final）-第一个数（start）+1；
		return Math.floor(Math.random()*sum+start);
	}
	
	//生成雪函数
	function snow(){
        //利用for循环生成div并且一次添加类名以及初始X坐标
		for(var i=0;i<zoneRandom(1,12);i++){ 
			var div=document.createElement('div');//生成div
			div.className='snow';//添加类名
			//网页可见区域宽：document.body.clientWidth
			div.style.top='-10px';
			div.style.left=zoneRandom(10,document.body.clientWidth)+"px";
		}
		oBody.appendChild(div);
	 }
	 
	//下雪函数
	 function snowAtion(){
		 snow();//生成雪花
		 var bodyDiv=document.getElementsByTagName('div');
		 for(var i=0;i<bodyDiv.length;i++){
//			 如果当前的div高度大于当时可见区域的高度则删除元素
			 if(parseInt(bodyDiv[i].style.top)>window.innerHeight-20){
				 oBody.removeChild(bodyDiv[i]);
			 }
			  bodyDiv[i].style.top=parseInt(bodyDiv[i].style.top)+zoneRandom(8,14)+"px";
			  bodyDiv[i].style.left=parseInt(bodyDiv[i].style.left)-2+"px";
		 }
	 }
		 
     var Snowtime=setInterval(snowAtion,100);//设置定时器

	
	    
	</script>
</html>