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 相关文章推荐
prototype 源码中文说明之 prototype.js
Sep 22 Javascript
分享别人写的一个小型js框架
Aug 13 Javascript
js处理php输出时间戳对不上号的解决方法
Jun 20 Javascript
javascript 中__proto__和prototype详解
Nov 25 Javascript
原生js制作简单的数字键盘
Apr 24 Javascript
AngularJS表单验证功能分析
May 26 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
Jun 04 Javascript
vue中如何实现pdf文件预览的方法
Jul 12 Javascript
vue.js 添加 fastclick的支持方法
Aug 28 Javascript
详解如何快速配置webpack多入口脚手架
Dec 28 Javascript
浅谈vue3中effect与computed的亲密关系
Oct 10 Javascript
javascript设计模式之装饰者模式
Jan 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中使用gd库实现远程图片下载实例
2015/05/12 PHP
PHP 数组遍历foreach语法结构及实例
2016/06/13 PHP
php 文件下载 出现下载文件内容乱码损坏的解决方法(推荐)
2016/11/16 PHP
PHP会话控制实例分析
2016/12/24 PHP
js拦截alert对话框另类应用
2013/01/16 Javascript
JavaScript实现的图像模糊算法代码分享
2014/04/22 Javascript
jQuery搜索子元素的方法
2015/02/10 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
2015/08/05 Javascript
在javascript中随机数 math random如何生成指定范围数值的随机数
2015/10/21 Javascript
jQuery+CSS3实现3D立方体旋转效果
2015/11/10 Javascript
学习使用grunt来打包JavaScript和CSS程序的教程
2016/01/04 Javascript
基于jQuery实现二级下拉菜单效果
2016/02/01 Javascript
Javascript 字符串模板的简单实现
2016/02/13 Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
2016/07/04 Javascript
原生js实现可拖动的登录框效果
2017/01/21 Javascript
js实现华丽的九九乘法表效果
2017/03/29 Javascript
基于jquery日历价格、库存等设置插件
2020/07/05 jQuery
bootstrap3-dialog-master模态框使用详解
2017/08/22 Javascript
js实现继承的方法及优缺点总结
2019/05/08 Javascript
ES6中Set和Map用法实例详解
2020/03/02 Javascript
完美解决vue 中多个echarts图表自适应的问题
2020/07/19 Javascript
python实现在目录中查找指定文件的方法
2014/11/11 Python
Python中的单行、多行、中文注释方法
2018/07/19 Python
Python实现数据结构线性链表(单链表)算法示例
2019/05/04 Python
sklearn和keras的数据切分与交叉验证的实例详解
2020/06/19 Python
python实现马丁策略回测3000只股票的实例代码
2021/01/22 Python
CSS3制作ajax loader icon实现思路及代码
2013/08/25 HTML / CSS
HTML5 body设置自适应全屏
2020/05/07 HTML / CSS
Opodo英国旅游网站:预订廉价航班、酒店和汽车租赁
2018/07/14 全球购物
Charles & Keith欧盟:新加坡时尚品牌
2019/08/01 全球购物
早餐连锁店计划书
2014/01/08 职场文书
2014年平安建设工作总结
2014/11/19 职场文书
2014个人年终工作总结范文
2014/12/15 职场文书
司考复习计划
2015/01/19 职场文书
React实现动效弹窗组件
2021/06/21 Javascript
Python创建SQL数据库流程逐步讲解
2022/09/23 Python