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

下载： https://download.csdn.net/download/weixin_44893902/20366745
效果：

代码：

<!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;

}

h1 {

	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 = 0;

 initForm();

 // 初始化表单

 function initForm() {

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

     var selectedNameHeight = orgArrCount / 3 * 40 + 120;

     $("#selectedName").css("height", selectedNameHeight + "px");

     // 动态创建图层

     dynamicCreateBox();

 }

 // 动态创建层

 function dynamicCreateBox() {

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

     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>