转盘抽奖

来源：互联网发布：mac pro 如何散热编辑：程序博客网时间：2024/04/30 05:18
这里写图片描述
<!DOCTYPE html><!-- saved from url=(0030)http://localhost:90/choujiang/ --><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title></title></head><body><style> .box{ width:400px; height:400px; top:50%; left:50%; margin-left:-200px; margin-top:-200px;  position:absolute; background:#C4C4C4;border-radius: 200px;box-shadow:1px 1px 20px 15px #C5BFBF;font-family:'黑体';font-weight:bold;font-size:14px;}.child{ width:198px; height:198px; float:left; border:1px #193EB3 solid; background:#DAEB33; line-height:198px; text-align:center;}.list1 { border-radius: 199px 0px 0px 0px; border-left:1px #eee solid;border-top:1px #eee solid; line-height:230px;}.list2 { border-radius:  0px 199px 0px 0px; border-right:1px #eee solid;border-top:1px #eee solid; line-height:230px;}.list4 { border-radius:  0px 0px  0px 199px; border-left:1px #eee solid;border-bottom:1px #eee solid; line-height:150px;}.list3 { border-radius:  0px 0px 199px 0px ; border-right:1px #eee solid;border-bottom:1px #eee solid; line-height:150px;}.button{ position:absolute; width:80px; height:80px; left:50%; top:50%; margin-left:-40px; font-size:18px; border:none; font-weight:bold;margin-top:-40px; border-radius:40px; background:#2BC73D; line-height:80px; text-align:center; cursor:pointer;}.button:hover{box-shadow:1px 1px 20px 15px #C5BFBF;background:red;}</style><!--header--><div class="box grad"><div class="list">  <div class="child list1" style="background: rgb(218, 235, 51);">一等奖：空气清新器</div>  <div class="child list2" style="background: red;">二等奖：精美四件套</div>  <div class="child list4" style="background: rgb(218, 235, 51);">鼓励奖：肴肉蘸醋</div>  <div class="child list3" style="background: rgb(218, 235, 51);">三等奖：多功能足浴盆</div></div><button class="button" style="background: rgb(43, 199, 61);">抽奖</button></div><script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script><script>$(function() {   // 中奖概率数组   var array1 = new Array(4,4,2,4,4,3,4,1,4);   var cishu = 40;// 默认先转40次   var yushu = 0; // 除4余数   var miao = 100;// 初始转速   var num = 0;   // 随机数    var count = 0; // 计数器   $(".button").click(function(){     $(this).attr({"disabled":"disabled"});     $(this).css('background','#c4c4c4');      yushu = 0; // 除4余数     miao = 100;// 初始转速      var len = array1.length;     var irandom = parseInt(Math.random()*len+1);     num = cishu + array1[irandom-1];// 取1-30的随机数     count = 0;     setTimeout(zhuandong, 300);     //if(array1[irandom-1] != 4)     {        var newarry = new Array();        var bremove = false;        for(var i=0;i<array1.length; i++)        {          if( (array1[i]!=array1[irandom-1]) || bremove)           newarry.push(array1[i]);          if(array1[i]==array1[irandom-1])           bremove = true;        }        array1 = newarry;     }   });  function zhuandong(){    count++;    yushu = count%4;    if(yushu==0)     {       yushu = 4;      if(count>30)      { miao = miao<250?miao+50:miao;}      else      { miao = miao>100?miao-50:miao;}    }    $(".child").css('background','#DAEB33');     $(".list"+yushu).css('background','red');    num--;    if(num<=0)    {       setTimeout(function(){           alert("恭喜您喜中："+$(".list"+yushu).html());            $(".button").removeAttr("disabled");            $(".button").css('background','#2BC73D');          }, 500);    }    else{      setTimeout(zhuandong, miao);    }  }});</script></body></html>
0 0