首页 > 网站 > WEB开发 > 正文

转盘抽奖

2024-04-27 15:01:12
字体:
来源:转载
供稿:网友

 

html部分

<div class="turntableWap top10">    <table border="0" cellspacing="0">      <tr>        <td tag="0"><img src="../images/4.png" alt="4元"></td>        <td tag="1" class="even"><img src="../images/6.png" alt="6元"></td>        <td tag="2"><img src="../images/8.png" alt="8元"></td>        <td tag="3" class="even"><img src="../images/11.png" alt="11元"></td>      </tr>      <tr>        <td tag="13" class="even"><img src="../images/13.png" alt="13元"></td>        <td colspan="2" rowspan="3" class="zpBtn"><img src="../images/zpBtn.jpg" /></td>        <td tag="4"><img src="../images/40.png" alt="40元"></td>      </tr>      <tr>        <td tag="12"><img src="../images/80.png" alt="80元"></td>        <td tag="5" class="even"><img src="../images/125.png" alt="125元"></td>      </tr>      <tr>        <td tag="11" class="even"><img src="../images/250.png" alt="250元"></td>        <td tag="6"><img src="../images/400.png" alt="400元"></td>      </tr>      <tr>        <td tag="10"><img src="../images/1000.png" alt="1000元"></td>        <td tag="9" class="even"><img src="../images/iphone6.png" alt="iphone6"></td>        <td tag="8"><img src="../images/Thank2.png" alt="谢谢惠顾"></td>        <td tag="7" class="even"><img src="../images/500.png" alt="500元"></td>      </tr>    </table>    </div>

CSS部分,由于做的这个转盘是手机端的,采用的响应式布局

.turntableWap{ padding:1rem; background:url(../images/zpTabBg.jpg) no-repeat center; background-size:100% 100%;}.turntableWap table{ width:100%;}.turntableWap table td{ vertical-align:middle; text-align:center; background-color:#ecd295;}.turntableWap table td img{ width:100%; }.turntableWap table td.even{background-color:#f6e8c5}.turntableWap table td.active{ background-color:#ed9351;}

js部分

$(".turntableWap .table").css({"height":$(".turntableWap .table").width()});//做响应式布局,外table是等宽高var isdo = true;$(".zpBtn").on("click",function(){    var num = 13;//后台传入的奖品    var rotaNum = 14;//奖品数量    var count = -1;//高亮显示,旋转特效    var jishi = 0;//计时时间段    var speed = 50;//快速速度    var speedSlow = 200;//慢速速度    choujiang()//抽奖方法调用,在此处做判断调用choujiang(),并给num值    function choujiang(){        if(isdo){            isdo=false;            $(".turntableWap").css({"background-image":"url(../images/1.gif)"})            var c = setInterval(function(){                if(count >12){                    count = -1;                }                count = count+1;                jishi = jishi+1;                $(".turntableWap td").removeClass("active");                $(".turntableWap td[tag="+count+"]").addClass("active");                if(jishi>rotaNum*2){                    clearInterval(c);                    c = setInterval(function(){                        count = count+1;                        jishi = jishi+1;                        $(".turntableWap td").removeClass("active");                        $(".turntableWap td[tag="+count+"]").addClass("active");                        if(jishi>num+rotaNum*2){                            clearInterval(c);                            $(".turntableWap").css({"background-image":"url(../images/zpTabBg.jpg)"})                            isdo = true;                            var jp = $(".turntableWap td[tag="+count+"]").find("img").attr("alt")                            alert("恭喜您获取"+jp)                        }                    },speedSlow)                }            },speed)        }else{            return;        }    }})

 


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表