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. 【codevs3945】 完美拓印

    http://codevs.cn/problem/3945/ (题目链接) 题意 给出一个诡异的图形,再给出一个歪七扭八的线,问图形上下两条边与线的匹配→_→ Solution 前后求差然后KMP,这 ...

  2. JSF JQUERY 使用datepicker

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

  3. jQuery基础(1) -- jQuery 语法

    通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行"操作"(actions).jQuery 语法jQuery 语法是通过选取 HTML 元素,并对选取 ...

  4. WSAStartup

    WSAStartup,是Windows Sockets Asynchronous的启动命令.Windows下的网络编程接口软件 Winsock1 或 Winsock2 里面的一个命令. 外文名 WSA ...

  5. 10月20日MySQL数据库作业解析

    设有一数据库,包括四个表:学生表(Student).课程表(Course).成绩表(Score)以及教师信息表(Teacher).四个表的结构分别如表1-1的表(一)~表(四)所示,数据如表1-2的表 ...

  6. Java数据结构——优先级队列

    //================================================= // File Name : PriorityQueue_demo //------------ ...

  7. Nginx:Pitfalls and Common Mistakes

    New and old users alike can run into a pitfall. Below we outline issues that we see frequently as we ...

  8. FCC上的初级算法题

    核心提示:FCC的算法题一共16道.跟之前简单到令人发指的基础题目相比,难度是上了一个台阶.主要涉及初步的字符串,数组等运算.仍然属于基础的基础,官方网站给出的建议完成时间为50小时,超出了之前所有非 ...

  9. jquery实现图片预加载

    使用jquery实现图片预加载提高页面加载速度和用户体,本就为大家详细分析jquery图片预加载的实现原理. 什么时候使用图片预加载? 如果页面使用了很多不是最初加载便可见的图片,有必要进行预加载: ...

  10. Robot Framework--09 分支与循环的用法

    转自:http://blog.csdn.net/tulituqi/article/details/8038923 一.分支 在Robotframework2.7.4之前的版本,我们要想写IF比较容易, ...