wuliupo/lottery.html

## lottery.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312"/>
<title>抽奖活动</title>
<style type="text/css">
body {padding-top:100px;font:12px "\5B8B\4F53",sans-serif;text-align:center;}
.result_box {margin:0 auto;width:700px;padding:100px 0;text-align:center;border:3px solid #40AA53;background:#efe;}
.result_box #oknum {width:680px;color:#cc0000;font-size:50pt;font-family:Verdana;text-align:center;border:none;background:#efe;}
.button_box {margin-top:50px;}
.button_box .btn {cursor:pointer;padding:5px 30px;margin:0 10px;color:#555;font-family:"\5B8B\4F53",sans-serif;font-size:40px;}
.more_box {margin:30px auto; width:700px; overflow:hidden; text-align:left; font-size:16px;}
.more_form {position: relative; clear: both;}
.more_form input, .more_form button {font-size:14px;}
.more_form input {width:634px; height:30px; padding:1px 55px 1px 5px; }
.more_form button {position: absolute; right:0; height:36px; }
.more_box span.luck_select {font-size: 14px; float:right; margin:0}
.name_list {overflow: hidden; padding:10px; clear:both; border: 1px solid #40AA53;}
.name_list span, .luck_select{display: inline-block; padding: 2px 6px; white-space: nowrap; background: #88B9F3; color: #FFF; float: left; height: 20px; line-height: 20px; margin: 0 7px 7px 0;-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; cursor: pointer;}
.name_list span:hover{background: #8899F3;}
.name_list span.select, .luck_select{background: #FF00CB;}
</style>
</head>
<body>
<div class="result_box"><input type="text" id="oknum" name="oknum" readonly="readonly" placeholder="抽奖结果" /></div>
<div class="button_box"><button class="btn" onclick="start()" accesskey="s">开始(<U>S</U>)</button><button class="btn" onclick="ok()" accesskey="o">停止(<U>O</U>)</button></div>
<div class="more_box">
    <b>参与抽奖人（双击删除）</b>
    <span class="luck_select">表示已中奖</span>
    <div class="name_list" id="name_list">没有人参与抽奖</div>
</div>
<div class="more_box">
    添加备选人（多个用逗号隔开）：
    <div class="more_form"><input id="more_input" value="013陈十三,010林十,008潘八,003邓三,014王十四,005欧五,004罗四" /><button onclick="addData()">添加</button></div>
</div>

<script type="text/javascript">
var allData = {};
function addData(){
    var input = document.getElementById("more_input");
    var data = input.value;
    input.value = '';
    if(!data){alert('请输入备选人（多个用逗号隔开）'); return;}
    data = data.replace("，",",").replace(",,",",").split(",");
    var d, i, s='';
    for (i=0;i<data.length;i++){
        d = data[i].replace(/(^\s*)|(\s*$)/g, '');
        if(d && !allData[d]) {
            allData[d]=-1;
            s+='<span ondblclick="removeData(this)" title="双击删除">' + d + '</span>';
        }
    }
    var name_list = document.getElementById("name_list");
    if(name_list.getElementsByTagName('span').length<1)name_list.innerHTML='';
    name_list.innerHTML+=s;
    timer && start();
}
function removeData(obj){
    delete allData[obj.innerHTML];
    obj.parentNode.removeChild(obj);
}
var timer;
var dataarr = [];
function change(){
    document.getElementById("oknum").value = dataarr[GetRnd(0,dataarr.length-1)];
}
function clear(){
    clearInterval(timer);
    timer='';
    document.getElementById("oknum").value='';
}
function start(){
    clear();
    dataarr = [];
    for(var d in allData) {
        if(allData[d]===-1) dataarr.push(d);
    }
    if(dataarr.length<1){
        alert('没有备选人啦');
        return;
    }
    timer = setInterval('change()',46);
}
function ok(){
    clearInterval(timer);
    timer='';
    var lucky=document.getElementById("oknum").value;
    if(!lucky)return;
	var spans = document.getElementById("name_list").getElementsByTagName('span');
    if(spans.length<1)return;
    for (i=0;i<spans.length;i++){
        if(spans[i].innerHTML == lucky){
            spans[i].className='select';
            allData[spans[i].innerHTML]=1;
        }
    }
}
function GetRnd(min,max){
    return parseInt(Math.random()*(max-min+1));
}
</script>
</body>
</html>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=gb2312"/>
	<title>抽奖活动</title>
	<style type="text/css">
	body {padding-top:100px;font:12px "\5B8B\4F53",sans-serif;text-align:center;}
	.result_box {margin:0 auto;width:700px;padding:100px 0;text-align:center;border:3px solid #40AA53;background:#efe;}
	.result_box #oknum {width:680px;color:#cc0000;font-size:50pt;font-family:Verdana;text-align:center;border:none;background:#efe;}
	.button_box {margin-top:50px;}
	.button_box .btn {cursor:pointer;padding:5px 30px;margin:0 10px;color:#555;font-family:"\5B8B\4F53",sans-serif;font-size:40px;}
	.more_box {margin:30px auto; width:700px; overflow:hidden; text-align:left; font-size:16px;}
	.more_form {position: relative; clear: both;}
	.more_form input, .more_form button {font-size:14px;}
	.more_form input {width:634px; height:30px; padding:1px 55px 1px 5px; }
	.more_form button {position: absolute; right:0; height:36px; }
	.more_box span.luck_select {font-size: 14px; float:right; margin:0}
	.name_list {overflow: hidden; padding:10px; clear:both; border: 1px solid #40AA53;}
	.name_list span, .luck_select{display: inline-block; padding: 2px 6px; white-space: nowrap; background: #88B9F3; color: #FFF; float: left; height: 20px; line-height: 20px; margin: 0 7px 7px 0;-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; cursor: pointer;}
	.name_list span:hover{background: #8899F3;}
	.name_list span.select, .luck_select{background: #FF00CB;}
	</style>
	</head>
	<body>
	<div class="result_box"><input type="text" id="oknum" name="oknum" readonly="readonly" placeholder="抽奖结果" /></div>
	<div class="button_box"><button class="btn" onclick="start()" accesskey="s">开始(<U>S</U>)</button><button class="btn" onclick="ok()" accesskey="o">停止(<U>O</U>)</button></div>
	<div class="more_box">
	<b>参与抽奖人（双击删除）</b>
	<span class="luck_select">表示已中奖</span>
	<div class="name_list" id="name_list">没有人参与抽奖</div>
	</div>
	<div class="more_box">
	添加备选人（多个用逗号隔开）：
	<div class="more_form"><input id="more_input" value="013陈十三,010林十,008潘八,003邓三,014王十四,005欧五,004罗四" /><button onclick="addData()">添加</button></div>
	</div>

	<script type="text/javascript">
	var allData = {};
	function addData(){
	var input = document.getElementById("more_input");
	var data = input.value;
	input.value = '';
	if(!data){alert('请输入备选人（多个用逗号隔开）'); return;}
	data = data.replace("，",",").replace(",,",",").split(",");
	var d, i, s='';
	for (i=0;i<data.length;i++){
	d = data[i].replace(/(^\s)\|(\s$)/g, '');
	if(d && !allData[d]) {
	allData[d]=-1;
	s+='<span ondblclick="removeData(this)" title="双击删除">' + d + '</span>';
	}
	}
	var name_list = document.getElementById("name_list");
	if(name_list.getElementsByTagName('span').length<1)name_list.innerHTML='';
	name_list.innerHTML+=s;
	timer && start();
	}
	function removeData(obj){
	delete allData[obj.innerHTML];
	obj.parentNode.removeChild(obj);
	}
	var timer;
	var dataarr = [];
	function change(){
	document.getElementById("oknum").value = dataarr[GetRnd(0,dataarr.length-1)];
	}
	function clear(){
	clearInterval(timer);
	timer='';
	document.getElementById("oknum").value='';
	}
	function start(){
	clear();
	dataarr = [];
	for(var d in allData) {
	if(allData[d]===-1) dataarr.push(d);
	}
	if(dataarr.length<1){
	alert('没有备选人啦');
	return;
	}
	timer = setInterval('change()',46);
	}
	function ok(){
	clearInterval(timer);
	timer='';
	var lucky=document.getElementById("oknum").value;
	if(!lucky)return;
	var spans = document.getElementById("name_list").getElementsByTagName('span');
	if(spans.length<1)return;
	for (i=0;i<spans.length;i++){
	if(spans[i].innerHTML == lucky){
	spans[i].className='select';
	allData[spans[i].innerHTML]=1;
	}
	}
	}
	function GetRnd(min,max){
	return parseInt(Math.random()*(max-min+1));
	}
	</script>
	</body>
	</html>