这个页面只针对于:
事先把抽奖数据写在页面上,点击开始就行.
把下面的代码保存到一个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 onclick="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>
分享到：
相关推荐
在本文中，我们将深入探讨如何使用JavaScript来创建一个简单的抽奖页面。JavaScript是一种广泛使用的客户端脚本语言，它允许我们在网页上实现动态交互性。在这个抽奖系统中，我们主要利用JavaScript的功能来实现随机...
在本项目中，我们将探讨如何使用Three.js库来创建一个具有3D效果的年会抽奖页面。Three.js是一个基于WebGL的JavaScript库，它允许开发者在浏览器中创建丰富的3D图形和交互式体验。 首先，我们需要理解Three.js的...
原生抽奖页面（炫酷抽奖），js+html+css!原生抽奖页面（炫酷抽奖），js+html+css!原生抽奖页面（炫酷抽奖），js+html+css!原生抽奖页面（炫酷抽奖），js+html+css!原生抽奖页面（炫酷抽奖），js+html+css!原生抽奖...
在这个"js简单页面抽奖"项目中，我们将探讨如何利用JS和DOM（Document Object Model）来实现一个基本的抽奖功能。 DOM是HTML和XML文档的结构化表示，它允许程序和脚本动态更新、添加或删除页面元素。在JS中，我们...
该程序使用了Vue.js框架，这是一个轻量级的前端JavaScript库，用于构建用户界面。Vue.js以其易学易用、灵活和高性能的特点，被广泛应用于单页面应用开发。同时，由于是静态页面，它可能结合了HTML、CSS和JavaScript...
在本项目"js做的抽奖"中，JavaScript被用来创建一个完整的抽奖功能，包括用户界面和逻辑控制。这个抽奖程序是基于HTML（超文本标记语言）构建的，它定义了页面的基本结构和内容，而JavaScript则赋予这些静态内容动态...
自己编写的抽奖页面，是基于jq 的，由于自己使用layui这里用到了layui的功能！ 市面上找不到合适的抽奖页面大部分只是页面不能对接后台，尤其转盘，里面的内容不能圆形排列或者太多余复杂，只能自己写了，如果有问题...
这是一个基于JavaScript技术栈，结合了Express后端框架和Three.js前端库来实现的3D球体抽奖程序。这个程序能够创建一个动态、交互式的3D抽奖界面，为用户提供一种新颖的抽奖体验。以下是对该程序相关知识点的详细...
在大转盘抽奖页面中，HTML代码将包括一个容器元素，通常是一个`<div>`，用来放置转盘的背景和指针。此外，还需要为每个奖项设置单独的HTML元素，这些元素可以通过CSS进行定位和设计，以形成旋转盘的外观。 CSS...
这个"HTML5抽奖页面16.rar"压缩包很可能是包含了一个完整的HTML5抽奖页面的源代码和相关资源文件，供学习或参考使用。 1. **HTML5 Canvas**: 抽奖页面可能使用了Canvas元素来绘制动态的抽奖转盘，通过JavaScript...
标题 "fastadmin后台抽奖设置页面+前端抽奖接口" 涉及的是FastAdmin框架中一个特定功能的实现，即后台管理界面的抽奖设置以及前端抽奖功能的接口开发。FastAdmin是一款基于ThinkPHP5.1+Layui的快速开发框架，它的...
1. HTML 文件：包含了转盘抽奖页面的基本结构，包括转盘、按钮、结果展示等元素。 2. CSS 文件：定义了各个元素的样式，特别是转盘及其动画效果。 3. JavaScript 文件：实现了抽奖逻辑，包括计算随机中奖位置、触发...
这个压缩包文件提供的就是一个现成的滚动抽奖页面，开发者可以拿来即用，也可以根据自己的需求进行二次开发。以下将详细讲解涉及的技术知识点： 1. **HTML（超文本标记语言）**：HTML是网页内容的基础，它定义了...
本教程针对Vue初学者，将引导你创建一个简单的抽奖界面，这将涵盖Vue的基础概念以及如何利用计算属性、CSS过渡效果和变换来实现动态效果。 1. **Vue基础知识**：Vue的核心在于其组件化思想，它允许我们将UI拆分成可...
在这个"html5+js抽奖大转盘源码"项目中，开发者利用了这两种技术的优势来构建一个吸引人的抽奖功能，即大转盘。大转盘作为一种常见的营销策略，经常用于线上活动中，吸引用户参与并增加用户黏性。 首先，HTML5是超...
通过以上分析，我们可以看到，这款基于Vue.js的手机移动端九宫格抽奖页面，不仅展示了Vue的基本使用，还涉及到了前端开发中常见的布局、样式设计、动画实现、用户交互等多个方面，是学习和实践Vue.js的一个很好的...
总结来说，创建一个JavaScript抽奖代码涉及HTML页面布局、JavaScript逻辑编写以及可能的前后端交互。通过理解这些基本概念和技巧，你可以根据需求构建出各种各样的抽奖应用。在实际项目中，你可能需要根据压缩包中的...
本项目名为“年会抽奖，超简单抽奖”，显然它是一个基于JavaScript（js）实现的简单抽奖系统，利用了jQuery（jq）库来增强交互体验。下面我们将详细探讨这个系统可能涉及的技术点和实现原理。 首先，JavaScript是...
"JavaScript抽奖单页面源码"是一个利用JavaScript实现的简单抽奖程序，允许用户通过点击按钮来触发抽奖过程，显示随机结果。这个项目的核心在于如何用JavaScript生成随机数以及如何控制页面元素的交互。 1. **...
JavaScript 图片抽奖程序...综上所述，js图片抽奖程序的开发涉及到JavaScript事件处理、数组操作、DOM操作、CSS样式和动画、响应式设计等多个方面，需要综合运用这些技能来实现一个功能完善、用户体验良好的抽奖程序。