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 相关文章推荐
一个小型js框架myJSFrame附API使用帮助
Jun 28 Javascript
javascript基础第一章 JavaScript与用户端
Jul 22 Javascript
JQuery打造省市下拉框联动效果
May 18 Javascript
JavaScript从数组中删除指定值元素的方法
Mar 18 Javascript
jQuery基于muipicker实现仿ios时间选择
Feb 22 Javascript
canvas简单快速的实现知乎登录页背景效果
May 08 Javascript
JavaScript实现HTML5游戏断线自动重连的方法
Sep 18 Javascript
Vue完整项目构建(进阶篇)
Feb 10 Javascript
vue自动路由-单页面项目(非build时构建)
Apr 30 Javascript
node.js使用fs读取文件出错的解决方案
Oct 23 Javascript
js实现无刷新监听URL的变化示例代码详解
Jun 03 Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
Jun 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
使用php实现下载生成某链接快捷方式的解决方法
2013/05/07 PHP
Laravel框架表单验证详解
2014/09/04 PHP
ThinkPHP表单令牌错误的相关解决方法分析
2016/05/20 PHP
PHP实现在数据库百万条数据中随机获取20条记录的方法
2017/04/19 PHP
网站404页面3秒后跳到首页的实例代码
2013/08/16 Javascript
js转化毫秒为时间格式代码
2014/04/10 Javascript
NodeJS Web应用监听sock文件实例
2015/02/18 NodeJs
通过伪协议解决父页面与iframe页面通信的问题
2015/04/05 Javascript
jQuery带进度条全屏图片轮播特效代码分享
2020/06/28 Javascript
详解JavaScript对象类型
2016/06/16 Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
2016/08/31 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
2016/11/13 Javascript
详解vuex结合localstorage动态监听storage的变化
2018/05/03 Javascript
vue2.0 + ele的循环表单及验证字段方法
2018/09/18 Javascript
Layer+Echarts构建弹出层折线图的方法
2019/09/25 Javascript
vue动态设置页面title的方法实例
2020/08/23 Javascript
搭建vscode+vue环境的详细教程
2020/08/31 Javascript
前端 javascript 实现文件下载的示例
2020/11/24 Javascript
[46:09]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第三场
2014/05/26 DOTA
[59:48]LGD vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
详解Django的CSRF认证实现
2018/10/09 Python
对Python实现简单的API接口实例讲解
2018/12/10 Python
使用Python刷淘宝喵币(低阶入门版)
2019/10/30 Python
Python netmiko模块的使用
2020/02/14 Python
详解Python 实现 ZeroMQ 的三种基本工作模式
2020/03/24 Python
python 实现简单的计算器(gui界面)
2020/11/11 Python
eBay奥地利站:eBay.at
2019/07/24 全球购物
全球采购的街头服饰和帽子:Urban Excess
2020/10/28 全球购物
Electric官网:美国高级眼镜和配件品牌
2020/06/04 全球购物
本科生个人求职自荐信
2013/09/26 职场文书
四好少年事迹材料
2014/01/12 职场文书
个人四风问题整改措施
2014/10/24 职场文书
入党积极分子半年考察意见
2015/06/02 职场文书
Nginx配置Https安全认证的实现
2021/05/26 Servers
关于PostgreSQL JSONB的匹配和交集问题
2021/09/14 PostgreSQL
Mongodb 迁移数据块的流程介绍分析
2022/04/18 MongoDB