一个简单王者荣耀抽奖功能的实现。
html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>王者荣耀</title>
<link rel="stylesheet" href="css/demo.css">
<script src="js/demo.js"></script>
</head>
<body class="back">
<div class="detail">
<div class="one">
<img id="1" class="act active" src="img/01.jpg" alt="">
<img id="2" class="act" src="img/02.jpg" alt="">
<img id="3" class="act" src="img/03.jpg" alt="">
<img id="4" class="act" src="img/04.jpg" alt="">
<img id="5" class="act" src="img/05.jpg" alt="">
</div>
<div class="one">
<img id="14" class="act" src="img/14.jpg" alt="">
<img id="6" class="act" src="img/06.jpg" alt="">
</div>
<div class="one">
<img id="13" class="act" src="img/13.jpg" alt="">
<img id="7" class="act" src="img/07.jpg" alt="">
</div>
<div class="one">
<img id="12" class="act" src="img/12.jpg" alt="">
<img id="11" class="act" src="img/11.jpg" alt="">
<img id="10" class="act" src="img/10.jpg" alt="">
<img id="9" class="act" src="img/09.jpg" alt="">
<img id="8" class="act" src="img/08.jpg" alt="">
</div>
<button class="btn" onclick="go()">
点击抽奖
</button>
</div>
</body>
</html>
css部份
body, div {
padding: 0;
margin: 0;
}
.back {
background: url('../img/bg.jpg') no-repeat;
background-size: 100%;
}
.detail{
width: 1000px;
height: 550px;
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
top: 200px;
left: 50%;
transform: translateX(-50%);
}
.detail .one{
display: flex;
justify-content: space-between;
}
.detail img{
opacity: 0.6;
}
.detail .active{
opacity: 1;
}
.detail .btn{
width: 200px;
height: 68px;
background: url('../img/btn_bg.jpg') no-repeat;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
color:#fff;
text-align: center;
font-size: 20px;
line-height: 68px;
border-radius: 1px;
border: none;
outline: none;
}
js部份
var i = 1;
var l = 100;
function go () {
var inter = parseInt(Math.random()*14+1)+14;
var num = setInterval(() => {
inter--;
if (inter==0){
clearInterval(num);
}
var items = document.getElementsByClassName("act");
for (var item of items){
item.classList.remove("active");
}
var ele = document.getElementById(i);
ele.classList.add("active");
i++;
if (i>14){
i=1;
}
},l);
}