基于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 相关文章推荐
常用的jQuery前端技巧收集
Dec 24 Javascript
js获取json元素数量的方法
Jan 27 Javascript
javascript中hasOwnProperty() 方法使用指南
Mar 09 Javascript
Node.js如何自动审核团队的代码
Jul 20 Javascript
Js获取当前日期时间及格式化代码
Sep 17 Javascript
JavaScript排序算法动画演示效果的实现方法
Oct 18 Javascript
解析JavaScript模仿块级作用域
Dec 29 Javascript
原生javascript实现文件异步上传的实例讲解
Oct 26 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
Mar 13 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
Dec 30 Javascript
微信 jssdk 签名错误invalid signature的解决方法
Jan 14 Javascript
jQuery HTML css()方法与css类实例详解
May 20 jQuery
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
如何开始收听短波广播
2021/03/01 无线电
php 数学运算验证码实现代码
2009/10/11 PHP
Laravel 5框架学习之用户认证
2015/04/09 PHP
PHP创建/删除/复制文件夹、文件
2016/05/03 PHP
ext checkboxgroup 回填数据解决
2009/08/21 Javascript
jquery 简单的进度条实现代码
2010/03/11 Javascript
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
2010/07/26 Javascript
JavaScript根据数据生成百分比图和柱状图的实例代码
2013/07/14 Javascript
自己实现ajax封装示例分享
2014/04/01 Javascript
javascript快速排序算法详解
2014/09/17 Javascript
jQuery简单实现仿京东分类导航层效果
2016/06/07 Javascript
JavaScript实现页面定时刷新(定时器,meta)
2016/10/12 Javascript
浅谈JS验证表单文本域输入空格的问题
2017/02/14 Javascript
JavaScript中最常见的三个面试题解析
2017/03/04 Javascript
angularjs的select使用及默认选中设置
2017/04/08 Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
2017/04/10 jQuery
Vue.js中数据绑定的语法教程
2017/06/02 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
2019/03/25 Javascript
[49:40]2018DOTA2亚洲邀请赛小组赛 A组加赛 TNC vs Newbee
2018/04/03 DOTA
python验证码识别教程之灰度处理、二值化、降噪与tesserocr识别
2018/06/04 Python
python3解析库pyquery的深入讲解
2018/06/26 Python
vue.js实现输入框输入值内容实时响应变化示例
2018/07/07 Python
解决django中ModelForm多表单组合的问题
2019/07/18 Python
Python使用Pandas对csv文件进行数据处理的方法
2019/08/01 Python
深入浅析Python 函数注解与匿名函数
2020/02/24 Python
Python3爬虫里关于识别微博宫格验证码的知识点详解
2020/07/30 Python
ABOUT YOU匈牙利:500个最受欢迎的时尚品牌
2019/07/19 全球购物
《赶海》教学反思
2014/04/20 职场文书
2014年母亲节演讲稿范文
2014/05/07 职场文书
小学生五年级大队长竞选发言稿
2014/09/12 职场文书
2015年化验员工作总结
2015/04/10 职场文书
2015年乡镇卫生院工作总结
2015/04/22 职场文书
2016年寒假见闻
2015/10/10 职场文书
《清澈的湖水》教学反思
2016/02/17 职场文书
浅谈react useEffect闭包的坑
2021/06/08 Javascript
Vue图片裁剪组件实例代码
2021/07/02 Vue.js