基于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 相关文章推荐
10个新的最有前途的JavaScript框架
Mar 12 Javascript
各浏览器对link标签onload/onreadystatechange事件支持的差异分析
Apr 27 Javascript
使用jquery的ajax需要注意的地方dataType的设置
Aug 12 Javascript
三种方式获取XMLHttpRequest对象
Apr 21 Javascript
使用jquery+CSS实现控制打印样式
Dec 31 Javascript
简介JavaScript中的setDate()方法的使用
Jun 11 Javascript
javascript实现点击单选按钮链接转向对应网址的方法
Aug 12 Javascript
基于jquery实现智能提示控件intellSeach.js
Mar 17 Javascript
JS实现页面跳转参数不丢失的方法
Nov 28 Javascript
javascript 定时器工作原理分析
Dec 03 Javascript
如何编写一个d.ts文件的步骤详解
Apr 13 Javascript
详解element-ui中el-select的默认选择项问题
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绘制一条直线的方法
2015/01/24 PHP
PHP CURL 内存泄露问题解决方法
2015/02/12 PHP
Yii中特殊行为ActionFilter的使用方法示例
2020/10/18 PHP
JQuery的Alert消息框插件使用介绍
2010/10/09 Javascript
Javascript base64编码实现代码
2011/12/02 Javascript
jQuery CSS()方法改变现有的CSS样式表
2014/09/09 Javascript
再谈javascript原型继承
2014/11/10 Javascript
js+css实现导航效果实例
2015/02/10 Javascript
在JavaScript中正确引用bind方法的应用
2015/05/11 Javascript
javascript实现一个数值加法函数
2015/06/26 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
2015/08/07 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
2017/01/13 Javascript
vue3.0 搭建项目总结(详细步骤)
2019/05/20 Javascript
使用原生JS实现滚轮翻页效果的示例代码
2020/05/31 Javascript
实用的 vue tags 创建缓存导航的过程实现
2020/12/03 Vue.js
解决python写的windows服务不能启动的问题
2014/04/15 Python
对pandas中Series的map函数详解
2018/07/25 Python
Django ManyToManyField 跨越中间表查询的方法
2018/12/18 Python
python之Flask实现简单登录功能的示例代码
2018/12/24 Python
Python 项目转化为so文件实例
2019/12/23 Python
Python&amp;&amp;GDAL实现NDVI的计算方式
2020/01/09 Python
python 项目目录结构设置
2020/02/14 Python
python软件都是免费的吗
2020/06/18 Python
Django框架安装及项目创建过程解析
2020/09/14 Python
python源文件的字符编码知识点详解
2021/03/04 Python
一款纯css3实现简单的checkbox复选框和radio单选框
2014/11/05 HTML / CSS
HTML5无刷新改变当前url的代码
2017/03/15 HTML / CSS
惠普墨西哥官方商店:HP墨西哥
2016/12/01 全球购物
Nike俄罗斯官方网站:Nike RU
2021/03/05 全球购物
Java提供了哪些企业应用编程接口
2015/02/13 面试题
举例说明类变量和实例变量的区别
2016/06/30 面试题
自动化专业毕业生自荐信
2013/11/01 职场文书
2014年村委会工作总结
2014/11/24 职场文书
人才市场接收函
2015/01/30 职场文书
客服专员岗位职责范本
2015/04/07 职场文书
初中团委工作总结
2015/08/13 职场文书