HTML

<label for="awardListDom">奖项列表</label><br>
<input type="text" value="" id="awardListDom"> <br>
<label for="num">抽到的奖</label><br>
<input type="text" value="" id="num"> <br>
<button id="submit">开始抽奖</button>

JS

<script>
function random(min,max){
return Math.floor(min+Math.random()*(max-min));
}
var awardListDom=document.getElementById("awardListDom"),
num=document.getElementById("num"),
submit=document.getElementById("submit");
var awardList=["一等奖","二等奖","二等奖","三等奖","三等奖","三等奖","鼓励奖","鼓励奖","鼓励奖","鼓励奖","谢谢参与","谢谢参与","谢谢参与","谢谢参与","谢谢参与","谢谢参与"]; awardListDom.value=awardList;
submit.onclick=function(){
//引用数组
var oldArray=awardList;
var rNum=random(0,oldArray.length); if(oldArray.length<1){
awardListDom.value="活动结束";
num.value="活动结束";
}
else{
num.value=oldArray[rNum];
oldArray.splice(rNum,1);
awardListDom.value=oldArray;
}
}
</script>

核心:

js的Math对象和Array对象

思路:

1.随机抽奖,抽一个奖项便减少一个 2.Math 对象方法:http://www.w3school.com.cn/jsref/jsref_obj_math.asp 3.-random():返回 0 ~ 1 之间的随机数. 4. -floor():获取整数

数组操作:

- splice(x,y); x:起始位置, y:获取并删除个数

  

JS抽奖功能代码的更多相关文章

  1. html和js基础功能代码备份

    1)贴图:<img src="图片地址">2)加入连接:<a href="所要连接的相关地址">写上你想写的字</a> 3) ...

  2. JS 打印功能代码可实现打印预览、打印设置等

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or ...

  3. 原生JS实现购物车结算功能代码+zepto版

    html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  4. js经常使用功能代码

    js经常使用功能代码(持续更新): 1---折叠与展开 <input id="btnDisplay" type="button" class=" ...

  5. js 抽奖转盘实现

    今天用js实现转盘抽奖功能,从后台返回的值可以固定转盘选择停止的任意位置 实现代码如下: js: <script> , i = ;//auto:时间对象 count:计数器 ,i : 计数 ...

  6. jquery实现简单抽奖功能

    一直纠结要怎么用jquery实现抽奖功能,看别人很多都是用flash制作的,找了很多资料,最终找到一个比较适合需求的,我做了些许调整,以下是代码展示(复制下来可以直接使用). 先上图:

  7. JS函数 -- 功能,语法,返回值,匿名函数,自调用匿名函数,全局变量与局部变量,arguments的使用

    “JavaScript设计得最出色的就是它的函数的实现.” -- <JavaScript语言精粹> 函数包含一组语句,它们是JS的基础模块单元,用于指定对象的行为.一般来说,所谓编程,就是 ...

  8. 自己封装的JS分页功能[用于搭配后台使用]

    * 2016.7.03 修复bug,优化代码逻辑 * 2016.5.25 修复如果找不到目标对象的错误抛出. * 2016.5.11 修复当实际页数(pageNumber)小于生成的页码间隔数时的bu ...

  9. js抽奖跑马灯程序

    js抽奖跑马灯程序 点击下载代码

随机推荐

  1. Android成长日记-数据存储之SQLite[2]

    Part one: 首先看这样一段代码 SQLiteDatabase db=openOrCreateDatabase("SQLDemo.db", MODE_PRIVATE,null ...

  2. C#如何在子窗体获取父窗体的实例

    在子窗体可以使用this.Owner来获取父窗体的实例

  3. Scala implicit

    Scala implicit implicit基本含义 在Scala中有一个关键字是implicit, 之前一直不知道这个货是干什么的,今天整理了一下. 我们先来看一个例子: def display( ...

  4. select 1 from dual 中的1表示的含义

    select 1 from dual   在这条sql语句中的1代表什么意思?查出来是个什么结果?   其实: select 1 from table; select anycol(目的表集合中的任意 ...

  5. .net图片验证码生成、点击刷新及验证输入是否正确

    ①创建ValidateCode.aspx,在ValidateCode.aspx.cs中加入如下代码.生成验证码图片,在页面上输出,输出jpeg格式. protected void Page_Load( ...

  6. phpstorm取消自动保存,修改快捷键并标识修改的文件为星星标记

    编辑时间: 2016-8-3 15:15:37 个人通过使用,发现PhpStorm的确是 编辑PHP 的神器,提供用户效率,提供智能代码补全,快速导航以及即时错误检查. 不过,让我用起来不爽的是,它会 ...

  7. JSP实现数据传递与保存

    业务逻辑: 1.登陆login.jsp 2.判断登陆是否成功check.jsp 3.登陆成功页面newsDetail.jsp 4.登陆失败转发到login.jsp 代码如下: <%@ page ...

  8. Beta Daily Scrum 第三天

    [目录] 1.任务进度 2.困难及解决 3.燃尽图 4.代码check-in 5.总结 1. 任务进度 学号 今日完成 明日完成 612 初步完成成就界面的统计图表 继续编写成就界面的图表 615 白 ...

  9. JSF JQUERY 使用datepicker

    不推荐使用.可以用primefaces的p:Calendar替代,更换控制使用. 简单使用jquery的datepicker示例: <!doctype html> <html lan ...

  10. gnuplot conditional plotting: plot col A:col B if col C == x

    http://stackoverflow.com/questions/6564561/gnuplot-conditional-plotting-plot-col-acol-b-if-col-c-x H ...