• 五万球迷助阵 国安主场“摘花” 2019-05-24
  • 俄罗斯驻华大使:未来上合的首要任务是加强区域一体化 2019-05-23
  • 习近平总书记重要讲话在内蒙古各界引发热烈反响 2019-05-22
  • 女性之声——全国妇联 2019-05-21
  • 新华时评:美逆潮流而动,必将付出代价 2019-05-21
  • 好朋友、和平奖可能人家抱了。 2019-05-20
  • 【北京荣祥月达车型报价】北京荣祥月达综合店车型价格 2019-05-20
  • 脸上长痘代表对应内脏有问题?专家:未发现相关性 2019-05-19
  • 和静县首届东归节6月23日开幕 2019-05-18
  • 太空监视飞行器相关新闻 2019-05-18
  • 警车化身“产房” 冰雪路上“生命接力” 2019-05-17
  • 百部网络正能量动漫音视频作品评选 2019-05-16
  • 初二少年与家长争吵离家出走 客运站人员发觉异样后拦下 2019-05-15
  • 陈海滢的专栏作者中国国家地理网 2019-05-14
  • 乐平市:开展流动党校“培训在基层”活动(图) 2019-05-13
  • 香港赛马会资料公开站长推荐头数:简单易扩展可控性强的Jquery转盘抽奖程序

    香港赛马会网站惠泽社绝杀八码 www.mwcrz.tw  更新时间:2019年03月16日 10:19:06   作者:CODETC   我要评论

    今天小编就为大家分享一篇关于简单易扩展可控性强的Jquery转盘抽奖程序,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧

    基于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转盘抽奖程序

    总结

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

    相关文章

    最新评论

  • 五万球迷助阵 国安主场“摘花” 2019-05-24
  • 俄罗斯驻华大使:未来上合的首要任务是加强区域一体化 2019-05-23
  • 习近平总书记重要讲话在内蒙古各界引发热烈反响 2019-05-22
  • 女性之声——全国妇联 2019-05-21
  • 新华时评:美逆潮流而动,必将付出代价 2019-05-21
  • 好朋友、和平奖可能人家抱了。 2019-05-20
  • 【北京荣祥月达车型报价】北京荣祥月达综合店车型价格 2019-05-20
  • 脸上长痘代表对应内脏有问题?专家:未发现相关性 2019-05-19
  • 和静县首届东归节6月23日开幕 2019-05-18
  • 太空监视飞行器相关新闻 2019-05-18
  • 警车化身“产房” 冰雪路上“生命接力” 2019-05-17
  • 百部网络正能量动漫音视频作品评选 2019-05-16
  • 初二少年与家长争吵离家出走 客运站人员发觉异样后拦下 2019-05-15
  • 陈海滢的专栏作者中国国家地理网 2019-05-14
  • 乐平市:开展流动党校“培训在基层”活动(图) 2019-05-13