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插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 jQuery
jQuery插件imgAreaSelect基础讲解
May 26 jQuery
使用jQuery实现页面定时弹出广告效果
Aug 24 jQuery
jQuery实现火车票买票城市选择切换功能
Sep 15 jQuery
jquery实现侧边栏左右伸缩效果的示例
Dec 19 jQuery
jquery在启动页面时,自动加载数据的实例
Jan 22 jQuery
如何用input标签和jquery实现多图片的上传和回显功能
May 16 jQuery
jQuery UI实现动画效果代码分享
Aug 19 jQuery
jQuery实现数字华容道小游戏(实例代码)
Jan 16 jQuery
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 jQuery
jQuery treeview树形结构应用
Mar 24 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
杏林同学录(五)
2006/10/09 PHP
用PHP和ACCESS写聊天室(六)
2006/10/09 PHP
PR值查询 | PageRank 查询
2006/12/20 PHP
Smarty安装配置方法
2008/04/10 PHP
PHP date()函数警告: It is not safe to rely on the system解决方法
2014/08/20 PHP
PHP实现的memcache环形队列类实例
2015/07/28 PHP
简单谈谈PHP中strlen 函数
2016/02/27 PHP
PHP使用递归算法无限遍历数组示例
2017/01/13 PHP
js 有框架页面跳转(target)三种情况下的应用
2013/04/09 Javascript
jquery移动listbox的值原理及代码
2013/05/03 Javascript
JS仿百度搜索自动提示框匹配查询功能
2013/11/21 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
2013/11/28 Javascript
js中substring和substr两者区别和使用方法
2015/11/09 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
2016/09/19 Javascript
[js高手之路]从原型链开始图解继承到组合继承的产生详解
2017/08/28 Javascript
jQuery实现简单的计时器功能实例分析
2017/08/29 jQuery
一个简单的node.js界面实现方法
2018/06/01 Javascript
vue-cli系列之vue-cli-service整体架构浅析
2019/01/14 Javascript
Vue框架下引入ActiveX控件的问题解决
2019/03/25 Javascript
详解JavaScript 为什么要有 Symbol 类型?
2019/04/03 Javascript
详解vue中使用protobuf踩坑记
2019/05/07 Javascript
javaScript代码飘红报错看不懂?读完这篇文章再试试
2020/08/19 Javascript
[05:42]DOTA2英雄梦之声_第10期_蝙蝠骑士
2014/06/21 DOTA
总结Python中逻辑运算符的使用
2015/05/13 Python
Python的randrange()方法使用教程
2015/05/15 Python
python中导入 train_test_split提示错误的解决
2020/06/19 Python
Python selenium爬取微信公众号文章代码详解
2020/08/12 Python
FragranceNet中文网:北美健康美容线上零售商
2020/08/26 全球购物
瑞士男士时尚网上商店:Babista
2020/05/14 全球购物
新闻网站实习自我鉴定
2013/09/25 职场文书
市场开发与营销专业求职信范文
2014/05/01 职场文书
学校就业推荐信范文
2014/05/19 职场文书
企业承诺书格式
2014/05/21 职场文书
2014年化工厂工作总结
2014/11/25 职场文书
PyTorch 实现L2正则化以及Dropout的操作
2021/05/27 Python
vue特效之翻牌动画
2022/04/20 Vue.js