仿Taobao京东多规格筛选,转盘抽取奖金

作者: 关于计算机  发布:2019-11-23

转盘抽奖,转盘

图片 1

 

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;
        }
    }
})

 

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 ="e...

[html]
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JquerySort.aspx.cs" Inherits="demo_JquerySort" %> 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; 
 
<html xmlns="; 
<head runat="server">     
    <title>Jquery分类</title> 
    <script src="../Scripts/jquery-1.4.4.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
        $(function () { 
            //品牌 
            var alink01 = $("#linktype01").find("span"); 
            alink01.click(function () { 
                alink01.each(function () { 
                    $(this).removeClass("templinkactive").addClass("templink"); 
                }); 
                $(this).removeClass("templink").addClass("templinkactive"); 
                $("#Brand").val($(this).attr("tag")); 
            }) 
 
            //价格 
            var alink02 = $("#linktype02").find("span"); 
            alink02.click(function () { 
                alink02.each(function () { 
                    $(this).removeClass("templinkactive").addClass("templink"); 
                }); 
                $(this).removeClass("templink").addClass("templinkactive"); 
                $("#Price").val($(this).attr("tag")); 
            }) 
 
            //尺寸 
            var alink03 = $("#linktype03").find("span"); 
            alink03.click(function () { 
                alink03.each(function () { 
                    $(this).removeClass("templinkactive").addClass("templink"); 
                }); 
                $(this).removeClass("templink").addClass("templinkactive"); 
                $("#Size").val($(this).attr("tag")); 
                SetPara(); 
            }) 
        }); 
 
 
        function SetPara() { 
            var a = $("#Brand").val(); 
            var b = $("#Price").val(); 
            var c = $("#Size").val(); 
            alert("1.aspx?a=" + a + "&b=" + b + "&c=" + c); 
        }; 
    </script>  
    <style type="text/css">    
        .templinkactive   
        {   
            padding:5px;   
            text-decoration:none;   
            background-color:  #2788DA;   
            color:#ffffff;   
        }   
        .templink   
        {   
            cursor:pointer;   
            padding:5px;   
            text-decoration:none;   
        }    
        table tr{ height:35px;}    
    </style> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
        <table> 
            <tr id="linktype01"> 
                <td style="width:100px"> 
                    <b>笔记本品牌</b> 
                </td> 
                <td> 
                    <span class='templinkactive' tag="0">不限</span> 
                </td> 
                <td> 
                    <span class='templink' tag="100101">联想(Lenovo)</span> 
                </td> 
                <td> 
                    <span class='templink' tag="100102">宏碁(Acer)</span> 
                </td> 
                <td> 
                    <span class='templink' tag="100103">华硕(ASUS)</span> 
                </td> 
                <td> 
                    <span class='templink' tag="100104">戴尔(DELL)</span> 
                </td> 
                <td> 
                    <span class='templink' tag="100105">苹果(Apple)</span> 
                </td> 
                <td> 
                    <span class='templink' tag="100106">三星 (SAMSUNG)</span> 
                </td> 
            </tr> 
            <tr id="linktype02"> 
                <td style="width:100px"> 
                    <b>价格范围</b> 
                </td> 
                <td> 
                    <span class='templinkactive' tag="0">不限</span> 
                </td> 
                <td> 
                    <span class='templink' tag="100201">1000-2999</span> 
                </td> 
                <td> 
                    <span class='templink' tag="100202">3000-3499</span> 
                </td> 
                <td> 
                    <span class='templink' tag="100203">4000-4499</span> 
                </td> 
                <td> 
                    <span class='templink' tag="100204">5000-5999</span> 
                </td> 
                <td> 
                    <span class='templink' tag="100205">6000-6999</span> 
                </td> 
                <td> 
                    <span class='templink' tag="100206">7000及以上</span> 
                </td> 
            </tr> 
            <tr id="linktype03"> 
                <td style="width:100px"> 
                    <b>尺寸范围</b> 
                </td> 
                <td> 
                    <span class='templinkactive' tag="0" >不限</span> 
                </td> 
                <td> 
                    <span class='templink' tag="100301">8.9英寸及以下</span> 
                </td> 
                <td> 
                    <span class='templink' tag="100302">11英寸</span> 
                </td> 
                <td> 
                    <span class='templink' tag="100303">12英寸</span> 
                </td> 
                <td> 
                    <span class='templink' tag="100304">13英寸</span> 
                </td> 
                <td> 
                    <span class='templink' tag="100305">14英寸</span> 
                </td> 
                <td> 
                    <span class='templink' tag="100306">15英寸及以上</span> 
                    <input type="hidden" id="Brand" value="0" /> 
                    <input type="hidden" id="Price" value="0" /> 
                    <input type="hidden" id="Size" value="0" /> 
                </td> 
            </tr> 
        </table> 
    </div> 
    </form> 
