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 Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
jquery版轮播图效果和extend扩展
Jul 18 jQuery
jQuery plugin animsition使用小结
Sep 14 jQuery
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
利用jquery和BootStrap实现动态滚动条效果
Dec 03 jQuery
jquery的$().each和$.each的区别
Jan 18 jQuery
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 jQuery
jQuery实现穿梭框效果
Jan 19 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
从网上搜到的phpwind 0day的代码
2006/12/07 PHP
php读取数据库信息的几种方法
2008/05/24 PHP
从php核心代码分析require和include的区别
2011/01/02 PHP
PHP跳转页面的几种实现方法详解
2013/06/08 PHP
PHP遍历目录函数opendir()、readdir()、closedir()、rewinddir()总结
2014/11/18 PHP
thinkPHP导出csv文件及用表格输出excel的方法
2015/12/30 PHP
实现PHP搜索加分页
2016/10/12 PHP
用一段js程序来实现动画功能
2007/03/06 Javascript
简单三步,搞掂内存泄漏
2007/03/10 Javascript
jQueryUI如何自定义组件实现代码
2010/11/14 Javascript
JavaScript 模拟类机制及私有变量的方法及思路
2013/07/10 Javascript
Bootstrap学习笔记之css样式设计(2)
2016/06/07 Javascript
JavaScript提升性能的常用技巧总结【经典】
2016/06/20 Javascript
JS数组去掉重复数据只保留一条的实现代码
2016/08/11 Javascript
BooStrap对导航条的改造实践小结
2016/09/21 Javascript
BootStrap树状图显示功能
2016/11/24 Javascript
Angular 表单控件示例代码
2017/06/26 Javascript
javaScript中的空值和假值
2017/12/18 Javascript
记一次webapck4 配置文件无效的解决历程
2018/09/19 Javascript
微信小程序解除10个请求并发限制
2018/12/18 Javascript
详解Vue源码中一些util函数
2019/04/24 Javascript
如何基于filter实现网站整体变灰功能
2020/04/17 Javascript
详解ES6实现类的私有变量的几种写法
2021/02/10 Javascript
Python统计文件中去重后uuid个数的方法
2015/07/30 Python
在Python的Flask框架中验证注册用户的Email的方法
2015/09/02 Python
python 出现SyntaxError: non-keyword arg after keyword arg错误解决办法
2017/02/14 Python
python使用Matplotlib绘制分段函数
2018/09/25 Python
python实现弹窗祝福效果
2019/04/07 Python
python实现列表的排序方法分享
2019/07/01 Python
Tensorflow设置显存自适应,显存比例的操作
2020/02/03 Python
如何在python中实现线性回归
2020/08/10 Python
HTML5 自动聚焦(autofocus)属性使用介绍
2013/08/07 HTML / CSS
大学生入党自我鉴定
2013/10/31 职场文书
反腐倡廉警示教育活动总结
2014/05/05 职场文书
元旦晚会活动总结
2014/07/09 职场文书
springboot临时文件存储目录配置方式
2021/07/01 Java/Android