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 相关文章推荐
如何实现浏览器上的右键菜单
Jul 10 Javascript
文本框的字数限制功能jquery插件
Nov 24 Javascript
node在两个div之间移动,用ztree实现
Mar 06 Javascript
使用jquery局部刷新(jquery.load)从数据库取出数据
Jan 22 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
Feb 28 Javascript
bootstrap配合Masonry插件实现瀑布式布局
Jan 18 Javascript
Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
Feb 23 Javascript
Vue数据双向绑定原理及简单实现方法
May 18 Javascript
Three.js中矩阵和向量的使用教程
Mar 19 Javascript
Vue.extend实现挂载到实例上的方法
May 01 Javascript
JS实现烟花爆炸效果
Mar 10 Javascript
H5 js点击按钮复制文本到粘贴板
Nov 19 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通用分页类page.php[仿google分页]
2008/08/31 PHP
详解PHP导入导出CSV文件
2014/11/03 PHP
浅析php如何实现App常用的秒发功能
2016/08/03 PHP
关于PHP5.6+版本“No input file specified”问题的解决
2019/12/11 PHP
Javascript 对象的解释
2008/11/24 Javascript
javascript dom代码应用 简单的相册[firefox only]
2010/06/12 Javascript
javascript中比较字符串是否相等的方法
2013/07/23 Javascript
javascript检查表单数据是否改变的方法
2013/07/30 Javascript
JS动态增加删除UL节点LI及相关内容示例
2014/05/21 Javascript
JavaScript跨平台的开源框架NativeScript
2015/03/24 Javascript
jquery仿百度经验滑动切换浏览效果
2015/04/14 Javascript
浅谈Angular路由复用策略
2017/10/04 Javascript
vue使用vue-i18n实现国际化的实现代码
2018/04/08 Javascript
Mac下安装vue
2018/04/11 Javascript
angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
2018/08/17 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
2019/01/27 jQuery
Seajs源码详解分析
2019/04/02 Javascript
vue选项卡切换登录方式小案例
2019/09/27 Javascript
javascript实现点亮灯泡特效示例
2019/10/15 Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
2020/04/27 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
2020/11/20 Vue.js
[00:32]2016完美“圣”典风云人物:Maybe宣传片
2016/12/05 DOTA
理解Python中的With语句
2015/02/02 Python
目前最全的python的就业方向
2018/06/05 Python
pycharm配置pyqt5-tools开发环境的方法步骤
2019/02/11 Python
Python实现12306火车票抢票系统
2019/07/04 Python
Python安装tar.gz格式文件方法详解
2020/01/19 Python
解决django的template中如果无法引用MEDIA_URL问题
2020/04/07 Python
使用Jupyter notebooks上传文件夹或大量数据到服务器
2020/04/14 Python
Ubuntu配置Pytorch on Graph (PoG)环境过程图解
2020/11/19 Python
举例详解CSS3中的Transition
2015/07/15 HTML / CSS
判断单链表中是否存在环
2012/07/16 面试题
运动会获奖感言
2014/02/11 职场文书
施工安全生产承诺书
2014/05/23 职场文书
电影开国大典观后感
2015/06/04 职场文书
Java实现学生管理系统(IO版)
2022/02/24 Java/Android