• 机器人也能拥有“情商”?这个可以有 2019-07-19
  • 重庆“轮椅教师”高位截瘫仍坚守讲台 2019-07-07
  • 百度车联网携手宝马 合作伙伴全面升级为国际OEM厂商 2019-07-01
  • 全面从严治党永远在路上——辽宁代表团开放日侧记 2019-07-01
  • 【学习时刻】华侨大学黄日涵:“一带一路”盛会开启合作发展新篇章 2019-06-24
  • 秒变迷弟!吴建豪晒与甄子丹合影:偶像给我签名 2019-06-20
  • 军统头目戴笠留下哪些巨额遗产 令蒋介石身边人惊诧 2019-06-20
  • 初春喝藿香汤 解表化湿,散寒温经 2019-06-18
  • 新华时评:磋商,不等于反复折腾 2019-06-09
  • 天山特克斯峡谷 中国国家地理网 2019-06-08
  • 端午小长假珠海口岸将迎双向客流高峰 2019-06-08
  • 王朝崩塌!恒大半个月内双线出局 卡帅敲响下课警钟 2019-06-07
  • 一周人事:国务院发布任免刘伟当选北京市总工会主席 2019-06-07
  • 敞篷式设计 日产聆风Open Car官图发布 2019-06-06
  • 习近平为传统文化“代言” 2019-06-05
  • 香港赛马会原创绝杀:简单易扩展可控性强的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-07-19
  • 重庆“轮椅教师”高位截瘫仍坚守讲台 2019-07-07
  • 百度车联网携手宝马 合作伙伴全面升级为国际OEM厂商 2019-07-01
  • 全面从严治党永远在路上——辽宁代表团开放日侧记 2019-07-01
  • 【学习时刻】华侨大学黄日涵:“一带一路”盛会开启合作发展新篇章 2019-06-24
  • 秒变迷弟!吴建豪晒与甄子丹合影:偶像给我签名 2019-06-20
  • 军统头目戴笠留下哪些巨额遗产 令蒋介石身边人惊诧 2019-06-20
  • 初春喝藿香汤 解表化湿,散寒温经 2019-06-18
  • 新华时评:磋商,不等于反复折腾 2019-06-09
  • 天山特克斯峡谷 中国国家地理网 2019-06-08
  • 端午小长假珠海口岸将迎双向客流高峰 2019-06-08
  • 王朝崩塌!恒大半个月内双线出局 卡帅敲响下课警钟 2019-06-07
  • 一周人事:国务院发布任免刘伟当选北京市总工会主席 2019-06-07
  • 敞篷式设计 日产聆风Open Car官图发布 2019-06-06
  • 习近平为传统文化“代言” 2019-06-05
  • 11选5开奖号码查询 线上彩票投注网站 兜趣江西麻将 卡利亚里vs佛罗伦萨 30选5开奖 赌场大赢家怎么玩 天津十一选五规则 免费棋牌单机游戏斗牛 财神捕鱼最新版 acvs热那亚