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 相关文章推荐
『jQuery』取指定url格式及分割函数应用
Apr 22 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
Mar 07 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
Sep 23 Javascript
JS版微信6.0分享接口用法分析
Oct 13 Javascript
移动端刮刮乐的实现方式(js+HTML5)
Mar 23 Javascript
Vue2.0如何发布项目实战
Jul 27 Javascript
Gulp实现静态网页模块化的方法详解
Jan 09 Javascript
JavaScript callback回调函数用法实例分析
May 08 Javascript
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
Apr 28 Javascript
JQuery特殊效果和链式调用操作示例
May 13 jQuery
JavaScript实现的开关灯泡点击切换特效示例
Jul 08 Javascript
vue使用v-model进行跨组件绑定的基本实现方法
Apr 28 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
标准PHP的AES加密算法类
2015/03/12 PHP
如何使用php实现评委评分器
2015/07/31 PHP
2020最新版 PhpStudy V8.1版本下载安装使用详解
2020/10/30 PHP
JS 事件绑定函数代码
2010/04/28 Javascript
AlertBox 弹出层信息提示框效果实现步骤
2010/10/11 Javascript
自己整理的一个javascript日期处理函数
2010/10/16 Javascript
JavaScript之Getters和Setters 平台支持等详细介绍
2012/12/07 Javascript
简易js代码实现计算器操作
2013/04/15 Javascript
JS下拉框内容左右移动效果的具体实现
2013/07/10 Javascript
jquery操作checked属性以及disabled属性的多种方法
2014/06/20 Javascript
js实现特定位取反原理及示例
2014/06/30 Javascript
全面解析Bootstrap中tab(选项卡)的使用方法
2016/06/06 Javascript
文本框只能输入数字的js代码(含小数点)
2016/07/10 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
2016/11/01 Javascript
如何实现json数据可视化详解
2016/11/24 Javascript
jquery实现(textarea)placeholder自动换行
2016/12/22 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
2017/02/15 Javascript
JS操作xml对象转换为Json对象示例
2017/03/25 Javascript
浅谈node的事件机制
2017/10/09 Javascript
Vue项目自动转换 px 为 rem的实现方法
2018/10/29 Javascript
Javascript实现秒表倒计时功能
2018/11/17 Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
2019/09/23 Javascript
javscript 数组扁平化的实现
2020/02/03 Javascript
小程序如何写动态标签的实现方法
2020/02/05 Javascript
Python 多进程并发操作中进程池Pool的实例
2017/11/01 Python
python 实现求解字符串集的最长公共前缀方法
2018/07/20 Python
详解一种用django_cache实现分布式锁的方式
2019/09/01 Python
Django Haystack 全文检索与关键词高亮的实现
2020/02/17 Python
IE滤镜与CSS3效果(详细整理分享)
2013/01/25 HTML / CSS
世界上最大的乐器零售商:Guitar Center
2017/11/07 全球购物
Agoda.com官方网站:便宜预订全球酒店,高达80%的折扣
2018/04/04 全球购物
高中军训的心得体会
2014/09/01 职场文书
2015年试用期工作总结
2014/12/12 职场文书
高考诚信考试承诺书
2015/04/29 职场文书
MySQL 分区表中分区键为什么必须是主键的一部分
2022/03/17 MySQL
阿里云 Windows server 2019 配置FTP
2022/04/28 Servers