一个js做的抽奖页面

最新推荐文章于 2024-08-16 12:40:11 发布

ljt122000

最新推荐文章于 2024-08-16 12:40:11 发布

阅读量482

点赞数

分类专栏： JAVASCRIPT 文章标签： J# HTML

本文链接：https://blog.csdn.net/ljt122000/article/details/83554277

版权

JAVASCRIPT 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

这个页面只针对于:
事先把抽奖数据写在页面上,点击开始就行.
把下面的代码保存到一个html文件,运行一下就知道了,原理很简单,都有注释的.

<html>
<head>
<title>抽奖程序</title>
<SCRIPT LANGUAGE="JavaScript">
//a1来保存textarea里每一行数据
var a1=new Array();
//a2来把a1里的数据格式进行调整
var a2=new Array();
//调整时的过渡数组
var a3=new Array();
//复制a2以便停止时重新开始
var a4=new Array();
//取得随机数
var num;
var num1;
//定时执行方法
var timer;
//判断数组里的值有没有取完
var check=false;
var b=false;
//显示时的计数器
var bh=1
//得到textarea的值,进行处理
function getvalue()
{
var gg=document.getElementById("ta").value;
a1=gg.split("\r\n");
for(var i=0;i<a1.length;i++)
{
a3=a1[i].split(",");
a2[i]="订单号:"+a3[0]+" "+"会员号:"+a3[1];
}
for(var j=0;j<a2.length;j++)
{
a4[j]=a2[j];
}

}

//检查数组里还有没有值
function checkvalue()
{
for(var i=0;i<a2.length;i++)
{
if(a2[i]!=null)
{
check=true;
}

}
}
//进行数据跳动
function change(){
checkvalue();
if(!check)
{
alert("数据已抽完!");
clearInterval(timer);
check=true;
return;
}
else
{
check=false;
num=a2.length-1;
//取得随机数
num1=parseInt(Math.random()*(num+1));
var vv=a2[num1];
//判断当前数组取得的值是不是null
if(vv!=null)
{
document.getElementById("oknum").value = vv;
}
else
{
change();
}
}
}

//开始
function start(){

var gg1=document.getElementById("ta").value;
if(gg1==null||gg1.length==0)
{
alert("请先输入数据!");
return;
}
if(!b)
{
getvalue();
b=true;
}
checkvalue();
if(!check)
{
alert("数据已抽完!");
clearInterval(timer);
check=true;
return;
}
else
{
clearInterval(timer);
timer=setInterval('change()',10); //随机数据变换速度，越小变换的越快
}
}

//停止跳动并在下面增加值
function ok(){
if(!check&&num1!=null)
{
clearInterval(timer);
check=true;
var table=document.getElementById("d1");
var th2=document.createElement("span");
th2.innerHTML="<br>"+bh+"."+a2[num1];
table.appendChild(th2);
bh++;
a2[num1]=null;
}
else
{
alert("请先单击开始按钮!");
}
clearInteral(timer);
checkvalue();
}
function GetRnd(min,max)
{
return
parseInt(Math.random()*(max-min+1));
}

//所有数据还原,可以重新开始.
function stop()
{
clearInterval(timer);
for(var j=0;j<a4.length;j++)
{
a2[j]=a4[j];
}
check=true;
bh=1;
b=false;
document.getElementById("oknum").value="";
document.getElementById("d1").innerHTML="";
}
function hid()
{
var dd=document.getElementById("d2");
dd.style.display="none";
}
</SCRIPT>
</head>
<body>
<center>
<div>
<table>
<tr>
<td>
<div style=" width:300px" id="d2">
<textarea name="ta" id="ta" style=" width:300px; height:200px"></textarea>
<br>
<b>注意:输入格式为:订单号,会员号(如:123455,123) 一条数据一行!</b>
<br>
数据输入完毕请单击<input type="button" value="确定" onClick="hid()">
</div>
</td>

<td width="40px"> </td>
<td>
<div style=" width:300px">
<input type="text" id="oknum" style="width:290px">
<BR>
<button οnclick="start()">开始抽奖</button>
<button onClick="ok()">抽出号码 </button>
<button onClick="stop()">停止 </button>
<br>
<font color="#FF0000">中奖说明:</font>
<br>
<textarea rows="6" style="width:290px; height:auto"></textarea>
<br>
<h3><font color="#FF0000">中奖号码为:</font></h3>
<div id="d1" style="border:ridge; border:#666; width:290px"></div>
</div>
</td>
</tr>
</table>
</div>

</center>
</body>
</html>