YzXyh
/
202309U


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407
							@using CommonTool
@using YZXYH.Repository.Models
@{
    string color = ViewBag.Color;
}
<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
    <title>盐城中学校友会——抽奖</title>

    <meta name="keywords" content="盐城中学,盐中校友会,校友会,盐中">
    <meta name="description" content="">
    <link href="~/Content/css/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/css/font-awesome.min.css" rel="stylesheet" />
    <link href="~/Content/css/animate.min.css" rel="stylesheet" />
    <script src="~/Content/js/jquery.min.js"></script>
    <script src="~/Content/js/bootstrap.min.js"></script>
    <script src="~/Scripts/jquery.signalR-2.4.1.min.js"></script>
    <script src="~/signalr/hubs"></script>
    <style>
        body , .draw:before{
            background: url('@(GlobalConst.LotteryBackGroupImageUrl)')   0 / cover fixed;
        }
        .draw {
            color: #fff;
            color: @(Html.Raw(color));
        }
    </style>
    <style>
        body {
            /*background: linear-gradient(135deg, #6e8efb, #a777e3);
            background-repeat: no-repeat;
            background-size: 100%;*/
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            color: #000;
            font-family: '微软雅黑', sans-serif;
            font-size: 16px;
            position: relative;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        /* body:before{
            background: linear-gradient(0,rgba(255,255,255,0.8),rgba(255,255,255,0.6));
           content: '';
           position: absolute;
           top: 0;
           right: 0;
           bottom: 0;
           left: 0;
           z-index:-1;
        } */
        .draw {
            position: relative;
            overflow: hidden;
            cursor: none;
            width: 1000px;
            height: 100vh;
            padding: 0 20px;
            overflow: hidden;
            position: relative;
            border-radius: 20px;
            /*margin-top: -200px;*/
            z-index: 2;
            /*--h: 100vh;*/
            display: flex;
            justify-content: center;
            align-items: center;
        }

            .draw:before {
                content: '';
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                filter: blur(15px);
                margin: -30px;
                z-index: -1;
            }

        .draw-box {
            height: 700px;
        }

        .title {
            text-align: center;
            color: inherit;
            font-size: 60px;
            margin-top: 60px;
            margin-bottom: 30px;
        }

        #luck-draw-box {
            /*margin-top: -30px;*/
            height: 300px;
            overflow: hidden;
        }

        .luck-draw-box {
            /*--h: 100vh;*/
        }

        .luck-draw-info {
            list-style: none;
            text-align: center;
            font-size: 80px;
            /*line-height:calc(var(--h) - 50px);*/
            line-height: 300px;
        }

        .draw-list-box {
            /*--h: calc(100vh - 550px);*/
            /*--h: 100vhx;*/
        }


            .draw-list-box .list {
                padding: 10px 20px;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                flex-wrap: wrap;
                font-weight: 600;
            }

                .draw-list-box .list .item {
                    text-align: center;
                    color: inherit;
                    /*font-weight: bold;*/
                    font-family: "仿宋";
                }

            .draw-list-box .list-0 .item {
                padding-top: 50px;
                font-size: 75px;
                width: 100%;
            }

            .draw-list-box .list-1 .item {
                font-size: 45px;
                width: 100%;
            }

            .draw-list-box .list-2 .item {
                font-size: 40px;
                width: 50%;
            }

            .draw-list-box .list-3 .item {
                font-size: 40px;
                width: 33%;
            }

            .draw-list-box .list-4 .item {
                font-size: 30px;
                width: 33%;
            }

        .group {
            display: none;
        }

        .group, .type {
            font-size: 100%;
            font-family: "楷体";
            font-weight: bold
        }
    </style>
