用Javascript轻松制作一套简单的抽奖系统
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 TRANSITIONAL//EN">
<html>
<head>
<title> 年会抽奖系统</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language="javascript"> // global variables
var timer;
var flag = new Array(100);
var existingnum = new Array(100);
var clickTimes = 0;
var randnum;
var cellnum =1;
var mobile = new Array();
// set data here!!
mobile[0]=13020000100;
mobile[1]=13020000101;
mobile[2]=13020000102;
mobile[3]=13020000103;
mobile[4]=13020000104;
mobile[5]=13020000105;
mobile[6]=13020000106;
mobile[7]=13020000107;
mobile[8]=13020000108;
mobile[9]=13020000109;
mobile[10]=13020000110;
mobile[11]=13020000111;
mobile[12]=13020000112;
mobile[13]=13020000113;
mobile[14]=13020000114;
mobile[15]=13020000115; mobile[16]=13020000116;
mobile[17]=13020000117;
mobile[18]=13020000118;
mobile[19]=13020000119;
mobile[20]=13020000120;
mobile[21]=13020000121;
mobile[22]=13020000122;
mobile[23]=13020000123;
mobile[24]=13020000124;
mobile[25]=13020000125;
mobile[26]=13020000126;
mobile[27]=13020000127;
mobile[28]=13020000128;
mobile[29]=13020000129;
mobile[30]=13020000130;
mobile[31]=13020000131;
mobile[32]=13020000132;
mobile[33]=13020000133;
mobile[34]=13020000134;
mobile[35]=13020000135;
mobile[36]=13020000136;
mobile[37]=13020000137;
mobile[38]=13020000138;
mobile[39]=13020000139;
mobile[40]=13020000140;
mobile[41]=13020000141;
mobile[42]=13020000142;
mobile[43]=13020000143;
mobile[44]=13020000144;
mobile[45]=13020000145;
mobile[46]=13020020146;
var num = mobile.length-1;
function getRandNum(){
document.getElementById("result").value = mobile[GetRnd(0,num)];
}
function start(){
clearInterval(timer);
timer = setInterval('change()',50);
}
function ok(){
clearInterval(timer);
}
function GetRnd(min,max){ randnum = parseInt(Math.random()*(max-min+1));
return randnum;
}
function setTimer(){
timer = setInterval("getRandNum();",10);
document.getElementById("start").disabled = true;
document.getElementById("end").disabled = false;
}
function clearTimer(){
noDupNum();
clearInterval(timer);
document.getElementById("start").disabled = false;
document.getElementById("end").disabled = true; } function noDupNum(){
// to remove the selected mobile phone number
mobile.removeEleAt(randnum); // to reorganize the mobile number array!!
var o = 0;
for(p=0; p<mobile.length;p++){
if(typeof mobile[p]!="undefined"){
mobile[o] = mobile[p];
o++;
}
}
num = mobile.length-1;
}
// method to remove the element in the array
Array.prototype.removeEleAt = function(dx)
{
if(isNaN(dx)||dx>this.length){return false;}
this.splice(dx,1);
}
// set mobile phone numbers to the table cell
function setValues(){
document.getElementById(cellnum).value = document.getElementById("result").value ;
cellnum++;
}
</script>
</head>
<body>
<center>
<div> </div>
<div id="main">
<div>
<h1>中奖号码</h1> <p>
<input id="result" type="text" size="30" style="height:130px;width:800px;border:2px solid red;font-
size:120;" readonly/></p>
<p>
<input id="start" type="button" value="开始" style="border: 1px solid; border-color: #aaa 000 #000
#aaa;width:4em; background: #fc0;" onclick="setTimer()" />
<input id="end" type="button" value="停" style="border: 1px solid; border-color: #aaa 000 #000
#aaa;width:4em; background: #fc0;"onclick="clearTimer();setValues();" disabled/>
</p>
<p><strong>一等奖（10名）</strong></p>
<table width="946" height="79" border="1">
<tr>
<td><input name="text36" type="text" id="36" style="height:30px;width:190px;border:1px solid red;font-
size:25;" size="28" readonly/></td>
<td><input name="text37" type="text" id="37" style="height:30px;width:190px;border:1px solid red;font-
size:25;" size="20" readonly/></td>
<td><input name="text38" type="text" id="38" style="height:30px;width:190px;border:1px solid red;font-
size:25;" size="20" readonly/></td>
<td><input name="text39" type="text" id="39" style="height:30px;width:190px;border:1px solid red;font-
size:25;" size="20" readonly/></td>
<td><input name="text40" type="text" id="40" style="height:30px;width:190px;border:1px solid red;font-
size:25;" size="20" readonly/></td>
</tr>
<tr>
<td><input name="text41" type="text" id="41" style="height:30px;width:190px;border:1px solid red;font-
size:25;" size="28" readonly/></td>
<td><input name="text42" type="text" id="42" style="height:30px;width:190px;border:1px solid red;font-
size:25;" size="20" readonly/></td>
<td><input name="text43" type="text" id="43" style="height:30px;width:190px;border:1px solid red;font-
size:25;" size="20" readonly/></td>
<td><input name="text44" type="text" id="44" style="height:30px;width:190px;border:1px solid red;font-
size:25;" size="20" readonly/></td>
<td><input name="text45" type="text" id="45" style="height:30px;width:190px;border:1px solid red;font-
size:25;" size="20" readonly/></td>
</tr>
</table>
<p>二等奖（15名）</p>
<table width="951" height="88" border="1">
<tr> <td><input name="text21" type="text" id="21" style="height:30px;width:190px;border:1px solid red;font-
size:25;" size="28" readonly/></td>
<td><input name="text22" type="text" id="22" style="height:30px;width:190px;border:1px solid red;font-
size:25;" size="20" readonly/></td>
<td><input name="text23" type="text" id="23" style="height:30px;width:190px;border:1px solid red;font-
size:25;" size="20" readonly/></td>
<td><input name="text24" type="text" id="24" style="height:30px;width:190px;border:1px solid red;font-
size:25;" size="20" readonly/></td>
<td><input name="text25" type="text" id="25" style="height:30px;width:190px;border:1px solid red;font-
size:25;" size="20" readonly/></td>
</tr>
<tr>
<td><input name="text26" type="text" id="26" style="height:30px;width:190px;border:1px solid red;font-
size:25;" size="28" readonly/></td>
<td><input name="text27" type="text" id="27" style="height:30px;width:190px;border:1px solid red;font-
size:25;" size="20" readonly/></td>
<td><input name="text28" type="text" id="28" style="height:30px;width:190px;border:1px solid red;font-
size:25;" size="20" readonly/></td>
<td><input name="text29" type="text" id="29" style="height:30px;width:190px;border:1px solid red;font-
size:25;" size="20" readonly/></td>
<td><input name="text30" type="text" id="30" style="height:30px;width:190px;border:1px solid red;font-
size:25;" size="20" readonly/></td>
</tr>
<tr>
<td><input name="text31" type="text" id="31" style="height:30px;width:190px;border:1px solid red;font-
size:25;" size="28" readonly/></td>
<td><input name="text32" type="text" id="32" style="height:30px;width:190px;border:1px solid red;font-
size:25;" size="20" readonly/></td>
<td><input name="text33" type="text" id="33" style="height:30px;width:190px;border:1px solid red;font-
size:25;" size="20" readonly/></td>
<td><input name="text34" type="text" id="34" style="height:30px;width:190px;border:1px solid red;font-
size:25;" size="20" readonly/></td>
<td><input name="text35" type="text" id="35" style="height:30px;width:190px;border:1px solid red;font-
size:25;" size="20" readonly/></td>
</tr>
</table>
<p>三等奖（20名）</p>
<table width="961" height="102" border="1">
<tr>
<td><input name="text1" type="text" id="1" style="height:30px;width:190px;border:1px solid red;font-
size:25;" size="28" readonly/></td>
<td><input name="text2" type="text" id="2" style="height:30px;width:190px;border:1px solid red;font-
size:25;" size="20" readonly/></td>
<td><input name="text3" type="text" id="3" style="height:30px;width:190px;border:1px solid red;font-
size:25;" size="20" readonly/></td>
<td><input name="text4" type="text" id="4" style="height:30px;width:190px;border:1px solid red;font-
size:25;" size="20" readonly/></td>
<td><input name="text5" type="text" id="5" style="height:30px;width:190px;border:1px solid red;font-
size:25;" size="20" readonly/></td>
</tr>
<tr>
<td><input name="text6" type="text" id="6" style="height:30px;width:190px;border:1px solid red;font-
size:25;" size="28" readonly/></td>
<td><input name="text7" type="text" id="7" style="height:30px;width:190px;border:1px solid red;font-
size:25;" size="20" readonly/></td>
<td><input name="text8" type="text" id="8" style="height:30px;width:190px;border:1px solid red;font-
size:25;" size="20" readonly/></td>
<td><input name="text9" type="text" id="9" style="height:30px;width:190px;border:1px solid red;font-
size:25;" size="20" readonly/></td>
<td><input name="text10" type="text" id="10" style="height:30px;width:190px;border:1px solid red;font-
size:25;" size="20" readonly/></td>
</tr>
<tr>
<td><input name="text11" type="text" id="11" style="height:30px;width:190px;border:1px solid red;font-
size:25;" size="28" readonly/></td>
<td><input name="text12" type="text" id="12" style="height:30px;width:190px;border:1px solid red;font-
size:25;" size="20" readonly/></td>
<td><input name="text13" type="text" id="13" style="height:30px;width:190px;border:1px solid red;font-
size:25;" size="20" readonly/></td>
<td><input name="text14" type="text" id="14" style="height:30px;width:190px;border:1px solid red;font-
size:25;" size="20" readonly/></td>
<td><input name="text15" type="text" id="15" style="height:30px;width:190px;border:1px solid red;font-
size:25;" size="20" readonly/></td>
</tr>
<tr>
<td><input name="text16" type="text" id="16" style="height:30px;width:190px;border:1px solid red;font-
size:25;" size="28" readonly/></td>
<td><input name="text17" type="text" id="17" style="height:30px;width:190px;border:1px solid red;font-
size:25;" size="20" readonly/></td>
<td><input name="text18" type="text" id="18" style="height:30px;width:190px;border:1px solid red;font-
size:25;" size="20" readonly/></td>
<td><input name="text19" type="text" id="19" style="height:30px;width:190px;border:1px solid red;font-
size:25;" size="20" readonly/></td>
<td><input name="text20" type="text" id="20" style="height:30px;width:190px;border:1px solid red;font-
size:25;" size="20" readonly/></td>
</tr>
</table>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
<center>
</body>
</html>
用Javascript轻松制作一套简单的抽奖系统的更多相关文章
- Flask学习之旅--用 Python + Flask 制作一个简单的验证码系统
一.写在前面 现在无论大大小小的网站,基本上都会使用验证码,登录的时候要验证,下载的时候要验证,而使用的验证码也从那些简简单单的字符图形验证码“进化”成了需要进行图文识别的验证码.需要拖动滑块的滑动验 ...
- 使用express+shell在服务器上搭建一套简单的前端部署系统
前言 个人项目越来越多,部署需要频繁操作服务器,所以手动搭建一套简单的部署系统. 效果如图 其中包含 原生html+css+js项目,单页面react, vue, angular项目,实现了一键打包发 ...
- 一套简单可依赖的Javascript库
还是[百度]的产品——Tangram不是我偏心,百度不是我亲戚这东西看上去确实不错 Tangram是一套简单可依赖的Javascript库,主要分为Base和Component两部分.Base提供了开 ...
- HTML5 Maker – 在线轻松制作 HTML5 动画效果
HTML5 Maker 是一个在线动画制作工具,帮助你使用 HTML,CSS 和 JavaScript 创建动态,互动的内容.它非常容易使用,同时可以帮你实现非常好的效果.它可以制作跨浏览器的动画内容 ...
- WebSlides - 轻松制作漂亮的 HTML 幻灯片（演讲稿）
WebSlides 是一个开源的 HTML 幻灯片项目,能够帮助熟悉前端语言的开发者快速制作出效果精美的幻灯片.页面中的每个 <section> 都是一个独立的幻灯片,只需要很少的 CSS ...
- 轻松制作儿童趣味算术软件 - imsoft.cnblogs
轻松制作儿童趣味算术软件 马震安 电脑爱好者 2014-07-23 08:38技巧 0 条评论 标签:软件 兴趣是学习的动力,以动感的软件和自动判断得分的形式测试孩子的算术能力,总要比在白纸上出几 ...
- 零元学Expression Blend 4 - Chapter 44 Flash做的到的Blend也可以!轻松制作拥有动画的MenuBar!(下)
原文:零元学Expression Blend 4 - Chapter 44 Flash做的到的Blend也可以!轻松制作拥有动画的MenuBar!(下) 抱歉久等了!!!! 终於到了动画MenuBar ...
- 一套简单的web即时通讯——第一版
前言 我们之前已经实现了 WebSocket+Java 私聊.群聊实例,后面我们模仿layer弹窗,封装了一个自己的web弹窗 自定义web弹窗/层:简易风格的msg与可拖放的dialog,生成博客园 ...
- （数据科学学习手札90）Python+Kepler.gl轻松制作时间轮播图
本文示例代码及数据已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 Kepler.gl作为一款强大的开源地理信 ...
随机推荐
- openjudge-NOI 2.6-2988 计算字符串距离
题目链接:http://noi.openjudge.cn/ch0206/2988/ 题解: 首先,题目有误,少了一个添加操作 和求解LCS之类的思路类似 f[i][j]表示a序列中1..i的部分和b序 ...
- php7.33 configure
To assign environment variables (e.g., CC, CFLAGS...), specify them as VAR=VALUE. See below for desc ...
- redis常见数据操作
redis中有5种常见的数据类型,针对这5种数据类型有着相应的数据操作. 1.String(键值对为String - String) set k1 v1 get k1 getset k1 v1 - h ...
- Groovy 与 DSL
一:DSL 概念 指的是用于一个特定领域的语言(功能领域.业务领域).在这个给出的概念中有 3个重点: 只用于一个特定领域,而非所有通用领域,比如 Java / C++就是用于通用领域,而不可被称为 ...
- java中常见异常汇总（根据自己遇到的异常不定时更新）
1.java.lang.ArrayIndexOutOfBoundsException:N(数组索引越界异常.如果访问数组元素时指定的索引值小于0,或者大于等于数组的长度,编译程序不会出现任何错误,但运 ...
- pandas安装及使用
一. 安装pandas1. Anaconda 安装pandas.Python和SciPy最简单的方式是用Anaconda.Anaconda是关于Python数据分析和科学计算的分发包.2 ...
- 诺基亚9 PureView正式发布
[手机中国新闻]当地时间2月24日下午16点,HMD在西班牙巴塞罗那正式发布了诸多新品,其中最吸睛的莫过于Nokia 9 PureView.作为全球首款五摄新机,Nokia 9 PureView后置五 ...
- js_数组对象的浅克隆
如果再考虑更奇葩更复杂的情况,例如我们定义: var obj = [{ "a": { "a1": ["a11", "a12&q ...
- MQTT协议以及库函数说明
内容简介:之前我们写了一篇ESP8266AT指令的说明文档,在客户端连接上服务器之后,接下来便是网络通信.为此我们又写了这一片MQTT协议的说明文档,更加深层次的讲述了通信的原理.此文档只是我们在调试 ...
- 一个配置文件收集多个日志-if根据type类型判断
1.同时收集/var/log/messages日志和secure日志 #vim /etc/logstash/conf.d/system.conf input { file { path => & ...