h5+原生js实现九宫格跑马灯抽奖
在教别人html和js入门的时候顺手写了两个demo，她说有点无趣，我想了想写了个女孩子喜欢的九宫格跑马灯效果。虽然略显简陋但是可以玩，涉及知识点：函数和匿名函数的使用、数组和对象、js创建和删除节点、setInterval和setTimeout定时器、onclick点击事件、for和forEach循环、Math.random随机数。
上代码
<code>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>幸运大转盘</title>
</head>
<body>
<div id="big-cube"></div>
<button id="go-go">抽奖</button>
</body>
<style>
#big-cube{
width: 350px;
height: 350px;
}
.prize{
width: 100px;
height: 100px;
border: 1px solid #999;
margin: 5px;
text-align: center;
line-height: 100px;
float: left;
border-radius: 8px;
}
.noting{
border: 1px solid #bbb;
color: red;
}
#prize-title{
color: #666;
font-weight: 500;
font-size: 1.1rem;
background: #fbd4aa;
font-style: oblique;
border: none;
}
</style>
<script>
//预设奖品
// var default_my_prize = 2;
var setTime;
var cycle = [0,1,2,5,8,7,6,3];
var prizeList = [
{name:"自行车", isPrize:true},
{name:"谢谢参与", isPrize:false},
{name:"跳跳糖", isPrize:true},
{name:"谢谢参与", isPrize:false},
{name:"幸运大转盘", isPrize:false, id:"prize-title"},
{name:"谢谢参与", isPrize:false},
{name:"佩奇公仔", isPrize:true},
{name:"感谢参与", isPrize:false},
{name:"迪奥口红", isPrize:true},
];
document.getElementById('go-go').onclick = function(){
if(setTime){
return false;
}
var index = 0;
var count = 0;
var my_prize = document.getElementsByClassName('prize'); //获得所有的跑马灯奖品
for(let i=0; i<my_prize.length; i++){
my_prize[i].style.background = '';
my_prize[i].style.color = '';
}
//定时器开始
setTime = setInterval(function(){
//从第二个跑马灯开始，每走一个跑马灯就把上一个跑马灯的颜色恢复白色
if(index>0){
my_prize[cycle[index-1]].style.background = '';
my_prize[cycle[index-1]].style.color = '';
}
//跑完最后一个跑马灯又从第一个重新开始跑
// if(index > (my_prize.length-1)){
if(index > 7){
index = 0;
}
//跑到哪个跑马灯就把哪个变为红色背景
my_prize[cycle[index]].style.background = '#e6722aab';
my_prize[cycle[index]].style.color = 'white';
//当前跑的跑马灯的下标+1
index++;
//总计数器+1
count++;
//有预设奖品
if(typeof default_my_prize!='undefined'){
//至少跑35下，跑到预设的奖品就停下
if(count>40 && (index-1)==default_my_prize){
clearInterval(setTime); //清除定时器
//弹出中奖提示
if(my_prize[cycle[index-1]].className=='prize'){
setTimeout(()=>{alert('恭喜你抽中了['+my_prize[cycle[index-1]].innerHTML+']')},100);
}
setTime = undefined;
}
//中断程序运行，防止走预设奖品后的代码
return false;
}
//没有预设奖品的算法，跑15次后随机获得奖品
if(count>40 && parseInt(Math.random()*10)>8 ){
clearInterval(setTime);
//弹出奖品的时候排除掉谢谢惠顾
if(my_prize[cycle[index-1]].className=='prize'){
setTimeout(()=>{alert('恭喜你抽中了['+my_prize[cycle[index-1]].innerHTML+']')},100);
}
setTime = undefined;
}
}, 90);
}
function createPrizeItem(prizeList){
//删除所有奖品节点
document.querySelectorAll('.prize').forEach(function(e){
e.remove();
})
var prizeBox = document.getElementById('big-cube');
//循环创建奖品节点
for(let list of prizeList){
var ele = document.createElement('div');
ele.innerHTML = list.name ?? '谢谢参与';
ele.className = list.isPrize? 'prize' : 'prize noting';
if(list.id){
ele.id = list.id;
}
prizeBox.append(ele);
}
}
createPrizeItem(prizeList);
</script>
</html>
</code>
<img src="https://product.liyiru.top/uploads/55e1f4aea47acc76cb06371f93e96de0.png"/>
更多>>