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 dateRangePicker插件使用方法详解
Jul 28 jQuery
基于jquery实现多选下拉列表
Aug 02 jQuery
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 jQuery
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 jQuery
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 jQuery
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
Sep 03 jQuery
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
jquery实现聊天机器人
Feb 08 jQuery
jQuery+ajax实现文件上传功能
Dec 22 jQuery
jquery插件实现图片悬浮
Apr 16 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 类型转换函数intval
2009/06/20 PHP
深入分析php中接口与抽象类的区别
2013/06/08 PHP
Yii2 rbac权限控制之rule教程详解
2016/06/23 PHP
php 命名空间(namespace)原理与用法实例小结
2019/11/13 PHP
在网页中控制wmplayer播放器
2006/07/01 Javascript
JavaScript判断变量是对象还是数组的方法
2014/08/28 Javascript
js实现n秒倒计时后才可以点击的效果
2015/12/20 Javascript
dedecms页面如何获取会员状态的实例代码
2016/03/15 Javascript
简单理解JavaScript中的封装与继承特性
2016/03/19 Javascript
基于JS实现导航条flash导航条
2016/06/17 Javascript
使用ES6语法重构React代码详解
2017/05/09 Javascript
Nodejs进阶之服务端字符编解码和乱码处理
2017/09/04 NodeJs
Vue模拟数据,实现路由进入商品详情页面的示例
2018/08/31 Javascript
小程序绑定用户方案优化小结
2019/05/15 Javascript
vue中利用Promise封装jsonp并调取数据
2019/06/18 Javascript
JavaScript数组排序小程序实现解析
2020/01/13 Javascript
Vue axios与Go Frame后端框架的Options请求跨域问题详解
2020/03/03 Javascript
Python中动态检测编码chardet的使用教程
2017/07/06 Python
Python中static相关知识小结
2018/01/02 Python
Python中内建模块collections如何使用
2020/05/27 Python
Anaconda的安装与虚拟环境建立
2020/11/18 Python
THE OUTNET美国官网:国际设计师品牌折扣网站
2017/03/07 全球购物
深深扎根运动世界的生活品牌:Tillys
2017/10/30 全球购物
Big Green Smile德国网上商店:提供各种天然产品
2018/05/23 全球购物
EQVVS官网:设计师男装和女装
2018/10/24 全球购物
ColourPop美国官网:卡拉泡泡,洛杉矶彩妆品牌
2019/04/28 全球购物
爱尔兰电脑、家电和家具购物网站:Buy It Direct
2019/07/09 全球购物
介绍一下.net和Java的特点和区别
2012/09/26 面试题
毕业生求职的求职信
2013/12/05 职场文书
微观物理专业自荐信
2014/01/26 职场文书
银行开业庆典方案
2014/02/06 职场文书
团日活动总结范文
2014/04/25 职场文书
4s店活动策划方案
2014/08/25 职场文书
市场调研项目授权委托书范本
2014/10/04 职场文书
萤火虫之墓观后感
2015/06/05 职场文书
win11无法添加打印机怎么办? 提示windows无法打开添加打印机的解决办法
2022/04/05 数码科技