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. 【poj1013】 Counterfeit Dollar

    http://poj.org/problem?id=1013 (题目链接) 题意 12个硬币中有1个是假的,给出3次称重结果,判断哪个硬币是假币,并且判断假币是比真币中还是比真币轻. Solution ...

  2. 树莓派启用root账户

    树莓派使用的linux是debian系统,所以树莓派启用root和debian是相同的. debian里root账户默认没有密码,但账户锁定. 当需要root权限时, 直接执行 sudo su 即可切 ...

  3. CSS 命名管理 之 BEM

    好吧,将 BEM 简单的解释为 “Block-Element-Modifier“, 其实是个不负责任的做法.鬼知道 Block 是什么啊?所以,看了一些似懂非懂的中文解释之后,自己还是得去找些英文来读 ...

  4. Linux之:Ubuntu速学笔记(2)

    撰写日期:2016-7-3 18:20:39 基本内容包括:Flash player安装.编译安装PHP.写个简单的PHP程序:Java程序(Java需要使用“javac”命令编译一下才能执行) 一. ...

  5. WPF元素可视化效果

    在WPF中设置元素的可视化效果主要用到BlurEffect类和DropShadowEffect类.(目前只学到这两个,哈哈) 1.BlurEffect类 命名空间: System.Windows.Me ...

  6. wildfly 在 jee war 外部写配置文件

    有时需要写属性文件,保存配置值,当然也可以写在数据库.这里我们用文件方式. 最简单做法: 写在wildfly的配置目录里面: File confDir = new File(System.getPro ...

  7. 3 构建Mysql+heartbeat+DRBD+LVS集群应用系统系列之heartbeat的搭建

    preface 在上节的说了mysql的搭建,这节我们在上节的基础上,继续搭建heartbeat. 安装和配置heartbeat 采用yum安装,dbmaster81和dbbackup136上都安装, ...

  8. django rest framework

    Django-Rest-Framework 教程: 4. 验证和权限 作者: Desmond Chen, 发布日期: 2014-06-01, 修改日期: 2014-06-02 到目前为止, 我们的AP ...

  9. JavaScriptCore框架介绍

    http://www.cocoachina.com/ios/20140409/8127.html 这个框架其实只是基于webkit中以C/C++实现的JavaScriptCore的一个包装,在旧版本i ...

  10. asp.net下调用Matlab生成动态链接库

    对于这次论文项目,最后在写一篇关于工程的博客,那就是在asp.net下调用matlab生成的dll动态链接库.至今关于matlab,c/c++(opencv),c#(asp.net)我总共写了4篇配置 ...