js简单抽奖代码


Posted in Javascript onJanuary 16, 2015

核心:js的Math对象和Array对象

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>random</title>
 <style>
  #awardListDom{width: 100%;}
 </style>
</head>
<body>
 <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>
 <script>
  /* 
  * 思路:随机抽奖,抽一个奖项便减少一个
  * Math 对象方法:http://www.w3school.com.cn/jsref/jsref_obj_math.asp
  *  -random():返回 0 ~ 1 之间的随机数。
  *  -floor():获取整数
  * 数组操作:
  *  - splice(x,y); x:起始位置, y:获取并删除个数
  */

  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>
</body>
</html>

demo:http://demo.3water.com/js/2015/choujiang/

github:https://github.com/litengdesign/award

Javascript 相关文章推荐
jQuery基本过滤选择器使用介绍
Apr 18 Javascript
Javascript 拖拽的一些高级的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
JavaScript动态提示输入框输入字数的方法
Jul 27 Javascript
每天一篇javascript学习小结(Date对象)
Nov 13 Javascript
javascript实现仿百度图片的瀑布流加载效果
Apr 20 Javascript
你有必要知道的10个JavaScript难点
Jul 25 Javascript
基于LayUI分页和LayUI laypage分页的使用示例
Aug 02 Javascript
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
15分钟深入了解JS继承分类、原理与用法
Jan 19 Javascript
jQuery实现合并表格单元格中相同行操作示例
Jan 28 jQuery
js 将线性数据转为树形的示例代码
May 28 Javascript
Javascript之datagrid查询详解
Sep 15 Javascript
JS取得绝对路径的实现代码
Jan 16 #Javascript
jQuery中scrollLeft()方法用法实例
Jan 16 #Javascript
jQuery中scrollTop()方法用法实例
Jan 16 #Javascript
jQuery中position()方法用法实例
Jan 16 #Javascript
jQuery中offset()方法用法实例
Jan 16 #Javascript
jQuery中clone()方法用法实例
Jan 16 #Javascript
jQuery中empty()方法用法实例
Jan 16 #Javascript
You might like
discuz加密解密函数使用方法和中文注释
2014/01/21 PHP
laravel 判断查询数据库返回值的例子
2019/10/11 PHP
Jquery 组合form元素为json格式,asp.net反序列化
2009/07/09 Javascript
javascript 获取表单file全路径
2009/12/31 Javascript
20款超赞的jQuery插件 Web开发人员必备
2011/02/26 Javascript
Extjs gridpanel 出现横向滚动条问题的解决方法
2011/07/04 Javascript
再谈javascript面向对象编程
2012/03/18 Javascript
jquery 获取自定义属性(attr和prop)的实现代码
2012/06/27 Javascript
javascript函数以及基础写法100多条实用整理
2013/01/13 Javascript
当自定义数据属性为json格式字符串时jQuery的data api问题探讨
2013/02/18 Javascript
JavaScript实现生成GUID(全局统一标识符)
2014/09/05 Javascript
JS中三目运算符和if else的区别分析与示例
2014/11/21 Javascript
vue实现登陆登出的实现示例
2017/09/15 Javascript
QQ跳转支付宝并自动领红包脚本(最新)
2018/06/22 Javascript
Vue 自定义指令实现一键 Copy功能
2019/09/16 Javascript
生成无限制的微信小程序码的示例代码
2019/09/20 Javascript
jdk1.8+vue elementui实现多级菜单功能
2020/09/24 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
2020/10/24 Javascript
[43:24]VG vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python socket实现简单聊天室
2018/04/01 Python
Python编程flask使用页面模版的方法
2018/12/28 Python
python实现字符串完美拆分split()的方法
2019/07/16 Python
python手写均值滤波
2020/02/19 Python
Python关于__name__属性的含义和作用详解
2020/02/19 Python
在Pycharm中安装Pandas库方法(简单易懂)
2021/02/20 Python
让IE6、IE7、IE8支持CSS3的脚本
2010/07/20 HTML / CSS
爱尔兰电子产品购物网站:Komplett.ie
2018/04/04 全球购物
全球领先的中国制造商品在线批发平台:DHgate
2020/01/28 全球购物
西班牙品牌鞋子、服装和配饰在线商店:Esdemarca
2021/02/17 全球购物
我的大学生活职业生涯规划
2014/01/02 职场文书
怎样写演讲稿
2014/01/04 职场文书
设备动力科岗位职责范本
2014/02/23 职场文书
大学同学会活动方案
2014/08/20 职场文书
关于读书的演讲稿400字
2014/08/27 职场文书
公司年会主持词范文!
2019/05/07 职场文书
超外差式晶体管收音机的组装与统调
2021/04/22 无线电