基于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 相关文章推荐
JSON 数据格式介绍
Jan 13 Javascript
关于JavaScript中原型继承中的一点思考
Jul 25 Javascript
jQuery判断checkbox是否选中的3种方法
Aug 12 Javascript
根据配置文件加载js依赖模块
Dec 29 Javascript
原生javascript实现图片滚动、延时加载功能
Jan 12 Javascript
js实现新年倒计时效果
Dec 10 Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
May 03 Javascript
JS数组操作中的经典算法实例讲解
Jul 26 Javascript
js 倒计时(高效率服务器时间同步)
Sep 12 Javascript
angular 服务随记小结
May 06 Javascript
关于vue表单提交防双/多击的例子
Oct 31 Javascript
React服务端渲染原理解析与实践
Mar 04 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
电脑硬件及电脑配置知识大全
2020/03/17 数码科技
php统计文件大小,以GB、MB、KB、B输出
2011/05/29 PHP
ThinkPHP行为扩展Behavior应用实例详解
2014/07/22 PHP
Smarty使用自定义资源的方法
2015/08/08 PHP
PHP弱类型的安全问题详细总结
2016/09/25 PHP
Yii 2.0实现联表查询加搜索分页的方法示例
2017/08/02 PHP
JavaScript 继承机制的实现(待续)
2010/05/18 Javascript
jquery ajax abort()的使用方法
2010/10/28 Javascript
Js event事件在IE、FF兼容性问题
2011/01/01 Javascript
js比较和逻辑运算符的介绍
2013/03/10 Javascript
JS操作数据库的实例代码
2013/10/17 Javascript
js实现从中间开始往上下展开网页窗口的方法
2015/03/02 Javascript
js判断当前页面用什么浏览器打开的方法
2016/01/06 Javascript
layui分页效果实现代码
2017/05/19 Javascript
Vue2.x中的Render函数详解
2017/05/30 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
2018/04/18 Javascript
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
2018/07/23 Javascript
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
2019/10/30 Javascript
javascript+Canvas实现画板功能
2020/06/23 Javascript
Python 3.6 性能测试框架Locust安装及使用方法(详解)
2017/10/11 Python
python中获得当前目录和上级目录的实现方法
2017/10/12 Python
Python语言描述机器学习之Logistic回归算法
2017/12/21 Python
python3+PyQt5实现自定义窗口部件Counters
2018/04/20 Python
微信小程序python用户认证的实现
2019/07/29 Python
Python 日期的转换及计算的具体使用详解
2020/01/16 Python
Python Numpy,mask图像的生成详解
2020/02/19 Python
2021年的Python 时间轴和即将推出的功能详解
2020/07/27 Python
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
2013/01/06 HTML / CSS
跑步、骑行和铁人三项的高性能眼镜和服装:ROKA
2018/07/06 全球购物
销售人员中英文自荐信
2013/09/22 职场文书
英语专业毕业生求职简历的自我评价
2013/10/24 职场文书
车间统计员岗位职责
2014/01/05 职场文书
读书小明星事迹材料
2014/05/03 职场文书
小学五年级语文上册教学计划
2015/01/22 职场文书
贫民窟的百万富翁观后感
2015/06/09 职场文书
Python使用OpenCV和K-Means聚类对毕业照进行图像分割
2021/06/11 Python