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基本对象
Jan 11 Javascript
javascript 进阶篇1 正则表达式,cookie管理,userData
Mar 14 Javascript
JavaScript中合并数组的N种方法
Sep 16 Javascript
使用JQuery实现Ctrl+Enter提交表单的方法
Oct 22 Javascript
javascript实现全角转半角的方法
Jan 23 Javascript
JS使用正则实现去掉字符串左右空格的方法
Dec 27 Javascript
jQuery 全选 全不选 事件绑定的实现代码
Jan 23 Javascript
Javascript 实现匿名递归的实例代码
May 25 Javascript
基于require.js的使用(实例讲解)
Sep 07 Javascript
浅谈vux之x-input使用以及源码解读
Nov 04 Javascript
vue列表单项展开收缩功能之this.$refs的详解
May 05 Javascript
element-ui table组件如何使用render属性的实现
Nov 04 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
thinkPHP5分页功能实现方法分析
2017/10/25 PHP
Thinkphp5.0 框架的请求方式与响应方式分析
2019/10/14 PHP
Yii 框架使用数据库(databases)的方法示例
2020/05/19 PHP
js获取元素在浏览器中的绝对位置
2010/07/24 Javascript
js运动框架_包括图片的淡入淡出效果
2013/05/11 Javascript
详解JavaScript表单验证(E-mail 验证)
2016/03/31 Javascript
浅谈jQuery 选择器和dom操作
2016/06/07 Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
2016/10/14 Javascript
原生javascript上传图片带进度条【实例分享】
2017/04/06 Javascript
微信小程序实现给循环列表添加点击样式实例
2017/04/26 Javascript
微信小程序 共用变量值的实现
2017/07/12 Javascript
vue实现点击按钮下载文件功能
2019/10/11 Javascript
javascript实现简易的计算器
2020/01/17 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
2020/08/03 Javascript
OpenLayers3加载常用控件使用方法详解
2020/09/25 Javascript
[31:29]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第一场 12.20
2020/12/23 DOTA
python脚本内运行linux命令的方法
2015/07/02 Python
利用python程序帮大家清理windows垃圾
2017/01/15 Python
在centos7中分布式部署pyspider
2017/05/03 Python
python基础教程项目五之虚拟茶话会
2018/04/02 Python
python pandas中DataFrame类型数据操作函数的方法
2018/04/08 Python
《与孩子一起学编程》python自测题
2018/05/27 Python
Python内置类型性能分析过程实例
2020/01/29 Python
Pycharm pyuic5实现将ui文件转为py文件,让UI界面成功显示
2020/04/08 Python
python读取hdfs上的parquet文件方式
2020/06/06 Python
总经理司机岗位职责
2014/02/06 职场文书
简单租房协议书
2014/04/09 职场文书
阅兵口号
2014/06/19 职场文书
机械机修工岗位职责
2014/08/03 职场文书
毕业生实习证明
2014/09/19 职场文书
税务干部群众路线教育实践活动自我剖析材料
2014/09/21 职场文书
2015国庆66周年宣传语
2015/07/14 职场文书
小程序实现筛子抽奖
2021/05/26 Javascript
Python如何导出导入所有依赖包详解
2021/06/08 Python
2022新作动画《福星小子》释出宣传影片 加入内田真礼&宫野真守配音演出
2022/04/08 日漫
科学家测试在太空中培育人造肉,用于未来太空旅行
2022/04/29 数码科技