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 Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
简述jQuery Easyui一些用法
Aug 01 jQuery
jQuery实现简单的下拉菜单导航功能示例
Dec 07 jQuery
jQuery获取随机颜色的实例代码
May 21 jQuery
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 jQuery
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 jQuery
jQuery实现每日秒杀商品倒计时功能
Sep 06 jQuery
使用jQuery实现掷骰子游戏
Oct 24 jQuery
jQuery HTML css()方法与css类实例详解
May 20 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
将RTF格式的文件转成HTML并在网页中显示的代码
2006/10/09 PHP
Linux下将excel数据导入到mssql数据库中的方法
2010/02/08 PHP
php禁止直接从浏览器输入地址访问.php文件的方法
2014/11/04 PHP
php返回字符串中所有单词的方法
2015/03/09 PHP
如何实现JS函数的重载
2006/09/22 Javascript
JQUERY 浏览器判断实现函数
2009/08/20 Javascript
js鼠标及对象坐标控制属性详细解析
2013/12/14 Javascript
Jquery Uploadify上传带进度条的简单实例
2014/02/12 Javascript
Javascript浮点数乘积运算出现多位小数的解决方法
2014/02/17 Javascript
javascript学习笔记(八)正则表达式
2014/10/08 Javascript
JavaScript获取网页支持表单字符集的方法
2015/04/02 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
2016/05/17 Javascript
Jquery实现上下移动和排序代码
2016/10/17 Javascript
js判断手机号是否正确并返回的实现代码
2017/01/17 Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
2017/02/13 Javascript
react native 获取地理位置的方法示例
2018/08/28 Javascript
angularJs利用$scope处理升降序的方法
2018/10/08 Javascript
微信小程序实现购物页面左右联动
2019/02/15 Javascript
基于vue的tab-list类目切换商品列表组件的示例代码
2020/02/14 Javascript
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
2020/07/26 Javascript
[09:59]DOTA2-DPC中国联赛2月7日Recap集锦
2021/03/11 DOTA
python调用cmd复制文件代码分享
2013/12/27 Python
python 有效的括号的实现代码示例
2019/11/11 Python
Pyorch之numpy与torch之间相互转换方式
2019/12/31 Python
解决pycharm导入本地py文件时,模块下方出现红色波浪线的问题
2020/06/01 Python
python如何安装下载后的模块
2020/07/03 Python
python用tkinter实现一个简易能进行随机点名的界面
2020/09/27 Python
HTML5新增的标签和属性归纳总结
2018/05/02 HTML / CSS
打印机墨盒:123Inkjets
2017/02/16 全球购物
历史学专业个人的自我评价
2013/10/13 职场文书
五年级英语教学反思
2014/01/31 职场文书
群众路线查摆问题及整改措施
2014/10/10 职场文书
大学军训口号大全
2015/12/24 职场文书
学校运动会开幕词
2016/03/03 职场文书
Java 多态分析
2022/04/26 Java/Android
Echarts如何重新渲染实例详解
2022/05/30 Javascript