简易抽奖网页

来源:转载

简易抽奖网页需要完成以下几个功能:
        * 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> 软帝集团 版权所有&copy; by MRChai </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: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> 


分享给朋友:
您可能感兴趣的文章:
随机阅读: