<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>摇号器</title>
<script>
var counter = 0;
var timeHandle;
var timers;
var bFall=false;
var winners;//中奖者们
var winner;//中奖者
var repetition = false;
var once = false;
var People;//签到人
var number = 0;
var numberOfPeople = "";//签到人们
var banners = new Array;
var ranking = 1;//名次
function signIn(){
if (getCookie("numberOfPeople") != null){
numberOfPeople = getCookie("numberOfPeople");
}//防止签到中途刷新，再次签到前面的签到人被删
People = document.getElementById("signInText").value;
reg = /^[\u4e00-\u9fa5]{1,4}$/;
if (!reg.test(People)) {
alert("不符合标准！");
return;
}//签到者名字只能是1-4个汉字
numberOfPeople += People + "|";
createCookie("numberOfPeople",numberOfPeople,1);
document.getElementById("signInText").value = "";
number++;
}
function run()
{
banners = getCookie("numberOfPeople").split('|');
banners.splice(banners.length-1,1);//删除数组最后的一个空值
document.getElementById("winners").value = getCookie("winners");
winners = getCookie("winners");//读取cookie中的中奖者们，防止刷新后再次摇号以前摇到的中奖者被
删
dispContext(counter);//显示前五个签到者
document.getElementById("WinnerButton").onmousedown=rotateConstantSpeed;
document.getElementById("WinnerButton").onmouseup=rotateFallingSpeed;
document.getElementById("dupPrize").onmouseup=RepeatDraw;//重复抽奖
document.getElementById("singlePrize").onmouseup=drawForOneTime;//一次中奖
}
function drawForOneTime(){
once = true;
repetition = false;
}
function RepeatDraw(){
repetition = true;
once = false;
}
function rotateConstantSpeed(){
timers = 20;
bFall= false;
rotate();
}
function rotateFallingSpeed(){
bFall=true;
setTimeout(ctrlStop,5000);//5秒后停止摇号
}
function ctrlStop(){
clearTimeout(timeHandle);//停止摇号
win();
tableContent();
}
function win(){
if (winners == null)
winners = "";//防止winners为空时，中奖者们第一个为Null
if(repetition == true && once == false) {
winner = banners[(counter + 2) % banners.length];
winners += winner + " ";
}
if(once == true && repetition == false){
winner = banners[(counter + 2) % banners.length];//防止一次中奖执行后，表格中奖者列显示不
出已删中奖人姓名
winners += winner + " ";
banners.splice((counter+2)%banners.length,1);
}
document.getElementById("winners").value= winners;
createCookie("winners",winners);
}
function tableContent(){
var mytr = document.getElementById("tableOutput");
var newtr = document.createElement("tr");
mytr.appendChild(newtr);//创建行节点
var newtd = document.createElement("td");
var newText = document.createTextNode(ranking);
var newwinner = document.createTextNode(winner);
mytr.appendChild(newtd).appendChild(newText);//将名次放入创建的列节点的文字节点中
var newtdtwo = document.createElement("td");
mytr.appendChild(newtdtwo).appendChild(newwinner);//将中奖者放入创建的二列节点的文字节点中
ranking++;
}
function rotate() {
counter++;
dispContext(counter);
if(bFall==true)
timers = timers+(1.2*Math.log(timers));//缓慢减速
timeHandle=setTimeout(rotate,timers);
}
function dispContext(subLocate)
{
document.getElementById("displocate1").innerHTML = banners[subLocate%banners.length];
document.getElementById("displocate2").innerHTML = banners[(subLocate+1)%banners.length];
document.getElementById("displocate3").innerHTML = banners[(subLocate+2)%banners.length];
document.getElementById("displocate4").innerHTML = banners[(subLocate+3)%banners.length];
document.getElementById("displocate5").innerHTML = banners[(subLocate+4)%banners.length];
}
function createCookie(name, value, days, path, domain, secure){
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days*24*60*60*1000));
var expires = date.toGMTString();
}
else var expires = "";
cookieString = name + "=" + escape(value);
if (expires) cookieString += "; expires=" + expires;
if (path) cookieString += "; path=" + escape(path);
if (domain) cookieString += "; domain=" + escape(domain);
if (secure) cookieString += "; secure";
document.cookie = cookieString;
}//创建cookie
function getCookie(name)
{
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg))
return unescape(arr[2]);
else
return null;
}//读取cookie
function deleteCookie(name){
createCookie(name,"",-1);
document.getElementById("winners").value= "";
}//删除中奖者们的cookie
</script>
<style type="text/css">
mark {
background-color: red;
color: white;
}
.p1css {
text-align: center;
font-weight: bold;
}
</style>
</head>
<body onload="run();">
<form>
<input type="text" id="signInText">
<input type="button" value="签到" id="signInButton" onclick="signIn()">
<br/>
<input type="radio" name="mode" value="dupPrize" id="dupPrize"/> 重复中奖
<br/>
<input type="radio" name="mode" value="singlePrize" id="singlePrize"/> 一次中奖
</form>
<p class="p1css" id="displocate1"></p>
<p class="p1css" id="displocate2"></p>
<p class="p1css">
<mark id="displocate3"></mark>
</p>
<p class="p1css" id="displocate4"></p>
<p class="p1css" id="displocate5"></p>
<p>
<form>
<input type="button" id="WinnerButton" value="抽奖"/>
<input type="button" id="deleteWinners" value="清空中奖者" onclick="deleteCookie
('winners')">
</form>
</p>
<textarea rows="5" cols="35" style="font-size: 30px" id="winners"></textarea>
<p>
<table border="1" id="tableOutput">
<tr>
<td>序号</td>
<td>-获奖者-</td>
</tr>
</table>
</p>
</body>
</html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>摇号器</title>
<script>
var counter = 0;
var timeHandle;
var timers;
var bFall=false;
var winners;//中奖者们
var winner;//中奖者
var repetition = false;
var once = false;
var People;//签到人
var number = 0;
var numberOfPeople = "";//签到人们
var banners = new Array;
var ranking = 1;//名次
function signIn(){
if (getCookie("numberOfPeople") != null){
numberOfPeople = getCookie("numberOfPeople");
}//防止签到中途刷新，再次签到前面的签到人被删
People = document.getElementById("signInText").value;
reg = /^[\u4e00-\u9fa5]{1,4}$/;
if (!reg.test(People)) {
alert("不符合标准！");
return;
}//签到者名字只能是1-4个汉字
numberOfPeople += People + "|";
createCookie("numberOfPeople",numberOfPeople,1);
document.getElementById("signInText").value = "";
number++;
}
function run()
{
banners = getCookie("numberOfPeople").split('|');
banners.splice(banners.length-1,1);//删除数组最后的一个空值
document.getElementById("winners").value = getCookie("winners");
winners = getCookie("winners");//读取cookie中的中奖者们，防止刷新后再次摇号以前摇到的中奖者被
删
dispContext(counter);//显示前五个签到者
document.getElementById("WinnerButton").onmousedown=rotateConstantSpeed;
document.getElementById("WinnerButton").onmouseup=rotateFallingSpeed;
document.getElementById("dupPrize").onmouseup=RepeatDraw;//重复抽奖
document.getElementById("singlePrize").onmouseup=drawForOneTime;//一次中奖
}
function drawForOneTime(){
once = true;
repetition = false;
}
function RepeatDraw(){
repetition = true;
once = false;
}
function rotateConstantSpeed(){
timers = 20;
bFall= false;
rotate();
}
function rotateFallingSpeed(){
bFall=true;
setTimeout(ctrlStop,5000);//5秒后停止摇号
}
function ctrlStop(){
clearTimeout(timeHandle);//停止摇号
win();
tableContent();
}
function win(){
if (winners == null)
winners = "";//防止winners为空时，中奖者们第一个为Null
if(repetition == true && once == false) {
winner = banners[(counter + 2) % banners.length];
winners += winner + " ";
}
if(once == true && repetition == false){
winner = banners[(counter + 2) % banners.length];//防止一次中奖执行后，表格中奖者列显示不
出已删中奖人姓名
winners += winner + " ";
banners.splice((counter+2)%banners.length,1);
}
document.getElementById("winners").value= winners;
createCookie("winners",winners);
}
function tableContent(){
var mytr = document.getElementById("tableOutput");
var newtr = document.createElement("tr");
mytr.appendChild(newtr);//创建行节点
var newtd = document.createElement("td");
var newText = document.createTextNode(ranking);
var newwinner = document.createTextNode(winner);
mytr.appendChild(newtd).appendChild(newText);//将名次放入创建的列节点的文字节点中
var newtdtwo = document.createElement("td");
mytr.appendChild(newtdtwo).appendChild(newwinner);//将中奖者放入创建的二列节点的文字节点中
ranking++;
}
function rotate() {
counter++;
dispContext(counter);
if(bFall==true)
timers = timers+(1.2*Math.log(timers));//缓慢减速
timeHandle=setTimeout(rotate,timers);
}
function dispContext(subLocate)
{
document.getElementById("displocate1").innerHTML = banners[subLocate%banners.length];
document.getElementById("displocate2").innerHTML = banners[(subLocate+1)%banners.length];
document.getElementById("displocate3").innerHTML = banners[(subLocate+2)%banners.length];
document.getElementById("displocate4").innerHTML = banners[(subLocate+3)%banners.length];
document.getElementById("displocate5").innerHTML = banners[(subLocate+4)%banners.length];
}
function createCookie(name, value, days, path, domain, secure){
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days*24*60*60*1000));
var expires = date.toGMTString();
}
else var expires = "";
cookieString = name + "=" + escape(value);
if (expires) cookieString += "; expires=" + expires;
if (path) cookieString += "; path=" + escape(path);
if (domain) cookieString += "; domain=" + escape(domain);
if (secure) cookieString += "; secure";
document.cookie = cookieString;
}//创建cookie
function getCookie(name)
{
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg))
return unescape(arr[2]);
else
return null;
}//读取cookie
function deleteCookie(name){
createCookie(name,"",-1);
document.getElementById("winners").value= "";
}//删除中奖者们的cookie
</script>
<style type="text/css">
mark {
background-color: red;
color: white;
}
.p1css {
text-align: center;
font-weight: bold;
}
</style>
</head>
<body onload="run();">
<form>
<input type="text" id="signInText">
<input type="button" value="签到" id="signInButton" onclick="signIn()">
<br/>
<input type="radio" name="mode" value="dupPrize" id="dupPrize"/> 重复中奖
<br/>
<input type="radio" name="mode" value="singlePrize" id="singlePrize"/> 一次中奖
</form>
<p class="p1css" id="displocate1"></p>
<p class="p1css" id="displocate2"></p>
<p class="p1css">
<mark id="displocate3"></mark>
</p>
<p class="p1css" id="displocate4"></p>
<p class="p1css" id="displocate5"></p>
<p>
<form>
<input type="button" id="WinnerButton" value="抽奖"/>
<input type="button" id="deleteWinners" value="清空中奖者" onclick="deleteCookie
('winners')">
</form>
</p>
<textarea rows="5" cols="35" style="font-size: 30px" id="winners"></textarea>
<p>
<table border="1" id="tableOutput">
<tr>
<td>序号</td>
<td>-获奖者-</td>
</tr>
</table>
</p>
</body>
</html>
