JavaScript模仿CF王者轮回
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>ceshi12</title>
<style>
* {
margin: 0;
padding: 0;
}
#yuan {
margin: 0 auto;
position: relative;
}
#yuan div {
/*background-color: red;*/
width: 24.5%;
height: 23%;
display: inline-block;
}
#dian {
position: absolute;
top: 25%;
left: 25%;
}
#t5 {
position: absolute;
top: 25%;
right: 0;
background: url('../../../../images/2/5.jpg') center;
}
#t6 {
position: absolute;
top: 50%;
right: 0;
background: url('../../../../images/2/6.jpg') center;
}
#t7 {
position: absolute;
bottom: 0;
right: 0;
background: url('../../../../images/2/7.jpg') center;
}
#t8 {
position: absolute;
bottom: 0;
right: 25%;
background: url('../../../../images/2/8.jpg')center ;
}
#t9 {
position: absolute;
bottom: 0;
right: 50%;
background: url('../../../../images/2/9.jpg')center;
}
#t10 {
position: absolute;
bottom: 0;
right: 75%;
background: url('../../../../images/2/10.jpg')center;
}
#t11 {
position: absolute;
top: 50%;
left: 0;
background: url('../../../../images/2/11.jpg')center;
}
#t12 {
position: absolute;
top: 25%;
left: 0;
background: url('../../../../images/2/12.jpg')center;
}
#t1 {
background: url('../../../../images/2/13.jpg')center;
}
#t2 {
background: url('../../../../images/2/2.jpg')center;
}
#t3 {
background: url('../../../../images/2/3.jpg')center;
}
#t4 {
position: absolute;
top: 0;
right: 0;
background: url('../../../../images/2/41.png')center;
}
#anni{
width:60%;
height:20%;
position: absolute;
top: 60%;
left: 20%;
background-color:#ba190f;
}
.active {
background-image: url('../../../../images/2/tu.jpg')!important;
}
.actives{
background-color: yellow !important;
}
</style>
</head>
<body>
<div id="yuan">
<div id="t1">
</div>
<div id="t2">
</div>
<div id="t3">
</div>
<div id="t4">
</div>
<div id="t5">
</div>
<div id="t6">
</div>
<div id="t7">
</div>
<div id="t8">
</div>
<div id="t9">
</div>
<div id="t10">
</div>
<div id="t11">
</div>
<div id="t12">
</div>
<div id="dian">
<button id="anni" class="btn btn-lg" type="button"onclick="anim()">点击抽奖</button>
</div>
</div>
<script>
window.onload = function () {
tiao();
}
function tiao() {//调样式
var width = window.innerWidth;
var height = window.innerHeight;
var body = document.getElementsByTagName('body')[0];
body.style.width = width + 'px';
body.style.height = height + 'px';
var yuan = document.getElementById('yuan');
yuan.style.width = parseInt(width * 0.8) + 'px';
yuan.style.height = parseInt(height * 0.8) + 'px';
yuan.style.backgroundColor = '#0e0905';
var dian = document.getElementById('dian');
dian.style.width = parseInt(yuan.offsetWidth * 0.5) + 'px';
dian.style.height = parseInt(yuan.offsetHeight * 0.5) + 'px';
dian.style.backgroundColor = '#0e0905';
var Kwidth = screen.availWidth;
yuan.style.zoom = width / Kwidth;
}
window.onresize = tiao;//屏幕改变事件
var i = 1;//记录屏数
var ji;//间隔性定时器
var kai = false;//开关
var shu = 0;//随机数
var award = ["王者之影", "M4A1-雷神", "AK47-火麒麟", "巴雷特-苍龙", "斯泰尔-潜龙", "屠龙", "AK47-无影", "汤姆逊-烈龙", "斩神刀", "王者之啸", "王者之魄", "王者之魂"];//奖励
function anim() {
shu = parseInt(Math.random() * 38);
if (shu<=12) {
shu += 24;
}
if (kai == false) {
kai = true;
var yuan = document.getElementById('yuan').getElementsByTagName('div');
ji = setInterval(function () {
if (shu == 0) {
console.log(i)
clearInterval(ji);
shi();
} else {
for (var j = 1; j < yuan.length; j++) {//清除上一个选中
if (document.getElementById("t" + j + "").className == "active") {
document.getElementById("t" + j + "").className = "";
break;
}
}
if (i == 13) {
i = 1;
} else {
document.getElementById("t" + i + "").className = "active";//选中
i++;
}
shu--;
}
}, 100)
}
}
function shi() {
for (var j = 1; j <= 12; j++) {
if (document.getElementById("t" + j + "").className == "active") {
document.getElementById("t" + j + "").className = "";
break;
}
}
document.getElementById("t" + i + "").className = "active"; //选中
setTimeout(function () {
console.log(award)
alert("恭喜你，获得" + award[i-1] + "");//输出
kai = false;
i = 1;//回到第一屏
document.getElementById("t" + i + "").className = 'actives';
}, 500)
}
</script>
</body>
</html>
效果图：