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 相关文章推荐
IE浏览器兼容Firefox的JS脚本的代码
Oct 23 Javascript
基于jquery实现表格无刷新分页
Jan 07 Javascript
javascript中去除数组重复元素的实现方法【实例】
Apr 12 Javascript
利用vue写todolist单页应用
Dec 15 Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
Jul 25 Javascript
vue2里面ref的具体使用方法
Oct 27 Javascript
使用Node搭建reactSSR服务端渲染架构
Aug 30 Javascript
vue路由对不同界面进行传参及跳转的总结
Apr 20 Javascript
Javascript数组方法reduce的妙用之处分享
Jun 10 Javascript
layui禁用侧边导航栏点击事件的解决方法
Sep 25 Javascript
详解Vue3 Composition API中的提取和重用逻辑
Apr 29 Javascript
vue实现倒计时功能
Mar 24 Vue.js
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
DIY一个适配电脑声卡的动圈话筒放大器
2021/03/02 无线电
php自定义session示例分享
2014/04/22 PHP
通过php修改xml文档内容的方法
2015/01/23 PHP
解决php扩展安装不生效问题
2019/10/25 PHP
javascript的trim,ltrim,rtrim自定义函数
2008/09/21 Javascript
文本框的字数限制功能jquery插件
2009/11/24 Javascript
javascript数组去掉重复
2011/05/12 Javascript
JQuery获取当前屏幕的高度宽度的实现代码
2011/07/12 Javascript
jquery批量设置属性readonly和disabled的方法
2014/01/24 Javascript
Js Jquery创建一个弹出层可加载一个页面
2014/05/08 Javascript
jquery淡入淡出效果简单实例
2016/01/14 Javascript
Bootstrap编写导航栏和登陆框
2016/05/30 Javascript
JS获取html元素的标记名实现方法
2016/10/08 Javascript
jquery实现焦点轮播效果
2017/02/23 Javascript
jquery网页加载进度条的实现
2017/06/01 jQuery
详解webpack-dev-server的简单使用
2018/04/02 Javascript
React中的render何时执行过程
2018/04/13 Javascript
JavaScript事件冒泡与事件捕获实例分析
2018/08/01 Javascript
Nuxt配合Node在实际生产中的应用详解
2018/08/07 Javascript
vue与原生app的对接交互的方法(混合开发)
2018/11/28 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
2019/05/30 Javascript
nodejs各种姿势断点调试的方法
2020/06/18 NodeJs
JavaScript实时更新当前的时间的示例代码
2020/07/15 Javascript
Vue组件通信$attrs、$listeners实现原理解析
2020/09/03 Javascript
vue下载二进制流图片操作
2020/10/26 Javascript
JS时间戳与日期格式互相转换的简单方法示例
2021/01/30 Javascript
Python实现保证只能运行一个脚本实例
2015/06/24 Python
Python实现Sqlite将字段当做索引进行查询的方法
2016/07/21 Python
python调用百度API实现人脸识别
2020/11/17 Python
欧舒丹俄罗斯官方网站:L’OCCITANE俄罗斯
2019/11/22 全球购物
维多利亚的秘密阿联酋官网:Victoria’s Secret阿联酋
2019/12/07 全球购物
linux面试题参考答案(2)
2015/12/06 面试题
2014年教师业务学习材料
2014/05/12 职场文书
白血病募捐倡议书
2014/05/14 职场文书
员工试用期自我鉴定范文
2014/09/15 职场文书
python机器学习创建基于规则聊天机器人过程示例详解
2021/11/02 Python