网页版抽奖&HTML+CSS+javaScript
2016-09-05 本文已影响2598人
heart丶掏空
s> 前言 对以前做的demo整理
这是一个用原生的js编写的简单的网页抽奖页面。
效果图：
Paste_Image.png
详细代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul li{
list-style: none;
}
#lis{
height: 568px;
width: 426px;
border: 10px solid #2386ff;
margin: 30px auto;
}
#lis li{
height: 140px;
width: 140px;
border: 1px solid #eee;
float: left;
opacity: 0.5;
}
.bnt{
height: 30px;
width: 200px;
color: #ccc;
margin: 20px auto;
}
.bnt input:hover{
cursor: pointer;
}
.bnt input:active{
background:#B5B5B5;
}
.bnt input{
height: 30px;
width: 200px;
border-radius: 20px;
border: none;
outline:none;
}
#lis .active{
opacity: 1;
}
</style>
</head>
<body>
<div class="bnt" id="bnt">
<input type="button" name="" id="val" value="开始抽奖" />
</div>
<ul id="lis">
<li style="background: url(img/1.png);" title="蓝牙耳机"></li>
<li style="background: url(img/2.png);" title="苹果平板"></li>
<li style="background: url(img/3.png);" title="耐克运动鞋"></li>
<li style="background: url(img/4.png);" title="谢谢参与"></li>
<li style="background: url(img/5.png);" title="手机"></li>
<li style="background: url(img/6.png);" title="阿迪达斯"></li>
<li style="background: url(img/7.png);" title="蓝牙耳机"></li>
<li style="background: url(img/8.png);" title="洋娃娃"></li>
<li style="background: url(img/9.png);" title="谢谢参与"></li>
<li style="background: url(img/10.png);" title="公仔"></li>
<li style="background: url(img/11.png);" title="mp4"></li>
<li style="background: url(img/12.png);" title="诺基亚"></li>
</ul>
<script type="text/javascript">
var oul = document.getElementById('lis')
var ali = oul.getElementsByTagName('li');
var bnt = document.getElementById('bnt');
var va = document.getElementById('val')
var num=0;
var timer=null;//存放定时器的容器
var nam=0;
var arr=['蓝牙耳机','苹果平板','耐克运动鞋','谢谢参与','手机','阿迪达斯','蓝牙耳机','洋娃娃','谢谢参与',
'公仔','mp4','诺基亚',];
var count=0;//定义抽奖次数
//设置定时器 setInterval(干什么事情,时间)每隔100时间做这个事情
bnt.onclick=function(){
clearInterval(timer);
start();
}
function start(){
timer=setInterval(function(){
for(var i=0;i<ali.length;i++){
ali[i].className='';
ali[i].test=arr[i];
}
num = Math.floor(Math.random()*12);//获取0-1之间中的随机数 在乘12 然后去掉小数
ali[num].className='active';
nam+=10;
if(nam>=900){//抽奖的时间限制，当nam自增到900就停止
clearInterval(timer);//清除定时器
alert("恭喜你获得："+ali[num].test);
if(count>0){
va.value="再来一次";
}
}
},100)
nam=0;
count++;
}
</script>
</body>
</html>
下面是素材：
1.png
2.png
3.png
4.png
5.png
6.png
7.png
8.png
9.png
10.png
11.png
12.png
