HTML

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

JS

  1. <script>
  2. function random(min,max){
  3. return Math.floor(min+Math.random()*(max-min));
  4. }
  5. var awardListDom=document.getElementById("awardListDom"),
  6. num=document.getElementById("num"),
  7. submit=document.getElementById("submit");
  8. var awardList=["一等奖","二等奖","二等奖","三等奖","三等奖","三等奖","鼓励奖","鼓励奖","鼓励奖","鼓励奖","谢谢参与","谢谢参与","谢谢参与","谢谢参与","谢谢参与","谢谢参与"];
  9.  
  10. awardListDom.value=awardList;
  11. submit.onclick=function(){
  12. //引用数组
  13. var oldArray=awardList;
  14. var rNum=random(0,oldArray.length);
  15.  
  16. if(oldArray.length<1){
  17. awardListDom.value="活动结束";
  18. num.value="活动结束";
  19. }
  20. else{
  21. num.value=oldArray[rNum];
  22. oldArray.splice(rNum,1);
  23. awardListDom.value=oldArray;
  24. }
  25. }
  26. </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. 【poj3241】 Object Clustering

    http://poj.org/problem?id=3241 (题目链接) MD被坑了,看到博客里面说莫队要写曼哈顿最小生成树,我就写了一个下午..结果根本没什么关系.不过还是把博客写了吧. 转自:h ...

  2. 通过VMwarek可以安装Android_x86

    Android也能安装到VMware上,不过内核是x86的. Android_x86下载资源:http://www.x86android.com/portal.php VMware版本>=12 ...

  3. Mysql Index、B Tree、B+ Tree、SQL Optimization

    catalog . 引言 . Mysql索引 . Mysql B/B+ Tree . Mysql SQL Optimization . MySQL Query Execution Process 1. ...

  4. lua中的table、stack和registery

    ok,前面准备给一个dll写wrapper,写了篇日志,看似写的比较明白了,但是其实有很多米有弄明白的.比如PIL中使用的element,key,tname,field这些,还是比较容易混淆的.今天正 ...

  5. Hackerrank Going to the Office

    传送门 Problem Statement Ms.Kox enjoys her job, but she does not like to waste extra time traveling to ...

  6. WCF入门

    一.概述 Windows Communication Foundation(WCF)是由微软发展的一组数据通信的应用程序开发接口,可以翻译为Windows通讯接口,它是.NET框架的一部分.由 .NE ...

  7. POJ 3468 A Simple Problem with Integers(线段树/区间更新)

    题目链接: 传送门 A Simple Problem with Integers Time Limit: 5000MS     Memory Limit: 131072K Description Yo ...

  8. [Android]加密技术

    对称加密无论是加密还是解密都使用同一个key,而非对称加密需要两个key(public key和private key).使用public key对数据进行加密,必须使用private key对数据进 ...

  9. K米APP----案例分析

    K米APP----案例分析 第一部分 调研,评测 第一次上手体验 软件的美工做得不错,功能排版很清楚,用户很容易上手,不至于用户不知道怎么用这个APP点歌 软件最主要的功能是KTV的点歌功能,这个功能 ...

  10. Beta版本冲刺第五天 12.11

    一.站立式会议照片: 二.项目燃尽图: Android端 后台 三.项目进展: 成 员 昨天完成任务 今天完成任务 明天要做任务 问题困难 心得体会 胡泽善 管理员驳回招聘的理由的填写和查看 邮箱验证 ...