</head>
<body class="">
    @*<div id="luck-draw" style="display: none">
            <div class="luck-draw-box draw">
                <div class="draw-box">
                    <h2 class="title">
                        <span class="group"></span><span class="type"></span> 抽奖中
                    </h2>
                    <ul class="" id="luck-draw-box">
                        <li class="luck-draw-info"></li>
                    </ul>
                </div>

            </div>

        </div>*@
    <div id="draw-list" style="display: none">
        <div class="draw-list-box draw">
            <div class="draw-box">
                <h2 class="title">
                    <span class="group"></span><span class="type"></span> <span class="content">中奖名单</span>
                </h2>
                <div id="list-box" style="">
                    <div class="list list-3"></div>
                </div>
            </div>
        </div>

    </div>
    <div class="" style="display: none">
        <audio id="voice" controls="controls" preload="auto" loop src="@(GlobalConst.LotteryMusicUrl)"></audio>
    </div>
    <script>
        //var userData = [];
        //var flag = true, interval = 150;
        //var colors = ['#6666FF', '#66FF99', '#FF6666', '#FF66CC', '#FF6699', '#99FF99', '#9966FF', '#666699'];
        //function Run() {
        //    var info = userData[parseInt(Math.random() * userData.length, 10)];
        //    if (info) {
        //        //var color = colors[parseInt(Math.random() * colors.length, 10)];
        //        //+ (info.Mobile ? ' ' + info.Mobile : '')
        //        $('<li class="luck-draw-info">' + info.LotteryName + '</li>')
        //            .appendTo('#luck-draw-box').css({ 'opacity': '0' }).animate({ 'opacity': '1' }, interval);
        //        $('#luck-draw-box .luck-draw-info').eq(0).animate({ 'opacity': '0' }, interval, function () {
        //            $(this).remove();
        //            if (flag) {
        //                Run();
        //            }
        //        });
        //    }

        //}

        function FormatterItem(data) {
            if (!data || data.length <= 0) {
                return '';
            }
            var str = '';
            for (var i = 0; i < data.length; i++) {
                var item = data[i];
                //var info = item.Mobile ? item.Mobile + '(' + item.LotteryName + ')' : item.LotteryName;
                str += '<div class="item">' + item.LotteryName + '</div>';
            }
            return str;
        }
    </script>

    <script>
    var timerInterval;
    $(function() {
        var chat = $.connection.xyhHub;
        //抽奖结果
        chat.client.showLotteryMsg = function(msg) {
            if (msg) {
                var data = JSON.parse(msg);
                if (data) {
                    //flag = false;
                    //$('#luck-draw').hide();
                    clearInterval(timerInterval);
                    var classStr = 'list list-' +
                    (data.LotteryRecord.length <= 1
                        ? '0'
                        : data.LotteryRecord.length <= 6
                        ? '1'
                        : data.LotteryRecord.length <= 10
                        ? '2'
                        : data.LotteryRecord.length <= 18
                        ? '3'
                        : '4');
                    var str = '<div class="' + classStr + '">';
                    str += FormatterItem(data.LotteryRecord);
                    str += '</div>';
                    var group = data.LotteryGroup ? data.LotteryGroup : "";
                    var type = data.LotteryType ? data.LotteryType : "";
                    $('#draw-list .type').html(type);
                    $('#draw-list .group').html(group);
                    $('#draw-list .content').html('中奖名单');
                    $('#list-box').html(str);
                    $('#draw-list').fadeIn(800);
                    console.log("ShowLotteryMsg：", "显示抽奖结果");
                } else {
                    console.log("ShowLotteryMsg：", msg);
                }
            } else {
                console.log("ShowLotteryMsg错误：", msg);
            }
        }
        //开始抽奖
        chat.client.startLotteryMsg = function(msg) {
            if (msg) {
                console.log("StartLotteryMsg：", msg);
                var data = JSON.parse(msg);
                $.ajax({
                    url: '@Url.Action("GetAllLottery", "LuckDraw")',
                    type: 'post',
                    data: { LotteryGroup: data.LotteryGroup },
                    success: function(res) {
                        //if (res ) {
                        //    userData = res;
                        //}
                        var group = data.LotteryGroup ? data.LotteryGroup : "";
                        var type = data.LotteryType ? data.LotteryType : "";
                        $('#draw-list .type').html(type);
                        $('#draw-list .group').html(group);
                        $('#draw-list .content').html('抽奖中...');
                        //$('#draw-list').hide();
                        //$('#luck-draw').fadeIn(400);
                        //flag = true;
                        //Run();
                        $('#draw-list').fadeIn(800);
                        function times() {

                            var res2 = getArrayItems(res, data.LotteryCount);

                            var classStr = 'list list-' +
                            (res2.length <= 1
                                ? '0'
                                : res2.length <= 6
                                ? '1'
                                : res2.length <= 10
                                ? '2'
                                :res2.length <= 18
                                ? '3'
                                : '4');
                            var str = '<div class="' + classStr + '">';
                            str += FormatterItem(res2);
                            str += '</div>';
                            $('#list-box').html(str);
                        }
                        timerInterval = setInterval(times, 0);

                        console.log("StartLotteryMsg：","开始抽奖");
                    }
                });

            } else {
                console.log("StartLotteryMsg错误消息：", msg);
            }
        }
        //刷新页面
        chat.client.getReload = function(msg) {
            if (msg) {
                console.log("Reload：", msg);
                window.location.reload();
            } else {
                console.log("getReload错误消息：", msg);
            }
        }
        //背景音乐
        var voice = $('#voice')[0];
        chat.client.getMusic = function(msg) {
            if (msg==="0") {
                voice.pause();
            } else if (msg==="1") {
                voice.play();
            }else {
                console.log("getMusic错误消息：", msg);
            }
        }
        //字体颜色
        chat.client.textColor = function(msg) {
            if (msg) {
                $('.draw').css("color", msg);
            } else {
                console.log("textColor错误消息：", msg);
            }
        }

    });


    $.connection.hub.start().done(function() {
        console.log("XYH:Signalr已连接服务器！");
    });

    function getArrayItems(arr, num) {
        //新建一个数组,将传入的数组复制过来,用于运算,而不要直接操作传入的数组;
        var tempArray = new Array();
        for (var index in arr) {
            if (arr.hasOwnProperty(index)) {
                tempArray.push(arr[index]);
            }
        }
        //取出的数值项,保存在此数组
        var reArray = new Array();
        for (var i = 0; i < num; i++) {
            //判断如果数组还有可以取出的元素,以防下标越界
            if (tempArray.length > 0) {
                //在数组中产生一个随机索引
                var arrIndex = Math.floor(Math.random() * tempArray.length);
                //将此随机索引的对应的数组元素值复制出来
                reArray[i] = tempArray[arrIndex];
                //然后删掉此索引的数组元素,这时候temp_array变为新的数组
                tempArray.splice(arrIndex, 1);
            } else {
                //数组中数据项取完后,退出循环,比如数组本来只有10项,但要求取出20项.
                break;
            }
        }
        return reArray;
    }
    </script>

</body>
</html>