简易抽奖网页需要完成以下几个功能：
* 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><footer>柴氏集团 版权所有© by MRChaiLiu</footer><!--背景音乐 --><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：escswitch(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>
