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使用正则验证15/18身份证的方法示例
Apr 27 jQuery
jQuery实现简单的抽奖游戏
May 05 jQuery
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 jQuery
关于jquery form表单序列化的注意事项详解
Aug 01 jQuery
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 jQuery
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
基于JQuery实现页面定时弹出广告
May 08 jQuery
jQuery HTML css()方法与css类实例详解
May 20 jQuery
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 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函数
2010/02/16 PHP
php使用curl存储cookie的示例
2014/03/31 PHP
详解PHP序列化反序列化的方法
2015/10/27 PHP
CSS心形加载的动画源码的实现
2021/03/09 HTML / CSS
jQuery 使用手册(三)
2009/09/23 Javascript
在jquery boxy中添加百度地图坐标拾取注意流程
2014/04/03 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
2015/05/06 Javascript
AngularJS 最常用的功能汇总
2016/02/17 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
2016/05/28 Javascript
JavaScript接口的实现三种方式(推荐)
2016/06/14 Javascript
各式各样的导航条效果css3结合jquery代码实现
2016/09/17 Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
2016/12/31 Javascript
JavaScript学习笔记之惰性函数示例详解
2017/08/27 Javascript
详解用Node.js写一个简单的命令行工具
2018/03/01 Javascript
Vue实现自定义下拉菜单功能
2018/07/16 Javascript
JavaScript类型相关的常用操作总结
2019/02/14 Javascript
JS实现选项卡效果的代码实例
2019/05/20 Javascript
微信小程序图片自适应实现解析
2020/01/21 Javascript
vue实现图书管理系统
2020/12/29 Vue.js
jQuery是用来干什么的 jquery其实就是一个js框架
2021/02/04 jQuery
[00:14]护身甲盾
2019/03/06 DOTA
简单谈谈Python中的元祖(Tuple)和字典(Dict)
2017/04/21 Python
Python3 socket同步通信简单示例
2017/06/07 Python
解决pandas.DataFrame.fillna 填充Nan失败的问题
2018/11/06 Python
python实现海螺图片的方法示例
2019/05/12 Python
Django框架组成结构、基本概念与文件功能分析
2019/07/30 Python
pytorch自定义初始化权重的方法
2019/08/17 Python
postman传递当前时间戳实例详解
2019/09/14 Python
如何将你的应用迁移到Python3的三个步骤
2019/12/22 Python
python中pivot()函数基础知识点
2021/01/03 Python
详解CSS3的opacity属性设置透明效果的用法
2016/05/09 HTML / CSS
利用Storage Event实现页面间通信的示例代码
2018/07/26 HTML / CSS
联想澳大利亚官网:Lenovo Australia
2018/01/18 全球购物
开办大学饮食联盟创业计划书
2014/01/29 职场文书
青年文明号汇报材料
2014/12/23 职场文书
2015年仓库管理工作总结
2015/05/25 职场文书