基于JavaScript实现简单的随机抽奖小程序


Posted in Javascript onJanuary 05, 2016

对于抽奖这样的小程序使用诸如VB,Delphi等工具来实现会比较的方便,由于本人机器上没有装这样的应用程序,所以只能另寻其道。为了使抽奖程序能够无需配置平台直接可以在任何一台机器上运行,开发工具和编译运行工具也能够经可能简单(诸如text文本即可编辑,window系统自带的浏览器即可编译运行的情况),决定尝试使用javascript来做。本人对javascript的研究不深,平时主要用于网站开发中对来自客户端的数据进行有效性判断(基于安全性的考虑,安全性要求高的网站尽量使用服务器端语言对数据有效性进行判断),涉及到的都是最常用的方法、函数。所以以下程序只能称得上是比较简陋,界面效果和功能都很“朴素”。

其中主要关键点是取随机数,在制定数字范围内取随机数使用公式 (范围上限-范围下限+1)*Math.random()+范围下限。以下是源代码:

<html> 
<head> 
<title> 抽奖小程序 </title> 
<!--javascript程序——Begin--> 
<script language="javascript"> 
//抽奖数字范围初始化 
var from=1; //起始值 
var to=1523; //终止值 
numarray=new Array(); //保存抽奖数字的数组 
flagarray=new Array(); //记录数字是否中奖的标示数组 
countaward=new Array(0,0,0); //记录每组抽奖次数,这里只抽三组奖 
/** 
函数名:sysInit 
传入参数:无 
返回值:ture/false 
功能:抽奖系统初始化,设定抽奖数字范围、初始化抽奖数字数组和标示数组 
*/ 
function sysInit() 
{ 
/*设定抽奖数字范围*/ 
//接受用户设定操作 
mixNum=prompt('起始值',1); 
maxNum=prompt('终止值',1523); 
//判断用户没有输入任何数据或输入空字符 
if(mixNum!=null&&maxNum!=null&&mixNum!=""&&maxNum!="") 
{ 
//判断用户输入的数据是否是合法的数字 
strTemp="0123456789"; 
for (i=0;i<(mixNum+maxNum).length;i++) 
{ 
j=strTemp.indexOf((mixNum+maxNum).charAt(i)); 
if (j==-1) 
{ 
alert("起始数字范围不正确,程序中断!"); 
return false; 
}//end if 
}//end for 
//若用户输入合法数字,则重新设定抽奖范围 
from=parseInt(mixNum); 
to=parseInt(maxNum); 
}//end if 
//初始化抽奖数字数组和标示数组 
for(i=0;i<(to-from);i++) 
{ 
numarray[i]=from+i; 
flagarray[i]=0; 
} 
//抽奖按钮有效 
first.disabled=false; 
second.disabled=false; 
third.disabled=false; 
return true; 
} 
/** 
函数名:getLuck 
传入参数:奖次award,此项奖总数awardtotal 
返回值:无 
功能:无重复抽取中奖数 
*/ 
function getLuck(award,awardtotal) 
{ 
var msg=""; 
//当抽奖数大于等于20个时,使用每次抽取10个中奖数。 
for(i=0;i<(awardtotal>=20?10:1);i++) 
{ 
//设定循环抽取随机数并判断,防止数字重复取 
while(a=1) 
{ 
//判断提示某项奖已经取完 
if(countaward[award-1]==awardtotal) 
{ 
alert(award+"等奖已经取满"+awardtotal+"个"); 
return; 
} 
//在抽奖数字范围内抽取随机数 
lucky=Math.round((to-from+1)*Math.random()+from); 
//判断上面抽取的随机数是否已经取过 
if(numarray[lucky-from]==lucky&&flagarray[lucky-from]==0) 
{ 
flagarray[lucky-from]=award; 
countaward[award-1]++; 
msg+=award+"等奖N"+countaward[award-1]+":"+lucky+"\n"; 
break; 
}//end if 
}//end while 
}//end for 
alert(msg); 
return; 
} 
/** 
函数名:showLuck 
传入参数:无 
返回值:无 
功能:显示中奖的所有数 
*/ 
function showLuck() 
{ 
var str1="一等奖:<p>"; 
var str2="二等奖:<p>"; 
var str3="三等奖:<p>"; 
for(i=0;i<(to-from);i++) 
{ 
switch(flagarray[i]) 
{ 
case 1: 
str1=str1+numarray[i]+"<br>"; 
break; 
case 2: 
str2=str2+numarray[i]+"<br>"; 
break; 
case 3: 
str3=str3+numarray[i]+"<br>"; 
break; 
} 
} 
//显示三个奖项的中奖数 
document.write(str1); 
document.write(str2); 
document.write(str3); 
} 
</script> 
<!--javascript程序——End--> 
</head> 
<body> 
<center> 
<p><strong><font size="3" color="red">开始抽奖喽!!!</font></strong></p> 
<input type="button" name="range" value="设定抽奖系统" onclick="javascript:sysInit();"><p> 
<input type="button" name="first" value="抽取一等奖" disabled onclick="javascript:getLuck(1,3);"><p> 
<input type="button" name="second" value="抽取二等奖" disabled onclick="javascript:getLuck(2,20);"><p> 
<input type="button" name="third" value="抽取三等奖" disabled onclick="javascript:getLuck(3,100);"><p> 
<input type="button" name="show" value="显示抽奖结果" onclick="javascript:showLuck();"><p> 
</center> 
</body> 
</html>

