html简单随机抽奖页面（在线抽奖、随机选取、自动挑选）

 !doctype html 

 html 

 head 

 meta charset utf-8 

 title 在线抽奖 随机选取 自动挑选 /title 

 script src https://libs.baidu.com/jquery/1.10.2/jquery.min.js /script 

 style 

body {

 background-color:aliceblue;

.wrapDiv {

 width:80%;

 max-width:1200px;

 margin:0 auto;

 text-align:center;

 position:absolute;

 top:80px;

 left:0;

 right:0;

.leftBox {

 float:left;

 width:800px;

 height:240px;

 /*background-color:aqua;

 margin:0 auto;

 margin-top:0px;

 clear:both;

#span {

 float:right;

 top:30px;

 right:185px;

#btn {

 float:left;

 width:100px;

 height:30px;

 margin-left:10px;

 margin-top:150px;

.nameBox {

 width:100px;

 height:30px;

 float:left;

 background-color:antiquewhite;

 margin-left:10px;

 margin-top:10px;

 text-align:center;

 line-height:30px;

.selectedName {

 float:right;

 width:340px;

 background:#666;

 margin-top:10px;

 margin-left:30px;

 background:#ffffff;

 overflow:hidden;

 text-align:center;

 /style 

 /head 

 body 

 h1 随机抽奖系统 /h1 

 span id span /span 

 div class wrapDiv 

 div id leftBox class leftBox /div 

 div id selectedName class selectedName 

 h1 中奖者名单 /h1 

 /div 

 input type button id btn value 开始走起 

 /div 

 script 

 // 模拟后台数据

 var arr [ 01 , 02 , 03 , 04 , 05 , 06 , 07 , 08 , 09 , 10 ,

 11 , 12 , 13 , 14 , 15 , 16 , 17 , 18 , 19 , 20 , 21 ,

 22 , 22 , 23 , 24 , 25 , 26 , 27 , 28 , 29 , 30 ,

 var orgArrCount arr.length;

 var currentSelectNum 

 initForm();

 // 初始化表单

 function initForm() {

 // 动态设置选择人的高度

 var selectedNameHeight orgArrCount / 3 * 40 120;

 $( #selectedName ).css( height , selectedNameHeight px 

 // 动态创建图层

 dynamicCreateBox();

 // 动态创建层

 function dynamicCreateBox() {

 for (var i i arr.length; i ) {

 var div document.createElement( div 

 div.innerText arr[i];

 div.className nameBox 

 $( #leftBox ).append(div);

 // 清空小方格颜色

 function clearBoxColor() {

 $( #leftBox ).children( div ).each(function() {

 $(this).css( background-color , 

 // 设置选中小方格颜色

 function setBoxColor() {

 $( #leftBox ).children( div ).each(function() {

 var thisText ($(this).text());

 var selectedName arr[currentSelectNum];

 if (thisText selectedName) {

 $(this).css( background-color , red 

 function appendSelectedName() {

 var div document.createElement( div 

 div.innerText arr[currentSelectNum];

 div.className nameBox 

 $( #selectedName ).append(div);

 $( #btn ).click(function() {

 var curentCount arr.length;

 if (curentCount 1) {

 alert( 没有可选人了 

 // 清空所有层的颜色

 clearBoxColor();

 return;

 // 监视按钮的状态

 if (this.value 开始走起 ) {

 // 定时针

 timeId setInterval(function() {

 // 清空所有层的颜色

 clearBoxColor();

 //随机生成一个数

 var num Math.floor(Math.random() * curentCount);

 currentSelectNum num;

 // 设置选中小方格颜色

 setBoxColor();

 }, 10);

 this.value 停止 

 } else {

 // 清除计时器

 clearInterval(timeId);

 // 添加选中人

 appendSelectedName();

 // 移除

 arr.splice(currentSelectNum, 1);

 this.value 开始走起 

 // 获取时间的函数

 getTime();

 setInterval(getTime, 10)

 function getTime() {

 var day new Date();

 var year day.getFullYear(); //年

 var month day.getMonth() //月

 var dat day.getDate(); //日

 var hour day.getHours(); //小时

 var minitue day.getMinutes(); //分钟

 var second day.getSeconds(); //秒

 month month 10 ? 0 month : month;

 dat dat 10 ? 0 dat : dat;

 hour hour 10 ? 0 hour : hour;

 minitue minitue 10 ? 0 minitue : minitue;

 second second 10 ? 0 second : second;

 $( #span ).innerText year - month - dat hour : minitue : second

 /script 

 /body 

 /html