JS抽奖功能代码
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抽奖功能代码的更多相关文章
- html和js基础功能代码备份
1)贴图:<img src="图片地址">2)加入连接:<a href="所要连接的相关地址">写上你想写的字</a> 3) ...
- JS 打印功能代码可实现打印预览、打印设置等
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or ...
- 原生JS实现购物车结算功能代码+zepto版
html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
- js经常使用功能代码
js经常使用功能代码(持续更新): 1---折叠与展开 <input id="btnDisplay" type="button" class=" ...
- js 抽奖转盘实现
今天用js实现转盘抽奖功能,从后台返回的值可以固定转盘选择停止的任意位置 实现代码如下: js: <script> , i = ;//auto:时间对象 count:计数器 ,i : 计数 ...
- jquery实现简单抽奖功能
一直纠结要怎么用jquery实现抽奖功能,看别人很多都是用flash制作的,找了很多资料,最终找到一个比较适合需求的,我做了些许调整,以下是代码展示(复制下来可以直接使用). 先上图:
- JS函数 -- 功能,语法,返回值,匿名函数,自调用匿名函数,全局变量与局部变量,arguments的使用
“JavaScript设计得最出色的就是它的函数的实现.” -- <JavaScript语言精粹> 函数包含一组语句,它们是JS的基础模块单元,用于指定对象的行为.一般来说,所谓编程,就是 ...
- 自己封装的JS分页功能[用于搭配后台使用]
* 2016.7.03 修复bug,优化代码逻辑 * 2016.5.25 修复如果找不到目标对象的错误抛出. * 2016.5.11 修复当实际页数(pageNumber)小于生成的页码间隔数时的bu ...
- js抽奖跑马灯程序
js抽奖跑马灯程序 点击下载代码
随机推荐
- 【poj3241】 Object Clustering
http://poj.org/problem?id=3241 (题目链接) MD被坑了,看到博客里面说莫队要写曼哈顿最小生成树,我就写了一个下午..结果根本没什么关系.不过还是把博客写了吧. 转自:h ...
- 通过VMwarek可以安装Android_x86
Android也能安装到VMware上,不过内核是x86的. Android_x86下载资源:http://www.x86android.com/portal.php VMware版本>=12 ...
- Mysql Index、B Tree、B+ Tree、SQL Optimization
catalog . 引言 . Mysql索引 . Mysql B/B+ Tree . Mysql SQL Optimization . MySQL Query Execution Process 1. ...
- lua中的table、stack和registery
ok,前面准备给一个dll写wrapper,写了篇日志,看似写的比较明白了,但是其实有很多米有弄明白的.比如PIL中使用的element,key,tname,field这些,还是比较容易混淆的.今天正 ...
- Hackerrank Going to the Office
传送门 Problem Statement Ms.Kox enjoys her job, but she does not like to waste extra time traveling to ...
- WCF入门
一.概述 Windows Communication Foundation(WCF)是由微软发展的一组数据通信的应用程序开发接口,可以翻译为Windows通讯接口,它是.NET框架的一部分.由 .NE ...
- POJ 3468 A Simple Problem with Integers(线段树/区间更新)
题目链接: 传送门 A Simple Problem with Integers Time Limit: 5000MS Memory Limit: 131072K Description Yo ...
- [Android]加密技术
对称加密无论是加密还是解密都使用同一个key,而非对称加密需要两个key(public key和private key).使用public key对数据进行加密,必须使用private key对数据进 ...
- K米APP----案例分析
K米APP----案例分析 第一部分 调研,评测 第一次上手体验 软件的美工做得不错,功能排版很清楚,用户很容易上手,不至于用户不知道怎么用这个APP点歌 软件最主要的功能是KTV的点歌功能,这个功能 ...
- Beta版本冲刺第五天 12.11
一.站立式会议照片: 二.项目燃尽图: Android端 后台 三.项目进展: 成 员 昨天完成任务 今天完成任务 明天要做任务 问题困难 心得体会 胡泽善 管理员驳回招聘的理由的填写和查看 邮箱验证 ...