基于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 相关文章推荐
IE中直接运行显示当前网页中的图片 推荐
Aug 31 Javascript
二叉树的非递归后序遍历算法实例详解
Feb 07 Javascript
jQuery中closest()函数用法实例
Jan 07 Javascript
Jquery针对tr td的一些实用操作方法(必看篇)
Oct 05 Javascript
详解js中==与===的区别
Jan 08 Javascript
react.js 获取真实的DOM节点实例(必看)
Apr 17 Javascript
React Native实现进度条弹框的示例代码
Jul 17 Javascript
一文让你彻底搞清楚javascript中的require、import与export
Sep 24 Javascript
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
JS+H5 Canvas实现时钟效果
Jul 20 Javascript
ES6 Generator函数的应用实例分析
Jun 26 Javascript
基于mpvue的简单弹窗组件mptoast使用详解
Aug 02 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变量引用的面试题
2010/08/08 PHP
PHP 类相关函数的使用详解
2013/05/10 PHP
php ImageMagick windows下安装教程
2015/01/26 PHP
php随机显示指定文件夹下图片的方法
2015/07/13 PHP
在WordPress中安装使用视频播放器插件Hana Flv Player
2016/01/04 PHP
PHP7多线程搭建教程
2017/04/21 PHP
javascript[js]获取url参数的代码
2007/10/17 Javascript
你可能不知道的JavaScript的new Function()方法
2014/04/17 Javascript
AngularJS入门教程之Hello World!
2014/12/06 Javascript
JavaScript中模拟实现jsonp
2015/06/19 Javascript
手机端实现Bootstrap简单图片轮播效果
2016/10/13 Javascript
TypeScript学习之强制类型的转换
2016/12/27 Javascript
ie下js不执行的几种可能
2017/02/28 Javascript
浅谈Vue内置component组件的应用场景
2018/03/27 Javascript
实例分析vue循环列表动态数据的处理方法
2018/09/28 Javascript
微信小程序实现多选框功能的实例代码
2020/06/24 Javascript
利用python实现xml与数据库读取转换的方法
2017/06/17 Python
Linux CentOS7下安装python3 的方法
2018/01/21 Python
对python中的for循环和range内置函数详解
2018/04/17 Python
python 通过logging写入日志到文件和控制台的实例
2018/04/28 Python
python中文编码与json中文输出问题详解
2018/08/24 Python
详解python statistics模块及函数用法
2019/10/27 Python
python实现滑雪者小游戏
2020/02/22 Python
PyCharm License Activation激活码失效问题的解决方法(图文详解)
2020/03/12 Python
可视化pytorch 模型中不同BN层的running mean曲线实例
2020/06/24 Python
解决Python paramiko 模块远程执行ssh 命令 nohup 不生效的问题
2020/07/14 Python
详解Django中的FBV和CBV对比分析
2021/03/01 Python
毕业生精彩的自我评价分享
2013/10/06 职场文书
社区志愿者心得体会
2014/01/03 职场文书
小学后勤管理制度
2014/01/14 职场文书
总经理岗位职责范本
2014/02/02 职场文书
同志主要表现材料
2014/08/21 职场文书
三严三实对照检查材料
2014/09/22 职场文书
启迪人心的励志语录:脾气永远不要大于本事
2020/01/02 职场文书
25句企业管理语录:助你迅速打开思路,句句经典!
2020/01/14 职场文书
SQL Server使用T-SQL语句批处理
2022/05/20 SQL Server