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插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
jQuery实现简单的滑动导航代码(移动端)
May 22 jQuery
jQuery上传插件webupload使用方法
Aug 01 jQuery
jQuery:unbind方法的使用详解
Aug 14 jQuery
jQuery zTree 异步加载添加子节点重复问题
Nov 29 jQuery
jquery实现楼层滚动效果
Jan 01 jQuery
JQuery的加载和选择器用法简单示例
May 13 jQuery
jQuery事件委托代码实践详解
Jun 21 jQuery
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 jQuery
Jquery Datatables的使用详解
Jan 30 jQuery
jQuery实现的分页插件完整示例
May 26 jQuery
jquery实现拖拽添加元素功能
Dec 01 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
从C/C++迁移到PHP——判断字符类型的函数
2006/10/09 PHP
PHP 中文处理技巧
2010/04/25 PHP
访问编码后的中文URL返回404错误的解决方法
2014/08/20 PHP
php中rename函数用法分析
2014/11/15 PHP
thinkphp四种url访问方式详解
2014/11/28 PHP
PHP浮点数精度问题汇总
2015/05/13 PHP
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
laravel框架模板之公共模板、继承、包含实现方法分析
2019/08/30 PHP
Laravel5.5+ 使用API Resources快速输出自定义JSON方法详解
2020/04/06 PHP
JavaScript 中的replace方法说明
2007/04/13 Javascript
Jquery Select操作方法集合脚本之家特别版
2010/05/17 Javascript
JavaScript移除数组元素减少长度的方法
2013/09/05 Javascript
基于javascript html5实现多文件上传
2016/03/03 Javascript
js实时获取窗口大小变化的实例代码
2016/11/18 Javascript
微信公众平台开发教程(六)获取个性二维码的实例
2016/12/02 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
2016/12/30 Javascript
Express与NodeJs创建服务器的两种方法
2017/02/06 NodeJs
JS利用cookies设置每隔24小时弹出框
2017/04/20 Javascript
详解如何用webpack打包一个网站应用项目
2017/07/12 Javascript
AngularJs用户输入动态模板XSS攻击示例详解
2018/04/21 Javascript
JS实现根据数组对象的某一属性排序操作示例
2019/01/14 Javascript
vue-loader中引入模板预处理器的实现
2019/09/04 Javascript
javascript数组元素删除方法delete和splice解析
2019/12/09 Javascript
在JavaScript中查找字符串中最长单词的三种方法(推荐)
2021/01/18 Javascript
python实现逆波兰计算表达式实例详解
2015/05/06 Python
Python实现迭代时使用索引的方法示例
2018/06/05 Python
redis之django-redis的简单缓存使用
2018/06/07 Python
修复 Django migration 时遇到的问题解决
2018/06/14 Python
Pandas 数据处理,数据清洗详解
2018/07/10 Python
如何通过python画loss曲线的方法
2019/06/26 Python
python 的numpy库中的mean()函数用法介绍
2020/03/03 Python
python实现磁盘日志清理的示例
2020/11/05 Python
全球知名的婚恋交友网站:Match.com
2017/01/05 全球购物
通信工程专业女生个人求职信
2013/09/21 职场文书
Spring Data JPA框架的核心概念和Repository接口
2022/04/28 Java/Android