一般到年底大大小小公司都有会抽奖活动,一般都是一等奖、二等奖只有一个,话不多说,直接上效果图和代码。
HTML:
<ul class="list"></ul>
<button class="start">点击开始抽奖</button>
<button class="end">结束抽奖</button>
<div></div>
CSS:
.active {
background: pink;
color: rgb(58, 244, 41);
}
.list {
list-style-type: none;
margin: 20px 0;
}
li {
background: #eee;
border: 1px solid #eee;
border-radius: 5px;
width: 200px;
margin: 10px 0;
height: 30px;
line-height: 30px;
text-align: center;
color: #333;
}
button {
width: 200px;
height: 30px;
line-height: 30px;
border-radius: 5px;
border: 1px solid #eee;
}
div {
margin-top: 30px;
}
script:
let arr = ['苹果14', '苹果电脑', '安慰奖', '500元现金', '精品礼品一份',
'100元现金红包'] // 奖励数组
let start = document.querySelector('.start') // 开始抽奖按钮
let end = document.querySelector('.end') // 结束抽奖按钮
let box = document.querySelector('.list') // ul元素
let box1 = document.querySelector('div') // div元素
let array = [] // 抽到的奖励放的数组
let random; // 随机数
let reward; // 奖励值
let timer; // 防抖函数
let flag = false; // 是否在抽奖中
// 渲染奖励品
arr.forEach(item => {
let li = document.createElement('li') // 创建li元素
li.innerText = item // 给li元素写入内容
box.appendChild(li) // 添加到ul元素中
})
// 添加高亮
function list() {
let list = document.querySelectorAll('li') // 获取所有li标签
// 遍历所有li元素,先删除高亮标签,在添加目前选中的标签添加高亮
list.forEach((item, index) => {
item.classList.remove('active')
})
list[random].classList.add('active')
}
// 添加到array奖励数组逻辑 点击结束抽奖执行
function fn() {
reward = arr[random] // 奖励
list() // 添加高亮
let isReward = array.indexOf(reward) // 查找array数组内是否包含
if (isReward == -1 || reward == '安慰奖' || reward == '精品礼品一份' ||
reward =='100元现金红包') {
array.push(reward) // 添加到array数组
} else {
return fn() // 如果存在则继续生成随机奖励
}
console.log(array);
}
// 开始抽奖按钮
start.onclick = () => {
// 判断是否正在抽奖
if (flag) return alert('正在抽奖,请先结束抽奖')
// 点击开始抽奖置为true
flag = true
// 每0.1秒刷新一次随机数并添加高亮
timer = setInterval(() => {
random = parseInt(Math.random() * arr.length)
list()
}, 10);
}
// 结束抽奖按钮
end.onclick = () => {
console.log(flag);
// 如果已经点击过开始抽奖,否则提示先点击抽奖
if (flag) {
fn() // 获取本次抽奖抽到的奖励
clearInterval(timer) // 清除定时器(开始抽奖每0.1秒刷新的定时器)
// 遍历成功奖励数组渲染页面
array.forEach(item => {
box1.innerText = '您获得的奖励有:' + array.join('、')
})
// 抽奖结束,flag置为false,表示本次抽奖结束
flag = false
} else {
alert('先点击开始抽奖')
}
}
如果有特殊要求,要设置抽奖次数。
HTML:
<p></p>
<ul class="list"></ul>
<button class="start">点击开始抽奖</button>
<button class="end">结束抽奖</button>
<div></div>
script:
let arr = ['苹果14', '苹果电脑', '安慰奖', '500元现金', '精品礼品一份',
'100元现金红包'] // 奖励数组
let start = document.querySelector('.start') // 开始抽奖按钮
let end = document.querySelector('.end') // 结束抽奖按钮
let p = document.querySelector('p') // p元素
let box = document.querySelector('.list') // ul元素
let box1 = document.querySelector('div') // div元素
let array = [] // 抽到的奖励放的数组
let random; // 随机数
let reward; // 奖励值
let timer; // 防抖函数
let flag = false; // 是否在抽奖中
let num; // 抽奖次数
num = arr.length
p.innerText = `您目前还有${num}次抽奖机会`; // 渲染p标签
// 渲染奖励品
arr.forEach(item => {
let li = document.createElement('li') // 创建li元素
li.innerText = item // 给li元素写入内容
box.appendChild(li) // 添加到ul元素中
})
// 添加高亮
function list() {
let list = document.querySelectorAll('li') // 获取所有li标签
// 遍历所有li元素,先删除高亮标签,在添加目前选中的标签添加高亮
list.forEach((item, index) => {
item.classList.remove('active')
})
list[random].classList.add('active')
}
// 添加到array奖励数组逻辑 点击结束抽奖执行
function fn() {
reward = arr[random] // 奖励
list() // 添加高亮
let isReward = array.indexOf(reward) // 查找array数组内是否包含
if (isReward == -1 || reward == '安慰奖' || reward == '精品礼品一份' ||
reward =='100元现金红包') {
array.push(reward) // 添加到array数组
} else {
return fn() // 如果存在则继续生成随机奖励
}
console.log(array);
}
// 开始抽奖按钮
start.onclick = () => {
// 判断是否正在抽奖
if (flag) return alert('正在抽奖,请先结束抽奖')
if(num > 0) return alert('没有抽奖机会了')
// 点击开始抽奖置为true
flag = true
num--
p.innerText = `您目前还有${num}次抽奖机会` // 渲染p标签
// 每0.1秒刷新一次随机数并添加高亮
timer = setInterval(() => {
random = parseInt(Math.random() * arr.length)
list()
}, 10);
}
// 结束抽奖按钮
end.onclick = () => {
if(num > 0) return alert('没有抽奖机会了')
console.log(flag);
// 如果已经点击过开始抽奖,否则提示先点击抽奖
if (flag) {
fn() // 获取本次抽奖抽到的奖励
clearInterval(timer) // 清除定时器(开始抽奖每0.1秒刷新的定时器)
// 遍历成功奖励数组渲染页面
array.forEach(item => {
box1.innerText = '您获得的奖励有:' + array.join('、')
})
// 抽奖结束,flag置为false,表示本次抽奖结束
flag = false
} else {
alert('先点击开始抽奖')
}
}