<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<style>
.bg{
position: absolute;
left 0;
right: 0;
top: 0;
bottom: 0;
min-height: 640px;
width: 100%;
background-color: #FFCE43;
text-align: center;
}
.imgsize{
position: absolute;
left: 50%;
margin-left: -512px;
background-image: url('/homework/img/bg.jpg');
min-height: 600px;
min-width: 1024px;
}
.explain-left{
width: 165px;
height: 640px;
float: left;
}
.explain-right{
width: 165px;
height: 640px;
float: right;
}
.footsize{
clear: both;
height: 20px;
background-color: #FFCE43;
font-size: 1.1em;
font-style: italic;
}
li{
display: inline-block;
width: 100%;
height: 100%;
color:#000;
text-decoration: none;
text-align: center;
line-height:40px;
font-family: "微软雅黑";
font-size: 1.1em;
}
span{
display: inline-block;
width: 100%;
height: 100%;
color:#000;
text-decoration: none;
text-align: center;
line-height:40px;
font-family: "微软雅黑";
font-size: 1.6em;
margin-top: 10%;
}
#code-box{
margin-top: 60px;
display: inline-block;
padding:0.5em 1em;
color:#fff;
letter-spacing: 4px;
font-size: 1.2em;
/*禁止用户选择*/
-webkit-user-select: none;/*兼容webkit内核*/
-moz-user-select: none;/*兼容firefox浏览器*/
-ms-user-select: none;/*兼容ie*/
}
</style>
</head>
<body>
<div class="bg">
<div class="explain-left">
<ul>
<li>操作说明</li>
<li>1.回车开始抽取</li>
<li>2.再次回车暂停</li>
<li>3.3次抽取后结束</li>
<li>4.ESC键重新抽取</li>
</ul>
</div>
<div class="imgsize">
<span>辩论赛名单</span>
<div id="code-box" title="点击切换">按ENTER开始滚动</div>
</div>
<div class="explain-right">
<ul>
<li>抽取名单</li>
<li id="out1"></li>
<li id="out2"></li>
<li id="out3"></li>
</ul>
</div>
<footer class="footsize">
软帝集团版权所有©MrSun
</footer>
</div>
<script>
var names = ['万曾辉',
'付一帆',
'余子杨',
'关健',
'刘凯',
'刘孟',
'刘晓龙',
'刘聪',
'刘菊香',
'吴为',
'唐帅',
'孙一飞',
'孙维杰',
'宋鹏凯',
'尹雪枫',
'廖立文',
'张笛',
'徐超',
'戴文博',
'方煜',
'方超',
'曲胜健',
'朱文洋',
'李宏昌',
'李莹莹',
'李运',
'杨黎',
'殷逸',
'汤九',
'熊业超',
'王一品',
'王峰',
'王文康',
'瞿俊松',
'董博斯',
'董启龙',
'蒋金星',
'蔡为',
'蔡旋月',
'邓修缘',
'郭伟',
'阮汉顺',
'陈帅',
'陈铭',
'魏东',
'黄亚平',
'黄正戟',
'黄远胜',
'韩雪'
];
var name_out = new Array();
//获取指定id的元素
var box = document.getElementById('code-box');
var box1 = document.getElementById('out1');
var box2 = document.getElementById('out2');
var box3 = document.getElementById('out3');
var isrunning = true;
var a;
var i = 1;
document.οnkeydοwn=function(e){
switch(e.keyCode){
case 13:
begin();
break;
case 27:
restart();
break;
}
};
function restart(){
names = names.concat(name_out);
name_out = new Array();
box.innerHTML = '按ENTER开始滚动';
i = 1;
box1.innerHTML = '';
box2.innerHTML = '';
box3.innerHTML = '';
}
function begin(){
if(i <= 3){
if(isrunning){
a = window.setInterval(genCode,20);
isrunning = false;
}else{
var id = genCode();
var name = names[id];
inner(name, i);
name_out.push(name);
names.splice(id, 1);
console.info('所有人:' + names);
console.info('抽取的人:' + name_out);
clearInterval(a);
isrunning = true;
i++;
}
}else{
alert('抽取结束!');
console.info('所有人:' + names);
console.info('抽取的人:' + name_out);
}
}
function inner(name, i){
if(i == 1){
box1.innerHTML = name;
}
if(i == 2){
box2.innerHTML = name;
}
if(i == 3){
box3.innerHTML = name;
}
}
function genCode(){
var code = '';
var index = Math.floor(Math.random()*names.length);
code = names[index];
//将生成的验证码写入指定的位置
box.innerHTML=code;
return index;
}
</script>
</body>
</html>
该代码片段是用html,css,JavaScript编写的一个抽奖小程序。
功能:1.能够随机抽取3个名字。
2.按ENTER开始,ENTER结束,3次抽取之后即不能抽取。
3.按ESC即可重新开始抽取。
本程序的重点在于判断语句,首先得判断是否在运行抽奖,如果在运行则按ENTER的时候就得将其关闭,反之亦然。第二个判断是次数的判断,当抽取到第三次的时候就该结束抽取,再次按ENTER的时候弹出提示框。数组的内容难度不大,从原数组将抽取到的人移除并放入新数组。如果按ESC重新开始时,将这两个数组拼接即可。