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 进入页面默认给已赋值的复选框打钩
Mar 23 jQuery
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
Sep 22 jQuery
jQuery ajax调用webservice注意事项
Oct 08 jQuery
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 jQuery
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 jQuery
jQuery插件jsonview展示json数据
May 26 jQuery
解决jquery有正确返回值但不执行success函数的问题
Aug 20 jQuery
jquery获取元素到屏幕四周可视距离的方法
Sep 05 jQuery
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 jQuery
jQuery实现飞机大战小游戏
Jul 05 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
Zend studio for eclipse中使php可以调用mysql相关函数的设置方法
2008/10/13 PHP
php输出echo、print、print_r、printf、sprintf、var_dump的区别比较
2013/06/21 PHP
php 修改、增加xml结点属性的实现代码
2013/10/22 PHP
PHP迭代器实现斐波纳契数列的函数
2013/11/12 PHP
php 删除cookie方法详解
2014/12/01 PHP
PHP面向对象程序设计之接口的继承定义与用法详解
2018/12/20 PHP
不错的JS中变量相关的细节分析
2007/08/13 Javascript
location.href 在IE6中不跳转的解决方法与推荐使用代码
2010/07/08 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
2013/08/28 Javascript
AngularJS HTML编译器介绍
2014/12/06 Javascript
JavaScript调试工具汇总
2014/12/23 Javascript
js控制文本框输入的字符类型方法汇总
2015/06/19 Javascript
JS产生随机数的用法小结
2016/12/10 Javascript
基于JavaScript实现下拉列表左右移动代码
2017/02/07 Javascript
深入理解Angular中的依赖注入
2017/06/26 Javascript
基于LayUI分页和LayUI laypage分页的使用示例
2017/08/02 Javascript
js微信分享实现代码
2020/10/11 Javascript
Bootstrap 3多级下拉菜单实例
2017/11/23 Javascript
详解webpack运行Babel教程
2018/06/13 Javascript
小程序实现图片预览裁剪插件
2019/11/22 Javascript
python读写json文件的简单实现
2017/04/11 Python
python 分离文件名和路径以及分离文件名和后缀的方法
2018/10/21 Python
opencv转换颜色空间更改图片背景
2019/08/20 Python
TFRecord格式存储数据与队列读取实例
2020/01/21 Python
波兰补充商店:Muscle Power
2018/10/29 全球购物
请解释virtual关键字的含义
2015/06/17 面试题
采购文员岗位职责
2013/11/20 职场文书
创业女性典型材料
2014/05/02 职场文书
态度决定一切演讲稿
2014/05/20 职场文书
建筑安全生产目标责任书
2014/07/23 职场文书
2014年纪检部工作总结
2014/11/12 职场文书
销售内勤岗位职责范本
2015/04/13 职场文书
消防安全培训工作总结
2015/10/23 职场文书
2016年重阳节慰问信
2015/12/01 职场文书
浅谈JS和Nodejs中的事件驱动
2021/05/05 NodeJs
python pygame入门教程
2021/06/01 Python