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实现简单实用的轮播器
May 23 jQuery
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 jQuery
jQuery中each方法的使用详解
Mar 18 jQuery
[原创]jQuery实现合并/追加数组并去除重复项的方法
Apr 11 jQuery
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 jQuery
jQuery zTree树插件的使用教程
Aug 16 jQuery
jquery实现点击弹出对话框
Feb 08 jQuery
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
jQuery实现简单飞机大战
Jul 05 jQuery
jQuery实现影院选座订座效果
Apr 13 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
ThinkPHP框架结合Ajax实现用户名校验功能示例
2019/07/03 PHP
JavaScript入门教程(8) Location地址对象
2009/01/31 Javascript
封装html的select标签的js操作实例
2013/07/02 Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
2013/09/06 Javascript
清除div下面的所有标签的方法
2014/02/17 Javascript
jQuery中next方法用法实例
2015/04/24 Javascript
jquery实现无刷新验证码的简单实例
2016/05/19 Javascript
基于BootStrap环境写jQuery tabs插件
2016/07/12 Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
2016/10/28 Javascript
canvas实现粒子时钟效果
2017/02/06 Javascript
JS实现简单的选择题测评系统代码思路详解(demo)
2017/09/03 Javascript
javascript系统时间设置操作示例
2019/06/17 Javascript
JavaScript遍历数组和对象的元素简单操作示例
2019/07/09 Javascript
node.js基础知识汇总
2020/08/25 Javascript
python编程-将Python程序转化为可执行程序[整理]
2007/04/09 Python
Python中异常重试的解决方案详解
2017/05/05 Python
python shell根据ip获取主机名代码示例
2017/11/25 Python
python判断字符串或者集合是否为空的实例
2019/01/23 Python
Python实现定制自动化业务流量报表周报功能【XlsxWriter模块】
2019/03/11 Python
Django重设Admin密码过程解析
2020/02/10 Python
Python3如何在服务器打印资产信息
2020/08/27 Python
Numpy中np.random.rand()和np.random.randn() 用法和区别详解
2020/10/23 Python
印度婴儿用品在线商店:Firstcry.com
2016/12/05 全球购物
英国排名第一的宠物店:PetPlanet
2020/02/02 全球购物
static函数与普通函数有什么区别
2015/12/25 面试题
中科方德软件测试面试题
2016/04/21 面试题
企业给企业的表扬信
2014/01/13 职场文书
安全事故检讨书
2014/01/18 职场文书
创业者是否需要商业计划书?
2014/02/07 职场文书
不忘国耻振兴中华演讲稿
2014/05/14 职场文书
学生干部培训方案
2014/06/12 职场文书
支部书记四风问题对照检查材料
2014/10/04 职场文书
2015年党员个人剖析材料
2014/12/18 职场文书
入党后的感想
2015/08/10 职场文书
酒桌上的祝酒词
2015/08/12 职场文书
小学远程教育工作总结
2015/08/13 职场文书