基于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 相关文章推荐
OfflineSave离线保存代码再次发布使用说明
May 23 Javascript
js中的布尔运算符使用介绍
Nov 20 Javascript
jQuery操作select下拉框的text值和value值的方法
May 31 Javascript
JS根据年月获得当月天数的实现代码
Jul 03 Javascript
深入探讨javascript函数式编程
Oct 11 Javascript
javascript入门教程基础篇
Nov 16 Javascript
jQuery实现下拉框左右移动(全部移动,已选移动)
Apr 15 Javascript
AngularJS基础 ng-focus 指令简单示例
Aug 01 Javascript
js实现图片淡入淡出切换简易效果
Aug 22 Javascript
微信小程序实现bindtap等事件传参
Apr 08 Javascript
使用Vue调取接口,并渲染数据的示例代码
Oct 28 Javascript
vue使用element-ui实现表单验证
Dec 13 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
VOLVO车载收音机
2021/03/02 无线电
php计算数组相同值出现次数的代码(array_count_values)
2015/01/20 PHP
php使用指定编码导出mysql数据到csv文件的方法
2015/03/31 PHP
使用Huagepage和PGO来提升PHP7的执行性能
2015/11/30 PHP
PHP7 新特性详细介绍
2016/09/06 PHP
PHP简单实现二维数组赋值与遍历功能示例
2017/10/19 PHP
JavaScript基本对象
2007/01/11 Javascript
JavaScript 基础篇之对象、数组使用介绍(三)
2012/04/07 Javascript
Javascript的时间戳和php的时间戳转换注意事项
2013/04/12 Javascript
读取input:file的路径并显示本地图片的方法
2013/09/23 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
2016/04/13 Javascript
浅析JSONP技术原理及实现
2016/06/08 Javascript
详解本地Node.js服务器作为api服务器的解决办法
2017/02/28 Javascript
vue嵌套路由与404重定向实现方法分析
2018/05/04 Javascript
Vue 样式绑定的实现方法
2019/01/15 Javascript
JS监听组合按键思路及实现过程
2020/04/17 Javascript
24个ES6方法解决JS实际开发问题(小结)
2020/05/31 Javascript
python之wxPython菜单使用详解
2014/09/28 Python
Python生成器定义与简单用法实例分析
2018/04/30 Python
python将txt等文件中的数据读为numpy数组的方法
2018/12/22 Python
python抖音表白程序源代码
2019/04/07 Python
如何在Django项目中引入静态文件
2019/07/26 Python
ubuntu 18.04 安装opencv3.4.5的教程(图解)
2019/11/04 Python
Python 读取xml数据,cv2裁剪图片实例
2020/03/10 Python
Python通过zookeeper实现分布式服务代码解析
2020/07/22 Python
Python如何把字典写入到CSV文件的方法示例
2020/08/23 Python
使用python把xmind转换成excel测试用例的实现代码
2020/10/12 Python
小学生美德少年事迹
2014/02/02 职场文书
3.12植树节活动总结2014
2014/03/13 职场文书
搞笑征婚广告词
2014/03/17 职场文书
食品安全演讲稿
2014/09/01 职场文书
批评与自我批评总结
2014/10/17 职场文书
小班上学期幼儿评语
2014/12/30 职场文书
涨价通知
2015/04/23 职场文书
python 利用PyAutoGUI快速构建自动化操作脚本
2021/05/31 Python
Ruby处理CSV数据方法详解
2022/04/18 Ruby