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中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
jquery与js实现全选功能的区别
Jun 11 jQuery
jQuery实现可拖动进度条实例代码
Jun 21 jQuery
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
jQuery实现广告条滚动效果
Aug 22 jQuery
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 jQuery
webpack写jquery插件的环境配置
Dec 21 jQuery
jQuery仿移动端支付宝键盘的实现代码
Aug 15 jQuery
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
jQuery分组选择器简单用法示例
Apr 04 jQuery
jQuery实现轮播图源码
Oct 23 jQuery
jquery实现点击左右按钮切换图片
Jan 27 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递归调用的小技巧讲解
2013/02/19 PHP
解析CI的AJAX分页 另类实现方法
2013/06/27 PHP
php数组编码转换示例详解
2014/03/11 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(四)
2014/06/23 PHP
对PHP PDO的一些认识小结
2015/01/23 PHP
浅谈PHP错误类型及屏蔽方法
2017/05/27 PHP
php常用经典函数集锦【数组、字符串、栈、队列、排序等】
2019/08/23 PHP
复制js对象方法(详解)
2013/07/08 Javascript
jquery使用jquery.zclip插件复制对象的实例教程
2013/12/04 Javascript
JavaScript中的ArrayBuffer详细介绍
2014/12/08 Javascript
JavaScript判断变量是否为空的自定义函数分享
2015/01/31 Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
2015/05/14 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
2015/09/18 Javascript
Perl Substr()函数及函数的应用
2015/12/16 Javascript
AngularJS 服务详细讲解及示例代码
2016/08/17 Javascript
javascript学习之json入门
2016/12/22 Javascript
Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值详解
2018/03/13 Javascript
vue如何解决循环引用组件报错的问题
2018/09/22 Javascript
Vue动态组件与异步组件实例详解
2019/02/23 Javascript
详解vue-cli3多环境打包配置
2019/03/28 Javascript
nuxt配置通过指定IP和端口访问的实现
2020/01/08 Javascript
Python连接mssql数据库编码问题解决方法
2015/01/01 Python
python中字典dict常用操作方法实例总结
2015/04/04 Python
Python3 获取一大段文本之间两个关键字之间的内容方法
2018/10/11 Python
Pytorch中accuracy和loss的计算知识点总结
2019/09/10 Python
python tornado使用流生成图片的例子
2019/11/18 Python
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
2013/04/24 HTML / CSS
JSP和EJB可以共享HttpSession么?EJB里面可以改变session里面的内容
2013/06/05 面试题
Overload和Override的区别。Overloaded的方法是否可以改变返回值的类型
2013/10/30 面试题
十岁生日同学答谢词
2014/01/19 职场文书
小学英语教学反思
2014/01/30 职场文书
协议书怎么写
2014/04/21 职场文书
党员服务承诺书
2014/05/28 职场文书
社区重阳节活动总结
2015/03/24 职场文书
员工手册编写范本
2015/05/14 职场文书
mybatis 获取更新记录的id
2022/05/20 Java/Android