• 在庆祝海南建省办经济特区30周年大会上的讲话 2019-10-07
  • 俄罗斯世界杯F组:球迷风采 2019-09-24
  • 彭于晏廖凡曝姜文“精神洁癖” 2019-09-24
  • 苏州大学研究生支教团网上众筹资助留守儿童 2019-09-23
  • 湖北政务微信排行榜第187期出炉 交警类公号表现亮眼 2019-09-19
  • 【奋斗吧2018】风电检修工——荒原上的“听风者” 2019-08-31
  • 母亲节又送康乃馨?送这样的健康佳品才走心 2019-08-30
  • [酷]此文已经把马克思理论、边际理论、人类需求层次理论、生物学理论、心理学理论、社会管理学理论等理论在哲学层面完美融合了! 2019-08-26
  • 兰芝雪纱修颜气垫隔离霜 2019-07-27
  • “鹊桥”中继星顺利进入使命轨道运行 2019-07-27
  • 超越舆情管理的360度信息决策 2019-07-22
  • 视频陶然居变形记:从路边小饭馆到全国餐饮十强 2019-07-21
  • 防震减灾事业发展的重要理论成果 2019-07-20
  • 珠宝配美人!李冰冰大片衣着性感秀身段 2019-07-20
  • 机器人也能拥有“情商”?这个可以有 2019-07-19
  • 香港赛马会曾道人网:简单易扩展可控性强的Jquery转盘抽奖程序

     更新时间:2019年03月16日 10:19:06   作者:CODETC   我要评论
    今天小编就为大家分享一篇关于简单易扩展可控性强的Jquery转盘抽奖程序,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧

    香港赛马会网站惠泽社绝杀八码 www.mwcrz.tw 基于Jquery的Javascript转盘抽奖程序,可以自定义抽奖界面,奖品数量、图片等,可控制中奖的奖品,抽奖转盘转动的速度和圈数。

    在实际使用中,应当把概率放到后台程序中运算,以保证安全性和产生中奖奖品的可控性

    Javascript代码:

    <script type="text/javascript">
    var index = 1,  //当前亮区位置
    prevIndex = 14,  //前一位置
    Speed = 300,  //初始速度
    Time,   //计时器
    arr_length = 14,  //奖池奖品数量
    EndIndex = 1,  //决定在哪一格变慢
    cycle = 0,   //计算圈数  
    EndCycle = 3,  //转动多少圈后停下
    flag = false,  //结束转动标志
    random_num = 1,  //中奖的格子
    quick = 0;   //多少格后开始加速
    function StartGame(){
     $("#random_box li").removeClass("random_current");
     //产出随机中奖数1--14之间
     //在实际应用中,中奖数应通过Ajax从后台获得,以确保中奖概率的可控性
     random_num = Math.floor(Math.random() * 14 + 1);
     //从第一格开始转动
     index = 1;
     //圈数计数器置0
     cycle = 0;
     flag = false;
     //中奖格子前5格开始变慢
     if(random_num > 10) {
      EndIndex = random_num - 10; 
     } else {
      EndIndex = random_num + arr_length - 10;
     }
     Time = setInterval(Star,Speed);
    }
    function Star(num){
      //跑马灯变速
      if(flag == false){
     //走五格开始加速
     if(quick == 5){
      clearInterval(Time);
      Speed=50;
      Time=setInterval(Star,Speed);
     }
     //跑指定圈数后开始减速
     if(cycle == EndCycle + 1 && index - 1 == EndIndex){
      clearInterval(Time);
      Speed = 300;
      //触发结束
      flag = true;
      Time = setInterval(Star,Speed);
     }
     }
      if(index > arr_length){
        index = 1;
        cycle ++;
      }
      //结束转动并选中号码
      if(flag == true && index==parseInt(random_num)){ 
     quick = 0;
     clearInterval(Time);
      }
      //设置当前选中样式
      $("#random_"+index).addClass('random_current'); 
      if(index > 1)
        prevIndex = index - 1;
      else{
        prevIndex = arr_length;
      }
      //取消上次选择样式 
      $("#random_"+prevIndex).removeClass('random_current'); 
      index ++;
      quick ++;
    }
    </script>

    HTML代码:

    <div class="box">
     <div class="inbox">
     <ul id="random_box">
      <li id="random_1"><img src="images/img01.gif"></li>
      <li id="random_2"><img src="images/img02.gif"></li>
      <li id="random_3"><img src="images/ts.gif"></li>
      <li id="random_4"><img src="images/img03.gif"></li>
      <li id="random_5"><img src="images/img04.gif"></li>
      <li id="random_6"><img src="images/ts.gif"></li>
      <li id="random_7"><img src="images/img05.gif"></li>
      <li id="random_8"><img src="images/img06.gif"></li>
      <li id="random_9"><img src="images/img07.gif"></li>
      <li id="random_10"><img src="images/ts.gif"></li>
      <li id="random_11"><img src="images/img01.gif"></li>
      <li id="random_12"><img src="images/img02.gif"></li>
      <li id="random_13"><img src="images/ts.gif"></li>
      <li id="random_14"><img src="images/img04.gif"></li> 
     </ul>
     <b class="ok" onclick="StartGame()">我要抽奖</b>
     </div>
    </div>

    CSS代码:

    /* 
     CSS Document
     Power by 香港赛马会网站惠泽社绝杀八码 www.mwcrz.tw
    */
    body,p,ul,ol,li,img,div{margin:0;padding:0;border:0;}
    ul,li{list-style:none;}
    body{font-size:12px;font-family:Arial, Helvetica, sans-serif; text-align:center; margin:0 auto;}
    .box{ padding:9px 0 0 11px; width:759px; height:611px; background:#ccc; margin:20px auto; }
    .inbox{ width:751px; height:596px;position:relative;}
    #random_box li{ position:absolute; width:144px; overflow:hidden; height:144px; border:1px solid #c7c5ca; background:#fff;}
    #random_box li img{ width:144px; display:block; height:144px;}
    .ok{ display:block; width:442px; height:294px; background:#c00; color:#fff; font-size:48px; position:absolute; 
    top:149px; left:148px; cursor:pointer; text-align:center; line-height:280px;}
    #random_1{ left:0; top:0;}
    #random_2{ left:148px;top:0;}
    #random_3{ left:296px;top:0;}
    #random_4{ left:444px;top:0;}
    #random_5{ left:592px;top:0; }
    #random_6{ left:592px;top:148px;}
    #random_7{ left:592px; top:298px;}
    #random_8{ left:592px; top:446px;}
    #random_9{ left:444px; top:446px;}
    #random_10{ left:296px; top:446px;}
    #random_11{ left:148px; top:446px;}
    #random_12{ left:0; top:446px;}
    #random_13{ left:0; top:298px;}
    #random_14{ left:0; top:148px;}
    #random_box li.random_current{border:2px solid red;}

    点击下载:简单易扩展可控性强的Jquery转盘抽奖程序

    总结

    以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对脚本之家的支持。如果你想了解更多相关内容请查看下面相关链接

    相关文章

    最新评论

  • 在庆祝海南建省办经济特区30周年大会上的讲话 2019-10-07
  • 俄罗斯世界杯F组:球迷风采 2019-09-24
  • 彭于晏廖凡曝姜文“精神洁癖” 2019-09-24
  • 苏州大学研究生支教团网上众筹资助留守儿童 2019-09-23
  • 湖北政务微信排行榜第187期出炉 交警类公号表现亮眼 2019-09-19
  • 【奋斗吧2018】风电检修工——荒原上的“听风者” 2019-08-31
  • 母亲节又送康乃馨?送这样的健康佳品才走心 2019-08-30
  • [酷]此文已经把马克思理论、边际理论、人类需求层次理论、生物学理论、心理学理论、社会管理学理论等理论在哲学层面完美融合了! 2019-08-26
  • 兰芝雪纱修颜气垫隔离霜 2019-07-27
  • “鹊桥”中继星顺利进入使命轨道运行 2019-07-27
  • 超越舆情管理的360度信息决策 2019-07-22
  • 视频陶然居变形记:从路边小饭馆到全国餐饮十强 2019-07-21
  • 防震减灾事业发展的重要理论成果 2019-07-20
  • 珠宝配美人!李冰冰大片衣着性感秀身段 2019-07-20
  • 机器人也能拥有“情商”?这个可以有 2019-07-19
  • 捕鱼机千炮机 21点手机游戏 玩龙虎合怎么稳赚 4波肖门尾图 大发快三走势有什么规律 一分钟赛车计划pk 青海快三的研究 北京pk10计划50期连中 浙江风釆大乐透超长版 3d彩票稳赚技巧