当前位置: 首页 > 编程笔记 >

jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法

蓟和煦
2023-03-14
本文向大家介绍jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法,包括了jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法的使用技巧和注意事项,需要的朋友参考一下

本文实例讲述了jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法。分享给大家供大家参考,具体如下:

项目描述:九宫格的跑马灯抽奖特效,抽中奖品1-9的概率分别是2%,2%,4%,1%,12%,1%,8%,70%,概率总计100%,并且每天抽奖次数最多为3次。

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操作DOM节点方法总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

 类似资料:
  • 本文向大家介绍Unity实现跑马灯抽奖效果,包括了Unity实现跑马灯抽奖效果的使用技巧和注意事项,需要的朋友参考一下 Unity 跑马灯抽奖效果实现代码,供大家参考,具体内容如下 这边用到插件是NGUI+Dotween,思路简单说下:先排版,通过移动图片蒙版来实现效果。 下面是排版和文件目录。 代码部分是通过余数去确认停的位置,boxlist通过unity拖拉加入数据,chooseBoxList

  • 本文向大家介绍jQuery实现适用于移动端的跑马灯抽奖特效示例,包括了jQuery实现适用于移动端的跑马灯抽奖特效示例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery实现适用于移动端的跑马灯抽奖特效。分享给大家供大家参考,具体如下: 图片全部隐私处理 跑马灯抽奖特效难点一:奖品位置排放,如下图 按照代码常规,奖品1,2,3,4是顺序排列,在这里,使用了定位将他们绕成一个圈。 难

  • 本文向大家介绍javascript跑马灯抽奖实例讲解,包括了javascript跑马灯抽奖实例讲解的使用技巧和注意事项,需要的朋友参考一下 本文实例讲解了javascript跑马灯抽奖特效,特别适合用于抽奖活动,分享给大家供大家参考,具体内容如下 想要学习更多关于抽奖功能的实现,请参考此专题:抽奖功能 以上就是本文的详细内容,希望对大家的学习有所帮助。

  • 本文向大家介绍js实现抽奖效果,包括了js实现抽奖效果的使用技巧和注意事项,需要的朋友参考一下 效果图: 代码如下: 以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持呐喊教程!

  • 抽奖互动能够有效活跃直播间气氛,吸引更多观众参与直播互动 讲师端 说明: 1)自定义奖品名称:发起抽奖时可自定义抽奖名称,观看端进行显示 2)参与用户:可选择全部在线用户或本次直播未中奖用户参与抽奖(一场直播中,累计中奖人数不能超过2000人,否则发起抽奖时,如参与用户设置为未中奖用户则无法发起) 3)中奖人数:支持一次性抽取1-200个中奖用户 4)预设中奖用户:可基于在线用户列表提前选择中奖用

  • 获取抽奖信息 Mudu.Room.LuckyDraw.Get(function (response) { response = JSON.parse(response) if (response.status === 'y') { console.log('获取成功,数据为:', response.data) } if (response.status === 'n') {