📒 博客首頁：?﹏??敬坤的博客 🎈
😊 我只是一個代碼的搬運工 🎃
🎉 歡迎來訪的讀者關注、點贊和收藏 🤞
😉 有問題可以私信交流 😆
📃 文章標題：圣誕節都到了，快使用代碼畫棵圣誕樹吧 🖍

用Vue專案教你做出圣誕節的場景

使用Vue3.0完成一個圣誕節雪花紛飛的場景，本篇文章會講解如何完成這個功能

效果

如下，就是我們做完之后展示的效果，會出現雪花在螢屏上飄落，點擊查看：

準備幾個雪花圖片，以及圣誕樹圖片

在制作之前，我們需要準備雪花的圖片和圣誕樹的圖片，如下：


上面就是我們所需要的素材啦😋

制作雪花點，以及隨機生成雪花，雪花點

話不多說，直接上代碼，在分析：

<template>
	<div class="flex flex-align flex-column">
		<!-- 區域范圍 -->
		<div ref="snowflake" id="snowflake" class="snowflake-bg">
			<!-- 雪花點標簽 -->
			<div class="small-circle" v-for="(item,index) in smallCircle" :key="'smallCircle'+index" 
			:style="{'bottom':`${item.bottom}px`,'left':`${item.left}px`,'transition':`all ${item.timeStamp}`}"
			>
			</div>

			<!-- 雪花標簽 -->
			<img src="../../assets/image/xuehua1.png" 
				class="snowflake-img"
				v-for="(item,index) in snowflakeList" :key="'snowflakeImg'+index"
				:style="{'bottom':`${item.bottom}px`,'left':`${item.left}px`,'transition':`all ${item.timeStamp}`,'width':`${item.size}px`,'height':`${item.size}px`}"
			>

			<!-- 圣誕樹標簽 -->
			<img src="../../assets/image/christmas-tree.png" class="christmas-tree">
			<img src="../../assets/image/christmas-tree.png" class="christmas-tree1">
			<img src="../../assets/image/christmas-tree.png" class="christmas-tree2">
		</div>
	</div>
</template>

<script>
	let _that
	export default {
		data() {
			return {
				smallCircle:[],//保存雪花點陣列
				snowflakeList:[],//保存雪花陣列
				visualAreaWidth:0,//獲取雪花x軸的范圍
				visualAreaHeight:0,//獲取雪花降落的高度
				randomlyGeneratedDotsTimes:null//保存我們的定時器
			}
		},
		created() {
			_that=this
		},
		mounted(){
			_that.visualAreaWidth=_that.$refs.snowflake.clientWidth
			_that.visualAreaHeight=_that.$refs.snowflake.clientWidth
			_that.randomlyGeneratedDots()
		},
		methods: {
			//每隔一秒生成一個雪花點和雪花
			randomlyGeneratedDots(){
				let id=0
				_that.randomlyGeneratedDotsTimes=setInterval(function(){
					id++
					//生成雪花點
					_that.generateSnowflakes(id)
					//生成雪花
					_that.getSnowflake(id)
				},1000)
			},
			//雪花點下降
			generateSnowflakes(id){
				//當我們雪花點超過1000個，清空陣列，避免記憶體溢位
				if(_that.smallCircle.length>10000){
					_that.smallCircle=[]
				}
				//保存雪花點的資料 
				//left 代表生成x軸的位置 bottom 代表初始化位置 top 代表Y軸消失的位置 timeStamp 代表設定我們影片的時間 id當前資料的標識
				let data={
					left:Math.ceil(Math.random()*_that.visualAreaWidth),
					bottom:_that.visualAreaHeight,
					top:Math.ceil(Math.random()*_that.visualAreaHeight),
					timeStamp:Math.ceil(Math.random()*10+1)+'s',
					id:id,
				}
				//
				_that.smallCircle.push(data)
				let nowIndex=_that.smallCircle.length-1
				//將我們的雪花降落到底部
				setTimeout(function(){
					_that.smallCircle[nowIndex].bottom=0
				},10)
			},
			//生成雪花
			getSnowflake(id){
				//當我們雪花超過1000個，清空陣列，避免記憶體溢位
				if(_that.snowflakeList.length>10000){
					_that.snowflakeList=[]
				}
				//保存雪花的資料
				//left 代表生成x軸的位置 bottom 代表初始化位置 top 代表Y軸消失的位置 timeStamp 代表設定我們影片的時間 imgSrc代表雪花樣式 size代表雪花大小 id當前資料的標識
				//arr 保存我們雪花樣式的路徑
				let arr=['../../assets/image/xuehua.png','../../assets/image/xuehua1.png']
				let data={
					left:Math.ceil(Math.random()*_that.visualAreaWidth),
					bottom:_that.visualAreaHeight,
					top:Math.ceil(Math.random()*_that.visualAreaHeight),
					timeStamp:Math.ceil(Math.random()*10+1)+'s',
					imgSrc:arr[Math.ceil(Math.random()*2)],
					size:Math.ceil(Math.random()*10+1)*2,
					id:id,
				}
				//
				_that.snowflakeList.push(data)
				let nowIndex=_that.snowflakeList.length-1
				//將我們的雪花降落到底部
				setTimeout(function(){
					_that.snowflakeList[nowIndex].bottom=-50
				},10)
			}
			
		}
	}
</script>

<style >
	
</style>
<style scoped="scoped">
	/*****************  flex布局檔案 *******************/
	@import url("../../assets/css/public.css");
	/*****************  背景區域  *******************/
	.snowflake-bg{
		width: 1000px;
		background-color: black;
		height: 100vh;
		position: relative;
		overflow: hidden;
	}
	/*****************  雪花點樣式  *******************/
	.small-circle{
		background-color: #FFFFFF;
		border-radius: 50%;
		width: 5px;
		height: 5px;
		position: absolute;
		z-index: 999;
	}
	/*****************  雪花樣式  *******************/
	.snowflake-img{
		position: absolute;
		z-index: 999;
	}
	/*****************  三棵圣誕樹樣式  *******************/
	.christmas-tree,.christmas-tree1,.christmas-tree2{
		position: absolute;
		bottom: 0;
	}
	.christmas-tree{
		width: 400px;
		left: 300px;
	}
	.christmas-tree1{
		width: 300px;
		left: 200px;
	}
	.christmas-tree2{
		width: 300px;
		right: 200px;
	}
</style>

總結

1. 在我們使用v-for時，需要注意key值時唯一的不能都定義成index，:key="‘name’+index"
2. 陣列不能使用定時器一個勁的添加，需要達到一定數量，然后清除，不然會造成記憶體溢位