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数组的基本用法及数组根据下标(数值或字符)移除元素
Oct 20 Javascript
jQuery使用animate创建动画用法实例
Aug 07 Javascript
javascript中的正则表达式使用详解
Aug 30 Javascript
JS实现HTML表格排序功能
Aug 05 Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
Jan 03 Javascript
老生常谈的跨域处理
Jan 11 Javascript
10 种最常见的 Javascript 错误(频率最高)
Feb 08 Javascript
小程序从手动埋点到自动埋点的实现方法
Jan 24 Javascript
通过npm或yarn自动生成vue组件的方法示例
Feb 12 Javascript
Vue父子之间值传递的实例教程
Jul 02 Javascript
Vue按时间段查询数据组件使用详解
Aug 21 Javascript
javascript实现京东快递单号的查询效果
Nov 30 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 Warning: PHP Startup: Unable to load dynamic library \ D:/php5/ext/php_mysqli.dll\
2012/06/17 PHP
如何给phpcms v9增加类似于phpcms 2008中的关键词表
2013/07/01 PHP
php三种实现多线程类似的方法
2015/10/30 PHP
ThinkPHP的常用配置选项汇总
2016/03/24 PHP
php版微信公众平台接口开发之智能回复开发教程
2016/09/22 PHP
PHP常用函数之格式化时间操作示例
2019/10/21 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
PHP执行系统命令函数实例讲解
2021/03/03 PHP
javascript中的prototype属性使用说明(函数功能扩展)
2010/08/16 Javascript
图片onload事件触发问题解决方法
2011/07/31 Javascript
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
2013/04/15 Javascript
js获得当前时区夏令时发生和终止的时间代码
2014/02/23 Javascript
Internet Explorer 11 浏览器介绍:别叫我IE
2014/09/28 Javascript
简述Jquery与DOM对象
2015/07/10 Javascript
jQuery实现分隔条左右拖动功能
2015/11/21 Javascript
Sort()函数的多种用法
2016/03/20 Javascript
详解React之父子组件传递和其它一些要点
2018/06/25 Javascript
一篇文章,教你学会Vue CLI 插件开发
2019/04/17 Javascript
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
2019/10/25 Javascript
[01:51]2018年度CS GO最具人气外援-完美盛典
2018/12/16 DOTA
[01:02:26]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第二场 1月18日
2021/03/11 DOTA
python和bash统计CPU利用率的方法
2015/07/10 Python
Python实时获取cmd的输出
2015/12/13 Python
基于Python列表解析(列表推导式)
2018/06/23 Python
python网络编程 使用UDP、TCP协议收发信息详解
2019/08/29 Python
python生成器用法实例详解
2019/11/22 Python
python3 deque 双向队列创建与使用方法分析
2020/03/24 Python
培训主管的岗位职责
2013/11/23 职场文书
2014信息技术专业毕业生自我评价
2014/01/17 职场文书
高中班级口号
2014/06/09 职场文书
煤矿安全生产月活动总结
2014/07/05 职场文书
学校创先争优活动总结
2014/08/28 职场文书
复兴之路观后感3000字
2015/06/02 职场文书
学校扫黄打非工作总结
2015/10/15 职场文书
jquery插件实现悬浮的菜单
2021/04/24 jQuery
Linux下使用C语言代码搭建一个简单的HTTP服务器
2022/04/13 Servers