JS实现红包抽奖

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击查看活动详情

一、HTML+CSS实现页面结构

`
<main id="A">
	<div class="giftBox"></div>
	<div class="giftBox"></div>
	<div class="giftBox"></div>
	<div class="giftBox"></div>
	<div class="giftBox"></div>
	<div class="giftBox"></div>
</main>		

增加一个鼠标hover样式，当鼠标覆盖时执行动画帧，transform: rotate分别取正负值，实现左右摇摆

.giftBox:hover ,.move{
	animation:aa .2s infinite;

}

@keyframes aa {
	0%{
		transform: rotate(-1deg);
	}
	20%{
		transform: rotate(1deg);
	}
	
	50%{
		transform: rotate(-4deg);
	}
	
	100%{
		transform: rotate(4deg);
	}
	
}

二、JS实现动态元素添加

let n = 252
let arr = [
	'机械键盘',
	'机械键盘',
	'机械键盘',
	'头戴耳机',
	'马克杯',
	'马克杯',
	'马克杯',
	'马克杯',
	'马克杯',
	'马克杯',
	'笔记本',
	'笔记本',
	'笔记本',
]


//放入AD钙奶
for(let i=0;i<191;i++){
	arr.push('哇哈哈AD钙奶')
}


let missLen =n- arr.length

let myText = document.querySelector("#myText")
let myImg = document.querySelector("#myImg")

//创建50个盒子，把奖品放入盒子
for(let i=0; i<missLen ;i++ ){
	arr.push('未中奖')
}

console.log(arr)

//显示所有抽奖盒子在页面
let 文本 =''
arr = shuffle(arr) //打乱数组
for(let i = 0 ;i<arr.length ;i++ ){
	let one = arr[i]
	let div = '<div class="giftBox"></div>'
	if(one!='未中奖'){	//中奖了
		div = `<div class="giftBox gift" data-a="${one}"></div>`
	}
	
	文本+= div
}
A.innerHTML = 文本


//交互 让所有的div可以被点击
let divArr =  document.querySelectorAll('#A div')
for(let div of divArr){
	div.onclick = function(){
		this.onclick = null
		let 样式 = this.classList
		样式.remove("giftBox")
		if(样式.contains("gift")){	//具有class="gift"	中奖了
			
			let a = this.dataset.a
			switch(a){
				case '哇哈哈AD钙奶':
					m6.play()
					break;
				default:
					m7.play()
					break;
			}
			
			样式.add('open_pick')
			
			//显示出来
			myImg.src = `img/${a}.jpg`;
			myText.innerHTML = `${a} + 掘金 15天会员`;
			
			blackDiv.style.display="block"
			show.style.visibility = 'visible'
			
		}else{
			let n = parseInt(Math.random()*2) 
			if(n==0){
				m1.play()
			}else{
				m2.play()
			}
			
			myImg.src = `img/pon.png`;
			myText.innerHTML = ` ProcessOn 15天会员`;
			
			blackDiv.style.display="block"
			show.style.visibility = 'visible'
			样式.add("open")
		}
	}//div
}//for

let mySpan = document.querySelector("#show span")

mySpan.onclick = function(){
	if(blackDiv.style.display=='block'){
		show.style.visibility = 'hidden'
		blackDiv.style.display='none'
	}
}


//获取所有的红包
let giftBoxArr = document.querySelectorAll('.giftBox')
//定时器(自定义函数,时间)
setInterval(function(){
	
	let n  = parseInt(  Math.random() * giftBoxArr.length   )
	
	if(  document.querySelector('.move')  ){	//找到谁在运动
		document.querySelector('.move').classList.remove("move")
	}
	
	giftBoxArr[n].classList.add("move")
	
	
},1500)

最终实现点击的效果。主要思路：搭建静态页面，声明一个数组arr，存放奖品，设置总红包数量n,放入一定数量的鼓励奖，例如AD钙奶。所有 n = arr.length+ AD钙奶的数量+ 魏中奖的数量

为了增加页面的随时抖动效果，吸引红包自动晃动，设置了一个定时器。

//获取所有的红包
let giftBoxArr = document.querySelectorAll('.giftBox')
//定时器(自定义函数,时间)
setInterval(function(){
	
	let n  = parseInt(  Math.random() * giftBoxArr.length   )
	
	if(  document.querySelector('.move')  ){	//找到谁在运动
		document.querySelector('.move').classList.remove("move")
	}
	
	giftBoxArr[n].classList.add("move")
	
	
},1500)

遍历所有的红包class="giftBox"，找到运动的让其停止，为当前元素增加样式class="move" ，这样即使鼠标没有覆盖，红包也会随机发生抖动，吸引用户点击。