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插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 jQuery
jQuery异步提交表单实例
May 30 jQuery
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 jQuery
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 jQuery
jquery写出PC端轮播图实例
Jan 26 jQuery
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 jQuery
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
通过jQuery学习js类型判断的技巧
May 27 jQuery
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
基于ajax及jQuery实现局部刷新过程解析
Sep 12 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入门速成教程
2007/03/19 PHP
PHP与SQL注入攻击[一]
2007/04/17 PHP
PHP OPP机制和模式简介(抽象类、接口和契约式编程)
2014/06/09 PHP
php去除数组中重复数据
2014/11/18 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
2020/02/15 PHP
innerHTML,outerHTML,innerTEXT三者之间的区别
2007/01/28 Javascript
XmlUtils JS操作XML工具类
2009/10/01 Javascript
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
2010/10/22 Javascript
JQuery获取文本框中字符长度的代码
2011/09/29 Javascript
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
2011/10/21 Javascript
关于jquery中全局函数each使用介绍
2013/12/10 Javascript
使用js判断当前时区TimeZone是否是夏令时
2014/02/23 Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
2014/06/24 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
2015/02/28 Javascript
轻松学习Javascript闭包函数
2015/12/15 Javascript
基于JS实现的笛卡尔乘积之商品发布
2016/05/13 Javascript
利用node.js爬取指定排名网站的JS引用库详解
2017/07/25 Javascript
Python 对象中的数据类型
2017/05/13 Python
pytorch 把MNIST数据集转换成图片和txt的方法
2018/05/20 Python
Django中使用Celery的方法示例
2018/11/29 Python
python学生管理系统
2019/01/30 Python
Python实现串口通信(pyserial)过程解析
2019/09/25 Python
Tensorflow累加的实现案例
2020/02/05 Python
python主要用于哪些方向
2020/07/05 Python
Qoo10台湾站:亚洲领先的在线市场
2018/05/15 全球购物
乌克兰在线药房:Аптека24
2019/10/30 全球购物
Brasty罗马尼亚:购买手表、香水、化妆品、珠宝
2020/04/21 全球购物
大学毕业后的十年规划
2014/01/07 职场文书
先进工作者获奖感言
2014/02/08 职场文书
文化宣传方案
2014/03/13 职场文书
反四风对照检查材料
2014/09/22 职场文书
综合办公室主任岗位职责
2015/04/01 职场文书
给下属加薪申请报告
2015/05/15 职场文书
历史名人教你十五个读书方法,赶快Get起来!
2019/07/18 职场文书
利用Apache Common将java对象池化的问题
2022/06/16 Servers