基于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 获取滚动条位置等信息的函数
Sep 08 Javascript
ASP中Sub和Function的区别说明
Aug 30 Javascript
javascript 学习笔记(八)javascript对象
Apr 12 Javascript
JS修改css样式style浅谈
May 06 Javascript
javascript中的document.open()方法使用介绍
Oct 09 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
Dec 24 Javascript
javascript实现去除HTML标签的方法
Dec 26 Javascript
angularjs中回车键触发某一事件的方法
Apr 24 Javascript
利用vue + koa2 + mockjs模拟数据的方法教程
Nov 22 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
Jan 28 Javascript
你不可不知的Vue.js列表渲染详解
Oct 01 Javascript
jQuery使用jsonp实现百度搜索的示例代码
Jul 08 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
理解php Hash函数,增强密码安全
2011/02/25 PHP
php中json_encode中文编码问题分析
2011/09/13 PHP
探讨PHP中OO之静态关键字以及类常量的详解
2013/06/07 PHP
php使浏览器直接下载pdf文件的方法
2013/11/15 PHP
php $_SERVER windows系统与linux系统下的区别说明
2014/02/14 PHP
PHP上传文件参考配置大文件上传
2015/12/16 PHP
thinkphp3.x自定义Action、Model及View的简单实现方法
2016/05/19 PHP
jQuery选择头像并实时显示的代码
2010/06/27 Javascript
IE6-IE9不支持table.innerHTML的解决方法分享
2012/09/14 Javascript
JS 加入收藏夹的代码(主流浏览器通用)
2013/05/13 Javascript
让js弹出窗口居前显示的实现方法
2013/07/10 Javascript
怎么选择Javascript框架(Javascript Framework)
2013/11/22 Javascript
原生js和jQuery写的网页选项卡特效对比
2015/04/27 Javascript
微信小程序 后台登录(非微信账号)实例详解
2017/03/31 Javascript
使用axios实现上传图片进度条功能
2017/12/21 Javascript
JSON基本语法及与JavaScript的异同实例分析
2019/01/04 Javascript
记一次Vue.js混入mixin的使用(分权限管理页面)
2019/04/17 Javascript
three.js显示中文字体与tween应用详析
2021/01/04 Javascript
Python基于twisted实现简单的web服务器
2014/09/29 Python
Python文件和目录操作详解
2015/02/08 Python
利用Python脚本实现ping百度和google的方法
2017/01/24 Python
Python openpyxl 遍历所有sheet 查找特定字符串的方法
2018/12/10 Python
pyqt5 QProgressBar清空进度条的实例
2019/06/21 Python
详解python定时简单爬取网页新闻存入数据库并发送邮件
2020/11/27 Python
解决pip安装tensorflow中出现的no module named tensorflow.python 问题方法
2021/02/20 Python
25个CSS3动画按钮和菜单教程分享
2012/10/03 HTML / CSS
罗兰·穆雷官网:Roland Mouret
2018/09/28 全球购物
护理个人求职信范文
2014/01/08 职场文书
意向协议书范本
2014/04/23 职场文书
化工操作工岗位职责
2014/04/29 职场文书
暑期教师培训方案
2014/06/07 职场文书
我的中国梦口号
2014/06/16 职场文书
关于企业的执行力标语大全
2020/01/06 职场文书
用CSS3画一个爱心
2021/04/27 HTML / CSS
MongoDB使用profile分析慢查询的步骤
2021/04/30 MongoDB
python中 Flask Web 表单的使用方法
2022/05/20 Python