wuliupo/choujiang.htm

## choujiang.htm
<!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"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>抽奖活动</title>
<style type="text/css">
body{font-size:12px;text-align:center;line-height:40px;}
.result_box{margin:0 auto;width:700px;max-width:100%;padding:10px 0;text-align:center;border:3px solid #40AA53;background:#efe;}
.result_box #oknum{width:99%;color:#cc0000;font-size:50pt;font-family:Verdana;text-align:center;border:none;background:#efe;}
.button_box{margin:10px auto;width:700px;max-width:100%;}
.button_box .btn{cursor:pointer;padding:5px 30px;margin:0 10px;color:#555;font-family:"\5B8B\4F53",sans-serif;font-size:30px;}
.more_box{margin:10px auto;width:700px;max-width:100%;text-align:left;font-size:16px;}
.more_form textarea{width:100%;height:80px}
.name_list{margin:0;padding:10px;clear:both;border:1px solid #40AA53;line-height:20px;}
.name_list span{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{background:#EEE;color:#888;}
#lucky_list li{list-style-position:inside;}
#lucky_list.name_list span{background:#FF00CB;float:none;}
</style>
</head>
<body>
<div class="more_box">
添加备选人（每行一个人）：
<div class="more_form"><textarea id="more_input"></textarea>
<button onclick="addData()">添加</button>
</div>
</div>
<div class="more_box">
    <b>参与抽奖人（双击删除）</b>
    <div class="name_list" id="name_list">没有人参与抽奖</div>
</div>
<div class="result_box"><input type="text" id="oknum" name="oknum" readonly="readonly" placeholder="抽奖结果" /></div>
<div class="button_box"><button class="btn" onclick="start()">开始抽奖</button><button class="btn" onclick="stop()">停止</button></div>

<div class="more_box">
    <b>中奖名单</b>
    <ol class="name_list" id="lucky_list">没有中奖</ol>
</div>
<script type="text/javascript">
var allData = {}, timer, dataarr = [];
function addData(){
    var input = document.getElementById("more_input"), data = input.value, d, i, s='', name_list;
    input.value = '';
    if(!data){alert('请输入备选人（每行一个人）'); return;}
    data = data.replace("，",",").replace(",,",",").replace("\r","").split("\n");
    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>';
        }
    }
    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);
}
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 stop(){
    var lucky, spans, lucky_list, i;
    clearInterval(timer);
    timer='';
    lucky=document.getElementById("oknum").value;
    if(!lucky)return;
    spans = document.getElementById("name_list").getElementsByTagName('span');
    if(spans.length<1)return;
    lucky_list = document.getElementById("lucky_list");
    if(lucky_list.getElementsByTagName('li').length<1)lucky_list.innerHTML='';
    lucky_list.innerHTML+='<li><span>'+lucky+'</span></li>';
    for (i=0;i<spans.length;i++){
        if(spans[i].innerHTML == lucky){
            spans[i].className='select';
            allData[spans[i].innerHTML]=1;
            return;
        }
    }
}
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"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>抽奖活动</title>
	<style type="text/css">
	body{font-size:12px;text-align:center;line-height:40px;}
	.result_box{margin:0 auto;width:700px;max-width:100%;padding:10px 0;text-align:center;border:3px solid #40AA53;background:#efe;}
	.result_box #oknum{width:99%;color:#cc0000;font-size:50pt;font-family:Verdana;text-align:center;border:none;background:#efe;}
	.button_box{margin:10px auto;width:700px;max-width:100%;}
	.button_box .btn{cursor:pointer;padding:5px 30px;margin:0 10px;color:#555;font-family:"\5B8B\4F53",sans-serif;font-size:30px;}
	.more_box{margin:10px auto;width:700px;max-width:100%;text-align:left;font-size:16px;}
	.more_form textarea{width:100%;height:80px}
	.name_list{margin:0;padding:10px;clear:both;border:1px solid #40AA53;line-height:20px;}
	.name_list span{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{background:#EEE;color:#888;}
	#lucky_list li{list-style-position:inside;}
	#lucky_list.name_list span{background:#FF00CB;float:none;}
	</style>
	</head>
	<body>
	<div class="more_box">
	添加备选人（每行一个人）：
	<div class="more_form"><textarea id="more_input"></textarea>
	<button onclick="addData()">添加</button>
	</div>
	</div>
	<div class="more_box">
	<b>参与抽奖人（双击删除）</b>
	<div class="name_list" id="name_list">没有人参与抽奖</div>
	</div>
	<div class="result_box"><input type="text" id="oknum" name="oknum" readonly="readonly" placeholder="抽奖结果" /></div>
	<div class="button_box"><button class="btn" onclick="start()">开始抽奖</button><button class="btn" onclick="stop()">停止</button></div>

	<div class="more_box">
	<b>中奖名单</b>
	<ol class="name_list" id="lucky_list">没有中奖</ol>
	</div>
	<script type="text/javascript">
	var allData = {}, timer, dataarr = [];
	function addData(){
	var input = document.getElementById("more_input"), data = input.value, d, i, s='', name_list;
	input.value = '';
	if(!data){alert('请输入备选人（每行一个人）'); return;}
	data = data.replace("，",",").replace(",,",",").replace("\r","").split("\n");
	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>';
	}
	}
	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);
	}
	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 stop(){
	var lucky, spans, lucky_list, i;
	clearInterval(timer);
	timer='';
	lucky=document.getElementById("oknum").value;
	if(!lucky)return;
	spans = document.getElementById("name_list").getElementsByTagName('span');
	if(spans.length<1)return;
	lucky_list = document.getElementById("lucky_list");
	if(lucky_list.getElementsByTagName('li').length<1)lucky_list.innerHTML='';
	lucky_list.innerHTML+='<li><span>'+lucky+'</span></li>';
	for (i=0;i<spans.length;i++){
	if(spans[i].innerHTML == lucky){
	spans[i].className='select';
	allData[spans[i].innerHTML]=1;
	return;
	}
	}
	}
	function GetRnd(min,max){
	return parseInt(Math.random()*(max-min+1));
	}
	</script>
	</body>
	</html>