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 使用技巧精萃(.net html
Apr 25 Javascript
你必须知道的JavaScript 中字符串连接的性能的一些问题
May 07 Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
Aug 02 Javascript
js canvas实现擦除效果示例代码
Apr 26 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
May 07 Javascript
JS创建Tag标签的方法详解
Jun 09 Javascript
jquery DataTable实现前后台动态分页
Jun 17 jQuery
vue中使用refs定位dom出现undefined的解决方法
Dec 21 Javascript
vue+Element-ui实现分页效果实例代码详解
Dec 10 Javascript
vue+element+Java实现批量删除功能
Apr 08 Javascript
ES6的异步终极解决方案分享
Jul 11 Javascript
IntelliJ IDEA编辑器配置vue高亮显示
Sep 26 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
php+mysql 实现身份验证代码
2010/03/24 PHP
Views rows style模板重写代码
2011/05/16 PHP
php setcookie函数的参数说明及其用法
2014/04/20 PHP
thinkphp自带验证码全面解析
2016/09/18 PHP
ThinkPHP3.2.3框架实现执行原生SQL语句的方法示例
2019/04/03 PHP
PHP设计模式(八)装饰器模式Decorator实例详解【结构型】
2020/05/02 PHP
js 学习笔记(三)
2009/12/29 Javascript
jquery CSS选择器笔记
2010/03/29 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
2013/03/25 Javascript
javascript实现获取cookie过期时间的变通方法
2014/08/14 Javascript
jQuery插件datalist实现很好看的input下拉列表
2015/07/14 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
2016/11/23 Javascript
jquery结合html实现中英文页面切换
2016/11/29 Javascript
利用jQuery来动态为属性添加或者删除属性的简单方法
2016/12/02 Javascript
Vue.js 插件开发详解
2017/03/29 Javascript
Vue组件之Tooltip的示例代码
2017/10/18 Javascript
vue-star评星组件开发实例
2018/03/01 Javascript
Vue + Elementui实现多标签页共存的方法
2019/06/12 Javascript
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
2019/09/23 Javascript
python读取Android permission文件
2013/11/01 Python
Python应用03 使用PyQT制作视频播放器实例
2016/12/07 Python
对python pandas 画移动平均线的方法详解
2018/11/28 Python
对python读取zip压缩文件里面的csv数据实例详解
2019/02/08 Python
Django Rest framework频率原理与限制
2019/07/26 Python
js正则匹配markdown里的图片标签的实现
2021/03/24 Javascript
个人自我鉴定范文
2013/10/04 职场文书
教师自荐书
2013/10/08 职场文书
委托证明的格式
2014/01/10 职场文书
学习雷锋精神演讲稿
2014/05/10 职场文书
电子商务专业毕业生求职信
2014/06/12 职场文书
社区党员志愿服务活动方案
2014/08/18 职场文书
个人工作能力自我评价
2015/03/05 职场文书
施工员岗位职责范本
2015/04/11 职场文书
对公司的意见和建议
2015/06/04 职场文书
亮剑观后感500字
2015/06/05 职场文书
2019西餐厅创业计划书范文!
2019/07/12 职场文书