首页 > Web开发 > 详细

32 jQuery——自制飞粒特效

时间:2020-02-06 11:40:38      阅读:135      评论:0      收藏:0      [点我收藏+]

效果先看

技术分享图片

知识点

jQuery节点操作

  • append()追加节点

js属性操作

  • setAttribute() 设置属性(覆盖型)

jQuery动画

  • animate();//请查看api

window对象定时与间隔执行操作

  • setInterval();//间隔执行
  • setTimeout();//定时执行
  • 具体查看api

页面载入事件

  • $(document).ready(fn)

未解决的问题

代码昨天还好好的,添加div(画面中飞过的方块)后能删除div。但今天就删不了了,会导致占用大量内存。

出现的错误如下

技术分享图片

 

 

完整代码

需要准备好jQuery文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>流星</title>
		<script src="js/jQuery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				window.setInterval("fly()",1);//数字为秒生产(1000/10)个div 
				window.setTimeout(function(){
				alert("本程序删除div失败了,请处理:line:11,line:36")
				window.setInterval("del()",1);//数字为每秒执行(1000/9)次删除,每次删一个div。此行数字与9行数字要基本保持一致。因为有时间差(执行代码需要时间),所以一致会导致在漫长的时间后(超级长),占用内存会增很大
				},3000);//这个数字需要与26行数字保持一致,表示20000
			});
			// 生产div
			function fly(){
				// 生成随机id
				var str = String.fromCharCode(Math.floor(Math.random()*26+65));
				var num = Math.floor(Math.random()*10000);
				var id = str + num;
				//生成随机宽高
				var length = Math.ceil(Math.random()*5);
				//生成随机速度
				var speed = Math.floor(Math.random()*17000+1000);
				//生成颜色
				var color = "#22b6ff"
				//添加div
				$("body").append("<div id=‘"+id+"‘></div>");
				var x = -30;
				var y = Math.floor(Math.random()*900);
				var div = $("#"+id);
				div[0].setAttribute("style","width:"+length+"px;height:"+length+"px;background-color: "+color+";position: absolute;left:"+x+"px;top:"+y+"px");
				div.animate({left:‘1910px‘},speed);//动画时长:移动速度。这个数字需要与12行数字保持一致
			}
			//清除div:原本正常运行现在删除不了了
			function del(){
				for(var i ; i< 4;i++){
					$("body>div").first().remove();
				}
			}
		</script>
		<style>
			body{
				background-color: black;
				color: white;
			}
		</style>
	</head>
	<body>
	</body>
</html>

  

32 jQuery——自制飞粒特效

原文:https://www.cnblogs.com/Scorpicat/p/12267884.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!