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实现Select下拉列表进行状态选择功能
Mar 30 jQuery
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 jQuery
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
jquery应用实例分享_实现手风琴特效
Feb 01 jQuery
jQuery+vue.js实现的多选下拉列表功能示例
Jan 15 jQuery
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 jQuery
jquery多级树形下拉菜单的实例代码
Jul 09 jQuery
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
jQuery 筛选器简单操作示例
Oct 02 jQuery
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
jQuery 选择器用法实例分析【prev + next】
May 22 jQuery
原生jQuery实现只显示年份下拉框
Dec 24 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 数组实例说明
2008/08/18 PHP
php分页函数示例代码分享
2014/02/24 PHP
在PHP中使用X-SendFile头让文件下载更快
2014/06/01 PHP
PHP Imagick完美实现图片裁切、生成缩略图、添加水印
2016/02/22 PHP
php四种定界符详解
2017/02/16 PHP
jquery 仿QQ校友的DIV模拟窗口效果源码
2010/03/24 Javascript
JS判断不能为空实例代码
2013/11/26 Javascript
jQuery之DOM对象和jQuery对象的转换与区别分析
2015/01/08 Javascript
jQuery实现延迟跳转的方法
2015/06/05 Javascript
js实现将选中内容分享到新浪或腾讯微博
2015/12/16 Javascript
学习Angularjs分页指令
2016/07/01 Javascript
老生常谈js中的MVC
2017/07/25 Javascript
Vue结合Video.js播放m3u8视频流的方法示例
2018/05/04 Javascript
jquery获取img的src值实例介绍
2019/01/16 jQuery
JS计算斐波拉切代码实例
2019/09/12 Javascript
element-ui中el-upload多文件一次性上传的实现
2020/12/02 Javascript
javascript全局自定义鼠标右键菜单
2020/12/08 Javascript
python数据结构之二叉树的遍历实例
2014/04/29 Python
用Python计算三角函数之acos()方法的使用
2015/05/15 Python
python删除指定类型(或非指定)的文件实例详解
2015/07/06 Python
python多线程方式执行多个bat代码
2016/06/07 Python
python如何爬取个性签名
2018/06/19 Python
Python爬虫库requests获取响应内容、响应状态码、响应头
2020/01/25 Python
Python如何批量获取文件夹的大小并保存
2020/03/31 Python
Python持续监听文件变化代码实例
2020/07/22 Python
详解python第三方库的安装、PyInstaller库、random库
2021/03/03 Python
KEETSA环保床垫:更好的睡眠,更好的生活!
2016/11/24 全球购物
橄榄树药房:OLIVEDA
2019/09/01 全球购物
巴西购物网站:Submarino
2020/01/19 全球购物
《理想》教学反思
2014/02/17 职场文书
学习标兵获奖感言
2014/02/20 职场文书
学习考察心得体会
2014/09/04 职场文书
个人工作保证书
2015/02/28 职场文书
2015年敬老院工作总结
2015/05/18 职场文书
《攀登者》:“海拔8000米以上,你不能指望任何人”
2019/11/25 职场文书
利用ajax+php实现商品价格计算
2021/03/31 PHP