jquery抽奖

最新推荐文章于 2023-10-18 19:16:30 发布

安半仙

最新推荐文章于 2023-10-18 19:16:30 发布

阅读量422

点赞数

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>2018xx互联网公司会抽奖现场</title>

</head>
<body>
   
   <div class="main-box">
   
   <div class="title-box">
       <img src="images/pc-titile.png" alt=""/>
   </div>
   
   <div class="desc-box">
       <img src="images/dianzhui.png" alt=""/>
   </div>
   <div class="main">
       
       <div class="num-bg-box">
           
           <div class="num_box">
               <div class="num"></div>
               <div class="num"></div>
               <div class="num"></div>
               <div class="num"></div>
               <div class="num"></div>
               <div class="num"></div>
               <div class="num"></div>
               <div class="num"></div>
               <div class="num"></div>
               <div class="num"></div>
               <div class="num"></div>
           </div>
       </div>
   </div>
   </div>
   
   <div class="btn-box">
       <div class="btn start">开始抽奖</div>
       <div class="btn stop" >停止抽奖</div>
   </div>

   
   <script>

       var u = 100;
       var n = 1;
       var timer; //定义滚动的定时器

       //思路把result变活

       var result = 18912345678; //指定中奖结果,可以抽取指定数组中的某一个


       //var phonarray= new Array('15142222234','13223455432','13338388888','15490909090','15545645455','15642222234','13723455432','13838388888','15990909090','15090909090');

       /*每个人只有3次
       var phonarray= new Array('15142222234','13223455432');
       var phone3=[];
       for(var i=0;i< phonarray.length ;i++){
       phone3[ phonarray[i] ]=0;
       }*/

       var isBegin = false; //标识能否开始抽奖

       $(".num").css('backgroundPositionY',200);//开始13888888888
       $(".num").eq(0).css('backgroundPositionY',-100)
       $(".num").eq(1).css('backgroundPositionY',-300)

       //执行数字滚动
       function run(){
           n++;
           $(".num").each(function(index){
               var _num = $(this);
               _num.animate({
                   backgroundPositionY: ((u+1)*n*(index+1))
               },100);

           });
           timer = window.setTimeout(run,100);
           isBegin = true ;
       }



       $(function(){
           //开始抽奖
           $('.start').click(function(){
               if(isBegin){
                   return false;
               }else{


               //思活：变活
                   //实现，比如10个手机号码，随机抽一个

                   var rand_start=1;
                   var rand_end=phonarray.length+1;
                   //alert(rand_end);
                   var rand=Math.floor(Math.random()*(rand_end-rand_start)+rand_start);
                   result=phonarray[rand-1];

                   //每个人只有1次
                   //phonarray.splice(rand-1,1);

                   //每个人只有3次
                   phone3[result]++;
                   if(phone3[result]>=3){
                   phonarray.splice(rand-1,1);
                   }



                   //$.ajax() 入库


                   run();
               }





           });
           //停止抽奖
           $('.stop').click(function(){

               var num_arr = (result+'').split('');

               $(".num").each(function(index){
                   var _num = $(this);
                   setTimeout(function(){
                       _num.animate({
                           backgroundPositionY: (u*60) - (u*num_arr[index])
                       },{
                           duration: 500,
                           easing: "easeInOutCirc",
                           complete: function(){
                               if(index == 10){
                                   isBegin = false;
                               }
                           }
                       });
                   },100);
               });
               window.clearTimeout(timer);
               isBegin = false ;
           });
       });
   </script>

</body>
</html>

安半仙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery抽奖

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;2018xx互联网公司会抽奖现场&lt;/title&gt; &lt
复制链接

扫一扫