抽奖活动

最新推荐文章于 2021-08-03 19:37:33 发布
koga007
最新推荐文章于 2021-08-03 19:37:33 发布
阅读量192
点赞数
本文链接：https://blog.csdn.net/qq_35504206/article/details/79086646
版权
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link type="text/css" rel="stylesheet" href="css/skin.css">
    <link type="text/css" rel="stylesheet" href="js/layer/skin/layer.css">
    <link type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="css/css.css">
    <style>
        h3,h4,h5{
            text-align: center;
            cursor: default;
        }
        .table>tbody>tr:last-child>td{
            font-weight: normal;
        }
        .table>thead>tr>th{
            border: 1px solid #ddd;
        }

    </style>
</head>
<body>
<div class="winBox">
    <div class="winInnerBox " style="width:90%;margin: 0px auto;position: relative;">
        <div class="winLeft " style="position: absolute;left: 25%;">
            <!--抽奖-->
            <div class="flexBox " style="height: 100%">
                <div id="turnTableBox" class="">
                    <div class="turnTable" id="turnTable">

                    </div>
                    <div class="pointer" id="pointer">

                    </div>
                </div>
                <div class="btnBox ">
                    <p><button class="btn" id="PrepDataBtn" style="opacity: .65;">准备数据</button></p>
                    <p><button class="btn" id="btn" disabled>抽奖</button></p>
                </div>
            </div>
        </div>
        <div class="winRight hiden" id="winRight" style="margin-left: 30px;position: absolute;right:0px;width: 600px;">
            <!--摇奖结果信息-->
            <div id="tableBox " class=""  style="padding-top: 30px;width: 100%;height: 302px;">
                <h5>中奖发票信息如下</h5>
                <!--===================表格===========================-->
                <div class="no-padding " id="winForm" >
                    <table id="table" class="table table-bordered table-hover no-margin-bottom no-border-top" style="margin-bottom: 0px;border-bottom-width: 0px;">
                        <thead id="tableTitle">

                        </thead>
                        <tbody id="tbody" >
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
<script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="js/jQueryRotate.2.2.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/layer.js"></script>
<script>

    window.onload = function(){
        var tableCont = document.querySelector('#winForm');
        function scrollHandle (e){
            var scrollTop = this.scrollTop;
            this.querySelector('thead').style.transform = 'translateY(' + scrollTop + 'px)';
        }
        tableCont.addEventListener('scroll',scrollHandle)
    }
    /*
    * 抽发票
    * */
    showData();
    function showData(){
        var money = true;
        var table = document.getElementById("table");
        var trs = document.getElementsByTagName("tr");
        var tableTitle = {
            "invoCode":"发票代码",
            "invoNum":"发票号码",
            "winMoney":"中奖金额",
            "winPhone":"中奖手机号"
        };
        var tableBody  = [{"invoCode":"1302355","invoNum":"31313131","winMoney":"30.30","winPhone":"13100000001"},
                          {"invoCode":"1302355","invoNum":"31313131","winMoney":"30.30","winPhone":"13100000001"},
                          {"invoCode":"1302355","invoNum":"31313131","winMoney":"30.30","winPhone":"13100000001"},
                          {"invoCode":"1302355","invoNum":"31313131","winMoney":"30.30","winPhone":"13100000001"},
                          {"invoCode":"1302355","invoNum":"31313131","winMoney":"30.30","winPhone":"13100000001"},
                          {"invoCode":"1302355","invoNum":"31313131","winMoney":"30.30","winPhone":"13100000001"},
                          {"invoCode":"1302355","invoNum":"31313131","winMoney":"30.30","winPhone":"13100000001"},
                          {"invoCode":"1302355","invoNum":"31313131","winMoney":"30.30","winPhone":"13100000001"},
                            {"invoCode":"1302355","invoNum":"31313131","winMoney":"30.30","winPhone":"13100000001"},
                            {"invoCode":"1302355","invoNum":"31313131","winMoney":"30.30","winPhone":"1310000000tffffffdsewrwrwrwrwrwrwrwrwr1"},
                            {"invoCode":"1302355","invoNum":"31313131","winMoney":"30.30","winPhone":"13100000001"},
                            {"invoCode":"1302355","invoNum":"31313131","winMoney":"30.30","winPhone":"13100000001"},
                            {"invoCode":"1302355","invoNum":"31313131","winMoney":"30.30","winPhone":"13100000001"},
                            {"invoCode":"1302355","invoNum":"31313131","winMoney":"30.30","winPhone":"13100000001"},
                            {"invoCode":"1302355","invoNum":"31313131","winMoney":"30.30","winPhone":"13100000001"}];
        var titleHtml = "<tr><th  >"+tableTitle.invoCode+"</th>"+
                "<th >"+tableTitle.invoNum+"</th>"+
                "<th >"+tableTitle.winMoney + "</th>"+
                "<th >"+tableTitle.winPhone+ "</th>"+
                "</tr>";
        $("#tableTitle").html(titleHtml);
        var bodyHtml = "",rowHtml = "";
        for(var n=0;n<tableBody.length;n++){
            rowHtml += "<td>"+tableBody[n].invoCode+"</td>"+
                    "<td>"+tableBody[n].invoNum+"</td>"+
                    "<td>"+tableBody[n].winMoney+"</td>"+
                    "<td>"+tableBody[n].winPhone+"</td>";
            bodyHtml +=  "<tr>"+rowHtml+"</tr>";
            rowHtml = "";
        }
        $("#tbody4").html(bodyHtml);
        $("#tbody").html(bodyHtml);
    }
    //准备数据
   /* $("#PrepDataBtn").click(function(){
        var thisObj = $(this);
        thisObj.attr("disabled",true).css({"cursor":"not-allowed"});
        setTimeout(function(){
            thisObj.html("准备完毕");
            $("#btn").attr("disabled",false);
        },3000);
    });
    function showTable(){
        $("#PrepDataBtn").attr("disabled",false).css({"cursor":"pointer"}).html("准备数据");

        /!*layer.open({
            type: 1,
            title:'中奖发票信息',
            area: ['520px','auto'],
            fixed: false, //不固定
            maxmin: true,
            content: $('#tableBox')
        });*!/
    }*/
    $("#PrepDataBtn").click(function(){
        var thisObj = $(this);
        thisObj.attr("disabled",true).css({"cursor":"not-allowed"});
        setTimeout(function(){
            thisObj.html("准备完毕");
            $("#btn").attr("disabled",false);
        },1000);
    });
    $(function(){
        var timeOut = function(){  //超时函数
            $("#turnTable").rotate({
                angle:0,
                duration: 10000,
                animateTo: 2160,
                callback:function(){
                    alert('网络超时')
                }
            });
        };
        var rotateFunc = function(awards,angle,text){
            $("#turnTable").rotate({
                angle:0,
                duration: 5000,
                animateTo: angle+1440,
                callback:function(){
                   moveTable();
                    //alert(text);
                }
            });
        };
        $("#btn").rotate({bind:{
                click: function(){
                    var time = [0,1];
                    time = time[Math.floor(Math.random()*time.length)];
                    if(time==0){
                        //timeOut(); //网络超时
                    }
                    if(time==1){
                        var data = [1,2,3,0]; //返回的数组
                        data = data[Math.floor(Math.random()*data.length)];
                        if(data==1){
                            rotateFunc(1,157,'恭喜您抽中的一等奖');
                        }
                        if(data==2){
                            rotateFunc(2,247,'恭喜您抽中的二等奖');
                        }
                        if(data==3){
                            rotateFunc(3,22,'恭喜您抽中的三等奖');
                        }
                        if(data==0){
                            var angle = [67,112,202,292,337];
                            angle = angle[Math.floor(Math.random()*angle.length)];
                            rotateFunc(0,angle,'很遗憾，这次您未抽中奖');
                        }
                    }
                }
            }
        });
    });
    //显示数据
    function moveTable(){
        $(".winLeft").animate({left:"0"},'fast');
        $("#winRight").show(500);
    }
</script>
</html>