JavaScript之幸运抽奖

来源：互联网发布：selenium js click 编辑：程序博客网时间：2024/04/27 18:03
<!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>软帝集团 版权所有&copy; by MRTang</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>
阅读全文
0 0