html+抽奖游戏,网页版抽奖&HTML+CSS+javaScript

s> 前言 对以前做的demo整理

这是一个用原生的js编写的简单的网页抽奖页面。

效果图：

Paste_Image.png

详细代码：

*{

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;

}

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.οnclick=function(){

clearInterval(timer);

start();

}

function start(){

timer=setInterval(function(){

for(var i=0;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++;

}

下面是素材：

1.png

2.png

3.png

4.png

5.png

6.png

7.png

8.png

9.png

10.png

11.png

12.png