基于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 相关文章推荐
prototype class详解
Sep 07 Javascript
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
Mar 10 Javascript
javascript中的原型链深入理解
Feb 24 Javascript
微信小程序 触控事件详细介绍
Oct 17 Javascript
微信小程序canvas写字板效果及实例
Jun 15 Javascript
详解微信小程序 template添加绑定事件
Jun 23 Javascript
Angular中自定义Debounce Click指令防止重复点击
Jul 26 Javascript
axios取消请求的实践记录分享
Sep 26 Javascript
详解实现一个通用的“划词高亮”在线笔记功能
Apr 23 Javascript
微信小程序非跳转式组件授权登录的方法示例
May 22 Javascript
node中实现删除目录的几种方法
Jun 24 Javascript
javascript实现切割轮播效果
Nov 28 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
php实现文件下载代码分享
2014/08/19 PHP
js判断两个日期是否相等的方法
2013/09/10 Javascript
js动态设置div的值下例子
2013/10/29 Javascript
JS 实现列表与多选框选择附预览动画
2014/10/29 Javascript
jQuery支持动态参数将函数绑定到事件上的方法
2015/03/17 Javascript
使用jquery动态加载Js文件和Css文件
2015/10/24 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
2015/12/11 Javascript
JS获取鼠标坐标位置实例分析
2016/01/20 Javascript
第二章之Bootstrap 页面排版样式
2016/04/25 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
2017/08/04 Javascript
深入浅析Vue中的Prop
2018/06/10 Javascript
移动端如何用下拉刷新的方式实现上拉加载
2018/12/10 Javascript
微信小程序request请求封装,验签代码实例
2019/12/04 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
2020/04/11 Javascript
vue 判断元素内容是否超过宽度的方式
2020/07/29 Javascript
[49:11]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.20
2020/12/23 DOTA
Python应用03 使用PyQT制作视频播放器实例
2016/12/07 Python
Python从单元素字典中获取key和value的实例
2018/12/31 Python
Python WEB应用部署的实现方法
2019/01/02 Python
opencv调整图像亮度对比度的示例代码
2019/09/27 Python
Python3 使用map()批量的转换数据类型,如str转float的实现
2019/11/29 Python
python实现图像全景拼接
2020/03/27 Python
安装python3.7编译器后如何正确安装opnecv的方法详解
2020/06/16 Python
Python 创建TCP服务器的方法
2020/07/28 Python
html5 Canvas画图教程(1)—画图的基本常识
2013/01/09 HTML / CSS
Gap工厂店:Gap Factory
2017/11/02 全球购物
阿玛尼美妆俄罗斯官网:Giorgio Armani Beauty RU
2020/07/19 全球购物
Java方面的关于数组和继承的笔面试题
2015/09/18 面试题
诚信贷款承诺书
2014/05/30 职场文书
个人主要事迹材料
2014/08/26 职场文书
博士生专家推荐信
2014/09/26 职场文书
2015年学校安全工作总结
2015/04/22 职场文书
五年级语文教学反思
2016/03/03 职场文书
六年级语文教学反思
2016/03/03 职场文书
一篇合格的广告文案,其主要目的是什么?
2019/07/12 职场文书
详解TypeScript中的类型保护
2021/04/29 Javascript