原生js抽奖
今天分享一下用原生js来写的一个抽奖的小游戏，我这个写的呢数据是用ajax获取数据，然后渲染到页面的，其实这个原理还是挺简单的，就是，主要就是运用计时器来完成的；
下面是一布局↓
<div id="wrap">
<header>
CS:游戏抽奖
</header>
<ul class="list">
</ul>
<footer>
<button class="star">开启</button>
</footer>
<div class="mark">
<h1>恭喜您获得了</h1>
<ul class="jiangPin">
</ul>
<button class="que">确认</button>
</div>
</div>
由于是渲染的数据，所以没有什么东西，嘿嘿。
#wrap{
width: 1600px;
height: 800px;
margin: 0 auto;
background: #303030;
position: relative;
}
.mark{
width: 500px;
height: 500px;
background: #303030;
position: absolute;
top: 50%;
left: 50%;
margin-top:-250px;
margin-left: -250px;
border: 1px solid #454545;
border-radius: 10px;
display: none;
}
.mark h1{
font-size: 30px;
text-align: center;
color: white;
}
.jiangPin li{
width: 180px;
position: relative;
border-radius: 5px;
border: 1px solid yellow;
margin: 0 auto;
margin-top:20px;
}
.jiangPin>li>span{
position: absolute;
right: 0;
top: 0;
color: white;
}
.jiangPin>li>p{
color: white;
text-indent: 20px;
}
.que{
width: 80px;
height: 30px;
color: white;
background: cyan;
border: 0;
outline: none;
border-radius: 5px;
margin: 0 auto;
margin-top: 50px;
display: block;
}
header{
width: 100%;
height: 80px;
background: #ffbb00;
color: white;
font-size: 25px;
text-align: center;
line-height: 80px;
}
.list{
width: 100%;
height: 550px;
background: #303030;
}
.list>li{
width: 180px;
float: left;
border: 1px solid #454545;
margin: 6px;
margin-top: 20px;
border-radius: 5px;
position: relative;
}
.list>li>span{
position: absolute;
right: 0;
top: 0;
background: red;
color: white;
}
.list>li:first-child,.list>li:nth-child(9){
margin-left:30px ;
}
.list>li p{
background: red;
color: white;
text-indent: 20px;
}
.list>li p:last-child{
border-radius: 0 0 5px 5px;
}
footer{
width: 1590px;
height: 50px;
margin: 0 auto;
color: white;
font-size: 20px;
line-height: 50px;
text-align: center;
}
.star:hover{
border: 5px solid skyblue;
border-radius:5px ;
}
.star{
width: 100%;
height: 100%;
border: 5px solid transparent;
background: #00bc8c;
color: white;
}
接下来就该主角，js登场了，主要的实现原理就是获取到抽奖的内容，我这里用的是li，需要提前声明一个变量，来当做它的下标，然后再来两个计时器，还有一个最重要的开始按钮，点击开始按钮之后开始调用计时器，里面的内容说白了就是在切换样式。在这里我们先要将所有的样式清空一遍，刚才声明的变量是一直在自增，然后我们再把我们之前声明的下标的那个奖项的内容添加样式，就基本上ok了，下面来看下代码吧
ajax({
"method":"get",
"url":"js/data.json",
"success":function(datas){
var data = datas.dataInfo
var list = document.getElementsByClassName('list')[0];
var str = '';
//数据渲染
data.forEach(function(v){
str+=`<li>
<img src="${v.imgUrl}"/>
<span style="background:${v.color};">${v.zt}</span>
<p style="background:${v.color};">${v.tit}</p>
<p style="background:${v.color};">${v.tit1}</p>
</li>`;
})
list.innerHTML = str;
//获取页面元素
var liList = list.getElementsByTagName('li');
var btn = document.getElementsByClassName('star')[0]
//提前声明一个下标，和两个接收计时器的变量
var count = 0;
var timer = null;
var timer1 = null;
//点击事件
btn.addEventListener('click',function(){
liList[count].style.borderColor='yellow';
//点击之后禁用
btn.disabled = 'true';
//调用定时器
timer = setInterval(auto,100);
//5秒之后缓慢清空第一次定时器
setTimeout(function(){
clearInterval(timer);
//然后再次调用,速度变慢
timer1 = setInterval(auto,500)
},5000)
//10秒后调用停止函数
setTimeout(stop,10000);
})
// 样式切换函数
function auto(){
//每次判断一下是否小于数据长度，不符合条件之后归零从头再来
if(count < liList.length-1){
count++;
}else{
count = 0;
}
//清空所有样式
for (var i = 0 ; i < liList.length ; i++) {
liList[i].style.borderColor='';
}
//给指定的那一项添加样式
liList[count].style.borderColor='yellow';
}
//获取页面元素
var mark = document.getElementsByClassName('mark')[0];
var jp = document.getElementsByClassName('jiangPin')[0];
var que = document.getElementsByClassName('que')[0];
//停止函数
function stop(){
clearInterval(timer1);//清空定时器
//改变状态
btn.disabled = ''
var str = '';
//渲染抽中的数据
for (var i = count ; i < count+1 ; i++) {
str+=`<li>
<img src="${data[i].imgUrl}"/>
<span style="background:${data[i].color};">${data[i].zt}</span>
<p style="background:${data[i].color};">${data[i].tit}</p>
<p style="background:${data[i].color};">${data[i].tit1}</p>
</li>`;
}
jp.innerHTML = str;
//显示遮罩层
mark.style.display='block';
//点击确认隐藏遮罩层
que.onclick = function(){
mark.style.display='none';
}
}
}
});
把json数据也分享一下吧，不过图片要辛苦大家自己找了！！
{
"id":0,
"status":200,
"code":"ok",
"statusTXT":"请求成功",
"dataInfo":[{
"tit":"M4A1-S",
"tit1":"机械工业",
"imgUrl":"img/M4A1_S.png",
"zt":"隐秘",
"color":"#eb4b4b"
},{
"tit":"Glock_18",
"tit1":"荒野反叛",
"imgUrl":"img/Glock_18.png",
"zt":"隐秘",
"color":"#eb4b4b"
},{
"tit":"SCAR_20",
"tit1":"血腥运动",
"imgUrl":"img/SCAR_20.png",
"zt":"保密",
"color":"#d32ce6"
},{
"tit":"P2000",
"tit1":"至尊威龙",
"imgUrl":"img/P2000.png",
"zt":"保密",
"color":"#d32ce6"
},{
"tit":"M4A4",
"tit1":"死寂空间",
"imgUrl":"img/M4A4.png",
"zt":"保密",
"color":"#d32ce6"
},{
"tit":"Sawed_Off",
"tit1":"聚光灯",
"imgUrl":"img/Sawed_Off.png",
"zt":"受限",
"color":"#8847ff"
},{
"tit":"R8_Revolver",
"tit1":"重新启动",
"imgUrl":"img/R8_Revolver.png",
"zt":"受限",
"color":"#8847ff"
},{
"tit":"P90",
"tit1":"夺命器",
"imgUrl":"img/P90.png",
"zt":"受限",
"color":"#8847ff"
},{
"tit":"AWP",
"tit1":"火龙一",
"imgUrl":"img/AWP.png",
"zt":"受限",
"color":"#8847ff"
},{
"tit":"AUG",
"tit1":"贵族",
"imgUrl":"img/AUG.png",
"zt":"受限",
"color":"#8847ff"
},{
"tit":"Tec_9",
"tit1":"冰冠",
"imgUrl":"img/Tec_9.png",
"zt":"军舰",
"color":"#4b69ff"
},{
"tit":"SG_553",
"tit1":"轻空",
"imgUrl":"img/SG_553.png",
"zt":"军舰",
"color":"#4b69ff"
},{
"tit":"PP_Bizon",
"tit1":"收割机",
"imgUrl":"img/PP_Bizon.png",
"zt":"军舰",
"color":"#4b69ff"
},{
"tit":"NOVA",
"tit1":"Exo",
"imgUrl":"img/NOVA.png",
"zt":"军舰",
"color":"#4b69ff"
},{
"tit":"MAC_10",
"tit1":"捕猎者",
"imgUrl":"img/MAC_10.png",
"zt":"军舰",
"color":"#4b69ff"
},{
"tit":"Five_Seven",
"tit1":"霸意大名",
"imgUrl":"img/Five_Seven.png",
"zt":"军舰",
"color":"#4b69ff"
}]
}
写的不好的地方希望大佬们指正！！
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
