基于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自适应宽度的瀑布流实现思路
Feb 20 Javascript
jQuery源码分析之Callbacks详解
Mar 13 Javascript
js图片轮播效果实现代码
Apr 18 Javascript
使用jQuery判断浏览器滚动条位置的方法
May 30 Javascript
获取当前按钮或者html的ID名称实例(推荐)
Jun 23 Javascript
vue兄弟组件传递数据的实例
Sep 06 Javascript
JS中call()和apply()的功能及用法实例分析
Jun 28 Javascript
Node.js系列之发起get/post请求(2)
Aug 30 Javascript
IntelliJ IDEA编辑器配置vue高亮显示
Sep 26 Javascript
JavaScript中的null和undefined用法解析
Sep 30 Javascript
使用preload预加载页面资源时注意事项
Feb 03 Javascript
vue 动态生成拓扑图的示例
Jan 03 Vue.js
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和数据库结合的一个简单的web实例 代码分析 (php初学者)
2011/07/28 PHP
php读取csv实现csv文件下载功能
2013/12/18 PHP
PHP获取当前相对于域名目录的方法
2015/06/26 PHP
多浏览器兼容性比较好的复制到剪贴板的js代码
2011/10/09 Javascript
Jquery异步请求数据实例代码
2011/12/28 Javascript
jquery win 7透明弹出层效果的简单代码
2013/08/06 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
2013/10/12 Javascript
JS 弹出层 定位至屏幕居中示例
2014/05/21 Javascript
jQuery CSS()方法改变现有的CSS样式表
2014/09/09 Javascript
jQuery选择器源码解读(七):elementMatcher函数
2015/03/31 Javascript
快速学习AngularJs HTTP响应拦截器
2015/12/31 Javascript
JavaScript判断图片是否已经加载完毕的方法汇总
2016/02/05 Javascript
Javascript获取随机数的实现方法
2016/06/22 Javascript
AngularJS指令用法详解
2016/11/02 Javascript
微信小程序  action-sheet详解及实例代码
2016/11/09 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
2017/01/23 Javascript
node作为中间服务层如何发送请求(发送请求的实现方法详解)
2018/01/02 Javascript
vue实现引入本地json的方法分析
2018/07/12 Javascript
如何通过shell脚本自动生成vue文件详解
2019/09/10 Javascript
vue中实现图片压缩 file文件的方法
2020/05/28 Javascript
DWR内存兼容及无法调用问题解决方案
2020/10/16 Javascript
vue中watch的用法汇总
2020/12/28 Vue.js
Python smallseg分词用法实例分析
2015/05/28 Python
简单谈谈Python中的json与pickle
2017/07/19 Python
Python爬虫框架scrapy实现的文件下载功能示例
2018/08/04 Python
Python从ZabbixAPI获取信息及实现Zabbix-API 监控的方法
2018/09/17 Python
使用Python 正则匹配两个特定字符之间的字符方法
2018/12/24 Python
对python中list的拷贝与numpy的array的拷贝详解
2019/01/29 Python
Python之时间和日期使用小结
2019/02/14 Python
html5表单及新增的改良元素详解
2016/06/07 HTML / CSS
Nixon手表英国官网:美国尼克松手表品牌
2020/02/10 全球购物
食品质检员岗位职责
2015/04/08 职场文书
Log4j.properties配置及其使用
2021/08/02 Java/Android
python 标准库原理与用法详解之os.path篇
2021/10/24 Python
九大龙王魂骨,山龙王留下躯干骨,榜首死的最憋屈(被捏碎)
2022/03/18 国漫
Django + Taro 前后端分离项目实现企业微信登录功能
2022/04/07 Python