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 相关文章推荐
JavaScript效率调优经验
Jun 04 Javascript
Ajax 数据请求的简单分析
Apr 05 Javascript
JavaScript起点(严格模式深度了解)
Jan 28 Javascript
JS中引用百度地图并将百度地图的logo和信息去掉
Sep 29 Javascript
JSON字符串和对象相互转换实例分析
Jun 16 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
Jul 22 Javascript
jquery实现垂直和水平菜单导航栏
Aug 27 Javascript
jquery实现网页定位导航
Aug 23 Javascript
详解如何从零开始搭建Express+Vue开发环境
Jul 17 Javascript
微信小程序开发之自定义tabBar的实现
Sep 06 Javascript
wx-charts 微信小程序图表插件的具体使用
Aug 18 Javascript
jQuery实现朋友圈查看图片
Sep 11 jQuery
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
hadoop常见错误以及处理方法详解
2013/06/19 PHP
PHP多例模式介绍
2013/06/24 PHP
php操作(删除,提取,增加)zip文件方法详解
2015/03/12 PHP
PHP实现无限分类的实现方法
2016/11/14 PHP
基于jquery的让textarea自适应高度的插件
2010/08/03 Javascript
jQuery 关于伪类选择符的使用说明
2013/04/24 Javascript
JSON 数字排序多字段排序介绍
2013/09/18 Javascript
JavaScript中for..in循环陷阱介绍
2013/11/12 Javascript
js数组依据下标删除元素
2015/04/14 Javascript
简单纯js实现点击切换TAB标签实例
2015/08/23 Javascript
Jquery-1.9.1源码分析系列(十一)之DOM操作
2015/11/25 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
2016/03/05 Javascript
原生js实现百叶窗效果及原理介绍
2016/04/12 Javascript
JavaScript获取当前url根目录(路径)
2016/06/17 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
2016/08/24 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
2016/11/22 Javascript
浅析script标签中的defer与async属性
2016/11/30 Javascript
了解VUE的render函数的使用
2017/06/08 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
2017/07/21 Javascript
官方推荐react-navigation的具体使用详解
2018/05/08 Javascript
详解nodejs 配置文件处理方案
2019/01/02 NodeJs
vue从一个页面跳转到另一个页面并携带参数的解决方法
2019/08/12 Javascript
详解vite2.0配置学习(typescript版本)
2021/02/25 Javascript
[02:55]DOTA2英雄基础教程 发条技师
2013/12/04 DOTA
[59:48]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第一场 1月26日
2021/03/11 DOTA
跟老齐学Python之永远强大的函数
2014/09/14 Python
html5 sessionStorage会话存储_动力节点Java学院整理
2017/07/06 HTML / CSS
美国职棒大联盟官方网上商店:MLBShop.com
2017/11/12 全球购物
电脑教师的教学自我评价
2013/11/26 职场文书
前台接待员岗位职责
2014/01/02 职场文书
出纳工作岗位责任制
2014/02/02 职场文书
安全横幅标语
2014/06/09 职场文书
个人委托书范本
2014/09/13 职场文书
党的群众路线调研报告
2014/11/03 职场文书
2015最新民情日记范文
2015/06/26 职场文书
浅析Python中的套接字编程
2021/06/22 Python