js用类的方法写萤火虫和组合创建的方法写萤火虫

最新推荐文章于 2021-06-07 14:33:21 发布

布朗狗熊

最新推荐文章于 2021-06-07 14:33:21 发布

阅读量309

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript HTML CSS

本文链接：https://blog.youkuaiyun.com/weixin_40196539/article/details/99685146

JavaScript 同时被 3 个专栏收录

39 篇文章

订阅专栏

HTML

30 篇文章

订阅专栏

CSS

25 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS和JavaScript实现萤火虫动画效果的两种方法。一种是通过面向对象的类方法，另一种是组合创建法。文章详细解释了如何创建萤火虫对象，设置随机位置，以及如何使萤火虫在页面上飞行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
上面两张为素材图

方法一：类的方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			html{
				height: 100%;
			}
			body{
				margin: 0;
				padding: 0;
				height:100%;
				background: url(img/bg.jpg) no-repeat;
				background-size: cover;
			}
			
			img{
				/*display: block;*/
				position: absolute;
				width: 20px;
				height:auto;
				}
		</style>
	</head>
	<body>
		<!--<img src="img/1.jpg"/>-->
		<script src="js/startMove.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//面向对象   类的创建方法
			class Fireworm{
				constructor(){
					this.oImg = document.createElement("img");
					this.oImg.src = "img/1.jpg";
				}
				//取随机位置
				pos(){
					var cw = document.documentElement.clientWidth;
					var ch = document.documentElement.clientHeight;
					
					this.posx = Math.floor(Math.random()*(cw - 20));
					this.posy = Math.floor(Math.random()*(ch - 20));
				}
				//萤火虫显示
				show(){
					//调用位置
					this.pos();
					
					document.body.appendChild(this.oImg);
					this.oImg.style.left = this.posx + "px";
					this.oImg.style.top = this.posy + "px";
				}
				//萤火虫飞
				fly(){
					//再去获取下位置，保证和当前位置不一样
					this.pos();
					//调用startMove函数来控制萤火虫的运动
					startMove(this.oImg,{left:this.posx,top:this.posy},()=>{
						this.fly();
					})
				}
			}
			for(let i = 0;i < 50;i++){//控制萤火虫的个数
				var fireworm = new Fireworm();
				fireworm.show();
				fireworm.fly();
			}
		</script>
	</body>
</html>

方法二：组合创建法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			html{
				height: 100%;
			}
			body{
				margin: 0;
				padding: 0;
				height:100%;
				background: url(img/bg.jpg) no-repeat;
				background-size: cover;
			}
			
			img{
				/*display: block;*/
				position: absolute;
				width: 20px;
				height:auto;
				}
		</style>
	</head>
	<body>
		<script src="js/startMove.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//面向对象   组合创建法
			function Fireworm(){
				this.oImg = document.createElement("img");
				this.oImg.src = "img/1.jpg";
			}
			//获取随机位置
			Fireworm.prototype.getranPos = function(){
				//获取可视区域宽高
				var cw = document.documentElement.clientWidth;
				var ch = document.documentElement.clientHeight;
				//获取萤火虫的出现位置
				this.posx = Math.floor(Math.random()*(cw - 20));
				this.posy = Math.floor(Math.random()*(ch - 20));
			}
			//萤火虫展示出来
			Fireworm.prototype.show = function(){
				//展示出第一次的位置
				this.getranPos();
				
				document.body.appendChild(this.oImg)
				this.oImg.style.left = this.posx + "px";
				this.oImg.style.top = this.posy + "px";
			}
			//萤火虫飞
			Fireworm.prototype.fly = function(){
				//再获取下位置，保证两次位置不一样
				this.getranPos();
				//调用运动函数startMove
				startMove(this.oImg,{left:this.posx,top:this.posy},()=>{
					this.fly();
				})
			}
			for(var i = 0;i < 30;i++){//控制萤火虫的个数
				var fireworm = new Fireworm();
				fireworm.show();
				fireworm.fly();
			}
		</script>
	</body>
</html>