基于JavaScript实现简单的随机抽奖小程序代码到此结束了,以上代码注释写的比较详细,有不明白的地方欢迎提出,三水点靠木小编会在第一时间给大家答复的,谢谢大家对三水点靠木网站的支持。

Javascript 相关文章推荐
JavaScript For Beginners(转载)
Jan 05 Javascript
Maps Javascript
Jan 22 Javascript
jquery实现submit提交表单
Feb 03 Javascript
JS脚本实现动态给标签控件添加事件的方法
Jun 02 Javascript
javascript实现无法关闭的弹框
Nov 27 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
Jan 18 Javascript
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
Mar 15 Javascript
Javascript循环删除数组中元素的几种方法示例
May 18 Javascript
element-ui 关于获取select 的label值方法
Aug 24 Javascript
Vue下拉框回显并默认选中随机问题
Sep 06 Javascript
vue 子组件和父组件传值的示例
Sep 11 Javascript
在vue中使用jsonp进行跨域请求接口操作
Oct 29 Javascript
jquery中ajax处理跨域的三大方式
Jan 05 #Javascript
基于JavaScript代码实现随机漂浮图片广告
Jan 05 #Javascript
多个js毫秒倒计时同时进行效果
Jan 05 #Javascript
在WordPress中加入Google搜索功能的简单步骤讲解
Jan 04 #Javascript
实例详解jQuery结合GridView控件的使用方法
Jan 04 #Javascript
jQuery EasyUI之DataGrid使用实例详解
Jan 04 #Javascript
JavaScript原型及原型链终极详解
Jan 04 #Javascript
You might like
php中cookie的作用域
2008/03/27 PHP
php地址引用(php地址引用的效率问题)
2012/03/23 PHP
一个轻量级的javascript库 pj介绍
2010/12/19 Javascript
五个jQuery图片画廊插件 推荐
2011/05/12 Javascript
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
2011/08/23 Javascript
javascript一元操作符(递增、递减)使用示例
2013/08/07 Javascript
表单序列化与jq中的serialize使用示例
2014/02/21 Javascript
简介JavaScript中toTimeString()方法的使用
2015/06/12 Javascript
JavaScript html5 canvas绘制时钟效果
2016/03/01 Javascript
深入理解jQuery之防止冒泡事件
2016/05/24 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
2016/06/02 Javascript
JavaScript数据结构链表知识详解
2016/11/21 Javascript
jQuery实现的checkbox级联选择下拉菜单效果示例
2016/12/26 Javascript
Vue form 表单提交+ajax异步请求+分页效果
2017/04/22 Javascript
vue loadmore 组件滑动加载更多源码解析
2017/07/19 Javascript
Vue组件通信之Bus的具体使用
2017/12/28 Javascript
微信小程序如何利用getCurrentPages进行页面传值
2019/07/01 Javascript
JavaScript实现与web通信的方法详解
2020/08/07 Javascript
vue 动态创建组件的两种方法
2020/12/31 Vue.js
[02:49]DAC2018决赛日TOP5 LGD开启黑暗之门绝杀VP
2018/04/08 DOTA
Python 第一步 hello world
2009/09/25 Python
Python单元测试简单示例
2018/07/03 Python
10个Python小技巧你值得拥有
2018/09/29 Python
python列表每个元素同增同减和列表元素去空格的实例
2019/07/20 Python
Python FtpLib模块应用操作详解
2019/12/12 Python
Python变量、数据类型、数据类型转换相关函数用法实例详解
2020/01/09 Python
HTML5拖放功能_动力节点Java学院整理
2017/07/13 HTML / CSS
幼儿园秋游活动方案
2014/01/21 职场文书
九年级数学教学反思
2014/02/02 职场文书
戒毒悔改检讨书
2014/09/21 职场文书
毕业生就业推荐表导师评语
2014/12/31 职场文书
红歌会主持词
2015/07/02 职场文书
2016年小学党支部创先争优活动总结
2016/04/05 职场文书
pytorch 6 batch_train 批训练操作
2021/05/28 Python
Python初识逻辑与if语句及用法大全
2021/08/07 Python
Java存储没有重复元素的数组
2022/04/29 Java/Android