jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法


Posted in jQuery onJanuary 18, 2019

本文实例讲述了jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法。分享给大家供大家参考,具体如下:

项目描述:九宫格的跑马灯抽奖特效,抽中奖品1-9的概率分别是2%,2%,4%,1%,12%,1%,8%,70%,概率总计100%,并且每天抽奖次数最多为3次。

jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法

html部分的代码和css部分的代码和上一节《jQuery移动端跑马灯抽奖特效》一样,没有修改,js部分有修改,增加了概率。

原理很简单,同样是取随机数,判断这个随机数的大小在100的0-2,2-4,4-8,8-9,9-21,21-22,22-30,30-100之间的哪一个数组内,随机就可判断中哪个奖项。

代码在前面一篇《jQuery移动端跑马灯抽奖特效》js的代码上面增加了一个maths_f()函数,如下:

function maths_f(maths){
  if(maths>0&&maths<2){
    console.log('恭喜获得奖品1')
    twice=1;
  }else if(maths>=2&&maths<=4){
    console.log('恭喜获得奖品2')
    twice=2;
  }else if(maths>=4&&maths<8){
    console.log('恭喜获得奖品3')
    twice=3;
  }else if(maths>=8&&maths<9){
    console.log('恭喜获得奖品4')
    twice=4;
  }else if(maths>=9&&maths<21){
    console.log('恭喜获得奖品5')
    twice=5;
  }else if(maths>=21&&maths<22){
    console.log('恭喜获得奖品6')
    twice=6;
  }else if(maths>=22&&maths<30){
    console.log('恭喜获得奖品7')
    twice=7;
  }else if(maths>=30&&maths<100){
    console.log('恭喜获得奖品8')
    twice=8;
  }
  light();
}

start()函数也有修改,修改为:

$('.start').click(function() {
  if(click&&num>0) {
    click = false;
    maths = (Math.random() * 100);
    console.log(maths)
    maths_f(maths);
  } else {
    return false;
  }
});

其他的自己看着改吧。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
Apr 13 jQuery
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 jQuery
jQuery常用选择器详解
Jul 17 jQuery
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
jQuery length 和 size()区别总结
Apr 26 jQuery
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 jQuery
jquery 时间戳转日期过程详解
Oct 12 jQuery
jQuery实现的移动端图片缩放功能组件示例
May 01 jQuery
jquery实现简单拖拽效果
Jul 20 jQuery
jquery实现淡入淡出轮播图效果
Dec 13 jQuery
jQuery+ajax实现文件上传功能
Dec 22 jQuery
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 #jQuery
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 #jQuery
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 #jQuery
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 #jQuery
jquery的$().each和$.each的区别
Jan 18 #jQuery
jquery层次选择器的介绍
Jan 18 #jQuery
jQuery无冲突模式详解
Jan 17 #jQuery
You might like
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
php给数组赋值的实例方法
2019/09/26 PHP
Javascript面向对象编程
2012/03/18 Javascript
js实现简单秒表走动的时钟特效
2020/03/25 Javascript
chrome调试javascript详解
2015/10/21 Javascript
JavaScript提高性能知识点汇总
2016/01/15 Javascript
JSP基于Bootstrap分页显示实例解析
2016/06/12 Javascript
用JS实现图片轮播效果代码(一)
2016/06/26 Javascript
AngularJs  unit-testing(单元测试)详解
2016/09/02 Javascript
jquery判断iPhone、Android设备类型
2016/09/14 Javascript
js cookie实现记住密码功能
2017/01/17 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
2017/07/10 Javascript
配置一个vue3.0项目的完整步骤
2019/04/26 Javascript
js遍历详解(forEach, map, for, for...in, for...of)
2019/08/28 Javascript
VUE+Element实现增删改查的示例源码
2020/11/23 Vue.js
[00:26]TI7不朽珍藏III——冥界亚龙不朽展示
2017/07/15 DOTA
在Django中编写模版节点及注册标签的方法
2015/07/20 Python
Python操作Excel之xlsx文件
2017/03/24 Python
numpy中的delete删除数组整行和整列的实例
2018/05/09 Python
使用pandas 将DataFrame转化成dict
2019/12/10 Python
PyTorch使用cpu加载模型运算方式
2020/01/13 Python
keras在构建LSTM模型时对变长序列的处理操作
2020/06/29 Python
解决Windows下python和pip命令无法使用的问题
2020/08/31 Python
Python识别验证码的实现示例
2020/09/30 Python
AE美国鹰日本官方网站: American Eagle Outfitters
2016/12/10 全球购物
新西兰珠宝品牌:Michael Hill
2017/09/16 全球购物
全球最大的户外用品零售商之一:The House
2018/06/12 全球购物
戴森比利时官方网站:Dyson BE
2020/10/03 全球购物
What's the difference between an interface and abstract class? (接口与抽象类有什么区别)
2012/10/29 面试题
自荐信包含哪些内容
2013/10/30 职场文书
求职信格式范本
2013/11/15 职场文书
信息技术毕业生自荐信范文
2014/03/13 职场文书
现场活动策划方案
2014/08/22 职场文书
2015年世界无烟日活动总结
2015/02/10 职场文书
2015年勤工助学工作总结
2015/04/29 职场文书
给校长的建议书作文500字
2015/09/14 职场文书