</body> 
</html> 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JquerySort.aspx.cs" Inherits="demo_JquerySort" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";

<html xmlns=";
<head runat="server">   
    <title>Jquery分类</title>
    <script src="../Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            //品牌
            var alink01 = $("#linktype01").find("span");
            alink01.click(function () {
                alink01.each(function () {
                    $(this).removeClass("templinkactive").addClass("templink");
                });
                $(this).removeClass("templink").addClass("templinkactive");
                $("#Brand").val($(this).attr("tag"));
            })

            //价格
            var alink02 = $("#linktype02").find("span");
            alink02.click(function () {
                alink02.each(function () {
                    $(this).removeClass("templinkactive").addClass("templink");
                });
                $(this).removeClass("templink").addClass("templinkactive");
                $("#Price").val($(this).attr("tag"));
            })

            //尺寸
            var alink03 = $("#linktype03").find("span");
            alink03.click(function () {
                alink03.each(function () {
                    $(this).removeClass("templinkactive").addClass("templink");
                });
                $(this).removeClass("templink").addClass("templinkactive");
                $("#Size").val($(this).attr("tag"));
                SetPara();
            })
        });

        function SetPara() {
            var a = $("#Brand").val();
            var b = $("#Price").val();
            var c = $("#Size").val();
            alert("1.aspx?a=" + a + "&b=" + b + "&c=" + c);
        };
    </script>
    <style type="text/css">  
        .templinkactive 
        { 
            padding:5px; 
            text-decoration:none; 
            background-color:  #2788DA; 
            color:#ffffff; 
        } 
        .templink 
        { 
            cursor:pointer; 
            padding:5px; 
            text-decoration:none; 
        }  
        table tr{ height:35px;}  
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table>
            <tr id="linktype01">
                <td style="width:100px">
                    <b>笔记本品牌</b>
                </td>
                <td>
                    <span class='templinkactive' tag="0">不限</span>
                </td>
                <td>
                    <span class='templink' tag="100101">联想(Lenovo)</span>
                </td>
                <td>
                    <span class='templink' tag="100102">宏碁(Acer)</span>
                </td>
                <td>
                    <span class='templink' tag="100103">华硕(ASUS)</span>
                </td>
                <td>
                    <span class='templink' tag="100104">戴尔(DELL)</span>
                </td>
                <td>
                    <span class='templink' tag="100105">苹果(Apple)</span>
                </td>
                <td>
                    <span class='templink' tag="100106">三星 (SAMSUNG)</span>
                </td>
            </tr>
            <tr id="linktype02">
                <td style="width:100px">
                    <b>价格范围</b>
                </td>
                <td>
                    <span class='templinkactive' tag="0">不限</span>
                </td>
                <td>
                    <span class='templink' tag="100201">1000-2999</span>
                </td>
                <td>
                    <span class='templink' tag="100202">3000-3499</span>
                </td>
                <td>
                    <span class='templink' tag="100203">4000-4499</span>
                </td>
                <td>
                    <span class='templink' tag="100204">5000-5999</span>
                </td>
                <td>
                    <span class='templink' tag="100205">6000-6999</span>
                </td>
                <td>
                    <span class='templink' tag="100206">7000及以上</span>
                </td>
            </tr>
            <tr id="linktype03">
                <td style="width:100px">
                    <b>尺寸范围</b>
                </td>
                <td>
                    <span class='templinkactive' tag="0" >不限</span>
                </td>
                <td>
                    <span class='templink' tag="100301">8.9英寸及以下</span>
                </td>
                <td>
                    <span class='templink' tag="100302">11英寸</span>
                </td>
                <td>
                    <span class='templink' tag="100303">12英寸</span>
                </td>
                <td>
                    <span class='templink' tag="100304">13英寸</span>
                </td>
                <td>
                    <span class='templink' tag="100305">14英寸</span>
                </td>
                <td>
                    <span class='templink' tag="100306">15英寸及以上</span>
                    <input type="hidden" id="Brand" value="0" />
                    <input type="hidden" id="Price" value="0" />
                    <input type="hidden" id="Size" value="0" />
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

 

] %@ Page Language=C# AutoEventWireup=true CodeFile=JquerySort.aspx.cs Inherits=demo_JquerySort % !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN ...

本文由金沙澳门官网送注册58发布于关于计算机,转载请注明出处:仿Taobao京东多规格筛选,转盘抽取奖金

关键词: