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 相关文章推荐
Node.js实现在目录中查找某个字符串及所在文件
Sep 03 Javascript
使用JavaScript为Kindeditor自定义按钮增加Audio标签
Mar 18 Javascript
javascript的列表切换【实现代码】
May 03 Javascript
JS前端加密算法示例
Dec 22 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
Jan 12 Javascript
Angularjs中使用指令绑定点击事件的方法
Mar 30 Javascript
使用html+js+css 实现页面轮播图效果(实例讲解)
Sep 21 Javascript
jquery ajax异步提交表单数据的方法
Oct 27 jQuery
JS+canvas画一个圆锥实例代码
Dec 13 Javascript
vue-router+nginx 非根路径配置方法
Jun 30 Javascript
详解javascript appendChild()的完整功能
Aug 18 Javascript
vue.js中ref及$refs的使用方法解析
Oct 08 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
德生PL990的分析评价
2021/03/02 无线电
古巴咖啡 Cubita琥爵咖啡 独特的加勒比海风味咖啡
2021/03/06 新手入门
实例讲解PHP面向对象之多态
2014/08/20 PHP
php邮箱地址正则表达式验证
2015/11/13 PHP
php实现socket推送技术的示例
2017/12/20 PHP
基于Jquery的标签智能验证实现代码
2010/12/27 Javascript
jquery控制左右箭头滚动图片列表的实例
2013/05/20 Javascript
Node调试工具JSHint的安装及配置教程
2014/05/27 Javascript
吐槽一下我所了解的Node.js
2014/10/08 Javascript
node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用
2014/11/04 Javascript
详解JavaScript的Polymer框架中的通知交互
2015/07/29 Javascript
jQuery实现的背景动态变化导航菜单效果
2015/08/24 Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
2017/09/20 jQuery
记一次webpack3升级webpack4的踩坑经历
2018/06/12 Javascript
15个顶级开源JavaScript框架和库
2018/10/10 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
2019/10/17 Javascript
[01:24]2014DOTA2 TI第二日 YYF表示这届谁赢都有可能
2014/07/11 DOTA
Python编程之属性和方法实例详解
2015/05/19 Python
浅谈Python对内存的使用(深浅拷贝)
2018/01/17 Python
python链接oracle数据库以及数据库的增删改查实例
2018/01/30 Python
Python lambda函数基本用法实例分析
2018/03/16 Python
Python subprocess模块功能与常见用法实例详解
2018/06/28 Python
python实现Flappy Bird源码
2018/12/24 Python
python with (as)语句实例详解
2020/02/04 Python
Django media static外部访问Django中的图片设置教程
2020/04/07 Python
解决echarts中饼图标签重叠的问题
2020/05/16 Python
python3 循环读取excel文件并写入json操作
2020/07/14 Python
Python环境搭建过程从安装到Hello World
2021/02/05 Python
a标签下载链接的简单实现
2016/09/13 HTML / CSS
Urban Outfitters德国官网:美国跨国生活方式零售公司
2018/05/21 全球购物
什么是重载?CTS、CLS和CLR分别做何解释
2012/05/06 面试题
日语系毕业生推荐信
2013/11/11 职场文书
师恩难忘教学反思
2014/04/27 职场文书
建筑结构施工求职信
2014/07/11 职场文书
2014个人年度工作总结范文
2014/12/24 职场文书
写作技巧:如何撰写一份优秀的营销策划书
2019/08/13 职场文书