版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/MrwanZH/article/details/77152307
简易抽奖网页需要完成以下几个功能：
* 1.简单的网页界面设计
* 2.回车开始抽取再次回车暂停
* 3.三次抽取后结束
* 4.ESC键重新抽取
界面设计部分不赘述
实现思想（JavaScripts部分）：
1. 设计一个数组存放被抽取人员的名字，每抽取一次就从数组中remove掉这个人。三次后结束
2. 设置全局按键监听document.onkeydown，然后利用switch给定参数e.keyCode来区分当前按的回车还是ESC。
3. 设置一个boolean型全局变量isBegin ，给定初值false，来判定当前是否处于滚动状态。为false表示此次操作为停止滚动获得幸运儿，为true则为开始滚动。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
body{
background-color: #3F51B5;
}
.aside-left {
position: absolute;
left: 0;
padding: 10px;
}
ol {
margin-left: 20px;
}
ol li {
padding: 10px 10px;
font: italic 12pt "myfont";
}
h2 {
text-align: center;
}
.aside-right {
float: right;
margin-right: 30px;
}
.container {
position: absolute;
left: 50%;
margin-left: -512px;
width: 1024px;
height: 614px;
background: url(img/bg.jpg) no-repeat;
}
.title {
position: absolute;
left: 0;
right: 0;
top: 2em;
font: bold 3em "楷体";
text-align: center;
}
@font-face {
font-family: "myfont";
src: url('font/FZLTXHJW.TTF');
}
#show-box {
position: absolute;
left: 0;
right: 0;
top: 50%;
font: bold 3em "myfont";
text-align: center;
}
footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center;
font: italic 12pt "myfont";
}
.tip{
display: inline-block;
animation: sc 5s infinite linear;
}
/*自定义动画*/
@-webkit-keyframes sc{
0%{
transform: scale(1.0);
}
50%{
transform: scale(1.5);
}
100%{
transform: scale(1.0);
}
}
</style>
</head>
<body>
<div class="aside-left">
<h2>操作说明</h2>
<ol>
<li>回车开始抽取</li>
<li>再次回车暂停</li>
<li>3次抽取后结束</li>
<li>ESC键重新抽取</li>
</ol>
</div>
<div class="container">
<div class="title">
辩论赛观众名额抽取
</div>
<div id="show-box">
<span class="tip">Enter键开始</span>
</div>
</div>
<div class="aside-right">
<h2>抽中名单</h2>
<ol id="list">
</ol>
</div>
<!--背景音乐 -->
<audio src="source/bgm.mp3" autoplay id="bgm" loop="-1"></audio>
<script>
//数据
var names = ['郭山彤','梁敦厦','霍负浪','虞信品','马仁毅','冯州龙',
'简务帅','黎丙赣','谢尉争','赵单羽','孟航沛','龚开梦',
'黄蓝风','易堃登','蔡农仲','高洪泉','巫家昱','赵道霄',
'章学共','乐武亮','费宜鸿','张津广','梁胤鸣','吕 聪',
'蒋进如','林豪谱','孙剑佛','魏成贯','卫耿羿','谢协湃',
'岑刚飘','吴资龙','陈仓翼','刘枝迟','尤帅齐','孙彩武',
'陈莉汐','程欢亭','邬肖任','尤政航','颜东鑫','欧有皆',
'高季晨','孙奎汝','龚韶釜','费汐家','钱铮友','沈锵良','傅 利','雷友水'
];
var intavlflag; //标记
var isBegin = false; //是否正在滚动 默认未开始状态
var lucker; //记录当前幸运儿
var luckers = []; //存储所有幸运儿
//全局按键事件
document.onkeydown = function(e) {
//获取事件对象中的按键码 13：enter 27：esc
switch(e.keyCode) {
case 13:
//抽取相关
extract();
break;
case 27:
//将已被抽取的名单合并到源数组中(归还名额)
names = names.concat(luckers);
console.info('还原数组:' + names);
luckers = []; //清空数组
//清除列表内幸运儿名单
$('list').innerHTML = '';
break;
}
}
//抽取准备
function extract() {
if(isBegin) {
//停止
clearInterval(intavlflag);
//将幸运儿加入数组
luckers.push(lucker);
//动态创建节点
var li = document.createElement('li');
li.innerHTML = lucker;
//将节点加入ol元素中
$('list').appendChild(li);
//从源数组移除被抽中的幸运儿
removeName(names, lucker);
//改变音效
$('bgm').src = 'source/cheer.mp3';
//增加样式(动画)
$('show-box').className='tip';
//标记滚动状态为停止
isBegin = false;
} else {
//开始
//先判断数组中人数是否已达到3人
if(luckers.length < 3) {
//启动抽取每隔0.05秒刷新界面内容
intavlflag = setInterval(begin, 50);
$('bgm').src = 'source/bgm.mp3';
//去除样式（停止动画）
$('show-box').className='';
//将标志位设置为已启动
isBegin = true;
} else {
alert('人数已满!');
}
}
}
//从源数组中移除被抽中的幸运儿
function removeName(arr, name) {
for(var i = 0; i < arr.length; i++) {
if(arr[i] == name) {
arr.splice(i, 1);
console.info('移除：' + name + '--剩余：' + arr);
break;
}
}
}
//开始抽取，随机获取下标
function begin() {
var index = Math.floor(Math.random() * names.length);
lucker = names[index];
$('show-box').innerHTML = lucker;
}
function $(id) {
return document.getElementById(id);
}
</script>
</body>
</html>