<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
.box {
width: 492px;
height: 4px;
border-radius: 10px;
margin: 50px auto;
}
li {
float: left;
width: 160px;
height: 160px;
box-sizing: border-box;
border-radius: 10px;
border: 1px solid #000;
margin-left: 4px;
margin-top: 4px;
font-size: 40px;
padding: 20px;
text-align: center;
line-height: 60px;
box-shadow: 4px 4px 8px 0px #ccc inset,-4px -4px 8px 0px #ccc inset;
}
#btn {
cursor: pointer;
background-color: gold;
color:#fff;
}
.msg {
width: 400px;
height:100px;
border: 10px solid gold;
position: fixed;
cursor: pointer;
top: 50%;
left: 50%;
margin-top: -55px;
margin-left: -205px;
background-color: #fff;
font-size: 88px;
text-align: center;
line-height: 100px;
color: gold;
text-shadow: 0 0 10px #f00;
animation: txt 1s linear infinite;
}
@keyframes txt{
0%,100%{
text-shadow: 0px 0px 4px #f00;
}
50% {
text-shadow: 0px 0px 12px #f0f;
}
}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="item">一等奖</li>
<li class="item">二等奖</li>
<li class="item">三等奖</li>
<li class="item">四等奖</li>
<li id="btn">开始抽奖</li>
<li class="item">五等奖</li>
<li class="item">六等奖</li>
<li class="item">七等奖</li>
<li class="item">谢谢惠顾</li>
</ul>
</div>
<div class="msg">特等奖</div>
</body>
</html>
<script>
/* 需求模板:当__中奖提示框__被__点击__时,效果是__中奖提示框要隐藏__ */
var msg = document.querySelectorAll('.msg')[0];
// 当__中奖提示框__被__点击__时
msg.onclick = function () {
console.log(msg === this);
// 中奖提示框要隐藏
this.style.display = 'none';
};
/* 需求模板:当__开始抽奖__被__点击__时,效果是__抽奖效果__ */
// 1.0 查找元素
var btn = document.getElementById('btn');
// 我们要控制 item 的样式,让他变色,所以要提前查找 item
var items = document.querySelectorAll('.item');
console.log( items );
// 结合图解得到的顺序
var itemsNew = [items[0],items[1],items[2],items[4],items[7],items[6],items[5],items[3]];
console.log(itemsNew);
// 3.0.1 创建一个变量,用于记录当前要控制的 item 列表的索引值
var current = -1;
function choujiang() {
// 7.0.1 防止用户重复快速点击,点击事件触发的时候,把事件暂时移除
btn.onclick = null;
// 6.0 每次点击,应该要生成随机次数
// 6.0.1 创建一个变量,用于记录抽奖运行的次数
var cishu = 10 + parseInt(Math.random() * 20);
// 3.0 item 的颜色并不是一瞬间,而是某个时间间隔颜色换一次,所以启动间隔定时器
var timerName = setInterval(function () {
// 3.0.2 用于记录列表索引的数据累加
current++;
// 3.0.3 current 需要约束取值范围 0 ~ items.length - 1
// 如果 current 超出索引值范围,重设为 0
if( current > itemsNew.length - 1 ){
current = 0;
}
console.log( current ); // 控制台打印输出数据,取值范围 0 ~ 7
// 4.0 填充颜色前要排他,清除所有的颜色
// 5.0 itemsNew 在上面重新排列节点顺序
for(var i=0; i< itemsNew.length; i++ ){
// 4.0.1 循环遍历内部
itemsNew[i].style.backgroundColor = '';
}
// 4.0.2 选中第几个填充颜色
// 5.0.2 设置 itemsNew 数组节点的样式
itemsNew[current].style.backgroundColor = '#ff9d1b';
// 6.0.2 每次运动,次数就应该要减少1
cishu--;
// 6.0.3 如果次数为0,抽奖要结束了
if(cishu==0){
// 6.0.4 清除定时器,抽奖结束
clearInterval(timerName);
// 6.0.5 把抽到奖励的文字,替换到 msg 中奖提示框中
msg.innerText = itemsNew[current].innerText;
// 6.0.6 显示提示框
msg.style.display = 'block';
// 7.0.2 抽奖结束后,重新注册事件
btn.onclick = choujiang;
}
},100);
}
// 2.0 给点击按钮绑定事件
// 7.0 把抽奖函数封装起来
btn.onclick = choujiang;
</script>
原生js做抽奖效果
最新推荐文章于 2024-07-31 13:55:09 发布