s> 前言 對以前做的demo整理
這是一個用原生的js編寫的簡單的網(wǎng)頁抽獎頁面星澳。
效果圖：
Paste_Image.png
詳細(xì)代碼：
<!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="藍(lán)牙耳機(jī)"></li>
<li style="background: url(img/2.png);" title="蘋果平板"></li>
<li style="background: url(img/3.png);" title="耐克運(yùn)動鞋"></li>
<li style="background: url(img/4.png);" title="謝謝參與"></li>
<li style="background: url(img/5.png);" title="手機(jī)"></li>
<li style="background: url(img/6.png);" title="阿迪達(dá)斯"></li>
<li style="background: url(img/7.png);" title="藍(lán)牙耳機(jī)"></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=['藍(lán)牙耳機(jī)','蘋果平板','耐克運(yùn)動鞋','謝謝參與','手機(jī)','阿迪達(dá)斯','藍(lán)牙耳機(jī)','洋娃娃','謝謝參與',
'公仔','mp4','諾基亞',];
var count=0;//定義抽獎次數(shù)
//設(shè)置定時器 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之間中的隨機(jī)數(shù) 在乘12 然后去掉小數(shù)
ali[num].className='active';
nam+=10;
if(nam>=900){//抽獎的時間限制派近，當(dāng)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
