基于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 相关文章推荐
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
Apr 15 Javascript
js修改input的type属性及浏览器兼容问题探讨与解决
Jan 23 Javascript
javascript中expression的用法整理
May 13 Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
Oct 12 Javascript
jQuery事件对象总结
Oct 17 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
Oct 28 Javascript
vue小图标favicon不显示的解决方案
Sep 19 Javascript
利用node实现一个批量重命名文件的函数
Dec 21 Javascript
js动态添加表格逐行添加、删除、遍历取值的实例代码
Jan 25 Javascript
浅谈vuejs实现数据驱动视图原理
Feb 23 Javascript
解决vue跨域axios异步通信问题
Apr 17 Javascript
countUp.js实现数字滚动效果
Oct 18 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
ThinkPHP学习笔记(一)ThinkPHP部署
2014/06/22 PHP
PHP JSON出错:Cannot use object of type stdClass as array解决方法
2014/08/16 PHP
php读取csc文件并输出
2015/05/21 PHP
php实现的rc4加密解密类定义与用法示例
2018/08/16 PHP
Div Select挡住的解决办法
2008/08/07 Javascript
Jquery 快速构建可拖曳的购物车DragDrop
2009/11/30 Javascript
javascript创建createXmlHttpRequest对象示例代码
2014/02/10 Javascript
Node.js中child_process实现多进程
2015/02/03 Javascript
基于vue实现分页效果
2017/11/06 Javascript
JavaScript异步加载问题总结
2018/02/17 Javascript
详解Vue Elememt-UI构建管理后台
2018/02/27 Javascript
JS实现生成由字母与数字组合的随机字符串功能详解
2018/05/25 Javascript
vue+Element-ui实现登录注册表单
2020/11/17 Javascript
vue使用lodop打印控件实现浏览器兼容打印的方法
2021/02/07 Vue.js
Python实现股市信息下载的方法
2015/06/15 Python
python+tkinter编写电脑桌面放大镜程序实例代码
2018/01/16 Python
浅谈flask截获所有访问及before/after_request修饰器
2018/01/18 Python
python selenium 对浏览器标签页进行关闭和切换的方法
2018/05/21 Python
Python自动化之数据驱动让你的脚本简洁10倍【推荐】
2019/06/04 Python
简单了解Python生成器是什么
2019/07/02 Python
基于python实现文件加密功能
2020/01/06 Python
Python实现随机生成任意数量车牌号
2020/01/21 Python
德国在线购买葡萄酒网站:Geile Weine
2019/09/24 全球购物
什么是就业协议书
2014/04/17 职场文书
讲文明树新风演讲稿
2014/05/12 职场文书
商业项目策划方案
2014/06/05 职场文书
施工安全标语
2014/06/07 职场文书
网上祭先烈心得体会
2014/09/01 职场文书
青春飞扬演讲稿
2014/09/11 职场文书
幼儿园见习报告
2014/10/30 职场文书
2015年综治宣传月活动总结
2015/03/25 职场文书
2015年妇委会工作总结
2015/05/22 职场文书
公司晚会主持词
2019/04/17 职场文书
用golang如何替换某个文件中的字符串
2021/04/25 Golang
go类型转换及与C的类型转换方式
2021/05/05 Golang
详解Spring Security中的HttpBasic登录验证模式
2022/03/17 Java/Android