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中的数学函数集合
May 08 Javascript
JS 精确统计网站访问量的实例代码
Jul 05 Javascript
JS OffsetParent属性深入解析
Jan 13 Javascript
jQuery 复合选择器应用的几个例子
Sep 11 Javascript
JavaScript中toString()方法的使用详解
Jun 05 Javascript
jQuery获取页面及个元素高度、宽度的总结——超实用
Jul 28 Javascript
H5移动端适配 Flexible方案
Oct 24 Javascript
SelecT下拉框选中和取值的解决方法
Nov 22 Javascript
js实现五星评价功能
Mar 08 Javascript
JS实现简易的图片拖拽排序实例代码
Jun 09 Javascript
OkHttp踩坑随笔为何 response.body().string() 只能调用一次
Jan 08 Javascript
vue调用本地摄像头实现拍照功能
Aug 14 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
再说下636单管机
2021/03/02 无线电
在Debian系统下配置LNMP的教程
2015/07/09 PHP
PHP curl 或 file_get_contents 获取需要授权页面的方法
2017/05/05 PHP
PHP流Streams、包装器wrapper概念与用法实例详解
2017/11/17 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
PHP架构及原理知识点详解
2019/12/22 PHP
js 页面传参数时 参数值含特殊字符的问题
2009/12/13 Javascript
javascript实现画不相交的圆
2015/04/07 Javascript
C++中的string类的用法小结
2015/08/07 Javascript
jQuery同步提交示例代码
2015/12/12 Javascript
jquery form表单获取内容以及绑定数据
2016/02/24 Javascript
基于jQuery插件实现点击小图显示大图效果
2016/05/11 Javascript
js实现页面刷新滚动条位置不变
2016/11/27 Javascript
Bootstrap如何激活导航状态
2017/03/22 Javascript
详解微信小程序 template添加绑定事件
2017/06/23 Javascript
vue的基本用法与常见指令
2017/08/15 Javascript
AngularJS实现的select二级联动下拉菜单功能示例
2017/10/25 Javascript
js Element Traversal规范中的元素遍历方法
2018/04/19 Javascript
react-native动态切换tab组件的方法
2018/07/07 Javascript
express 项目分层实践详解
2018/12/10 Javascript
使用apifm-wxapi快速开发小程序过程详解
2019/08/05 Javascript
vue-router 中 meta的用法详解
2019/11/01 Javascript
[40:19]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.18
2020/12/19 DOTA
TensorBoard 计算图的查看方式
2020/02/15 Python
python绘制雷达图实例讲解
2021/01/03 Python
大学学习生活感言
2014/01/18 职场文书
医科大学毕业生自荐信
2014/02/03 职场文书
幼儿园师德演讲稿
2014/05/06 职场文书
情况说明书格式范文
2014/05/06 职场文书
社区综治宣传月活动总结
2014/07/02 职场文书
集团财务总监岗位职责
2015/04/03 职场文书
美丽心灵观后感
2015/06/01 职场文书
办公室主任岗位竞聘书
2015/09/15 职场文书
初一数学教学反思
2016/02/17 职场文书
HR必备:销售经理聘用合同范本
2019/08/21 职场文书
python 解决微分方程的操作(数值解法)
2021/05/26 Python