123

minigame/WebContent/static/css/lottery.css

@@ -0,0 +1,137 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+.background {
+    width: 100%;
+    height: auto;
+}
+.pool {
+    position: absolute;
+    width: 84%;
+    height: auto;
+    left: 7%;
+    top: 250px;
+}
+.container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    position: absolute;
+    width: 76%;
+    height: 90%;
+    left: 11%;
+}
+.item {
+    border-radius: 18px;
+    width: 32%;
+}
+.active {
+    box-shadow : 0 0 0 2px aqua;
+}
+.title{
+    width: 100%;
+    text-align: center;
+    font-size: 20px;
+    font-weight: 700;
+    position: absolute;
+}
+.tips{
+    color: #470C82;
+    position: absolute;
+    width: 90%;
+    left: 5%;
+}
+.mask{
+    position: absolute;
+    top: 0;
+    height: 100%;
+    width: 100%;
+    background-color: rgba(0, 0, 0, 0.7);
+    z-index: 10;
+}
+.result{
+    position: absolute;
+    width: 100%;
+    left: 0;
+    top: 0;
+    z-index: 11;
+}
+.result_failed_button{
+    position: absolute;
+    left: 24%;
+    width: 52%;
+    z-index: 12;
+}
+.result_failed_text{
+    position: absolute;
+    width: 100%;
+    text-align: center;
+    z-index: 13;
+    color: white;
+    font-size: 20px;
+}
+.result_success_title{
+    position: absolute;
+    width: 100%;
+    text-align: center;
+    z-index: 12;
+    color: orange;
+    font-size: 20px;
+}
+
+.result_success_logo{
+    position: absolute;
+    width: 30%;
+    left: 35%;
+    z-index: 12;
+}
+input{
+    position: absolute;
+    left: 24%;
+    width: 45%;
+    z-index: 12;
+    height: 40px;
+    border: orange solid 3px;
+    border-radius: 40px;
+    padding-left: 20px;
+}
+.result_success_button{
+    position: absolute;
+    left: 24%;
+    width: 52%;
+    z-index: 12;
+}
+
+/*滚动*/
+.case {
+    position: absolute;
+    width: 95%;
+    left: 5%;
+    height: 70px;
+    overflow: hidden;
+}
+.case .part2 {
+    float: left;
+    width: 93%;
+    height: 70px;
+    text-indent: 1em;
+    overflow: hidden;
+}
+#part2 ul {
+    width: 100%;
+    height: auto;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+#part2 ul li {
+    width: 100%;
+    height: 30px;
+    font-size: 16px;
+    line-height: 30px;
+    color: white;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}

minigame/WebContent/static/lottery.html

@@ -6,146 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>抽奖</title>
-    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
-    <style>
-        body {
-            margin: 0;
-            padding: 0;
-        }
-        .background {
-            width: 100%;
-            height: auto;
-        }
-        .pool {
-            position: absolute;
-            width: 84%;
-            height: auto;
-            left: 7%;
-            top: 250px;
-        }
-        .container {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: space-around;
-            position: absolute;
-            width: 76%;
-            height: 90%;
-            left: 11%;
-        }
-        .item {
-            border-radius: 18px;
-            width: 32%;
-        }
-        .active {
-            box-shadow : 0 0 0 2px aqua;
-        }
-        .title{
-            width: 100%;
-            text-align: center;
-            font-size: 20px;
-            font-weight: 700;
-            position: absolute;
-        }
-        .tips{
-            color: #470C82;
-            position: absolute;
-            width: 90%;
-            left: 5%;
-        }
-        .mask{
-            position: absolute;
-            top: 0;
-            height: 100%;
-            width: 100%;
-            background-color: rgba(0, 0, 0, 0.7);
-            z-index: 10;
-        }
-        .result{
-            position: absolute;
-            width: 100%;
-            left: 0;
-            top: 0;
-            z-index: 11;
-        }
-        .result_failed_button{
-            position: absolute;
-            left: 24%;
-            width: 52%;
-            z-index: 12;
-        }
-        .result_failed_text{
-            position: absolute;
-            width: 100%;
-            text-align: center;
-            z-index: 13;
-            color: white;
-            font-size: 20px;
-        }
-        .result_success_title{
-            position: absolute;
-            width: 100%;
-            text-align: center;
-            z-index: 12;
-            color: orange;
-            font-size: 20px;
-        }
-        
-        .result_success_logo{
-            position: absolute;
-            width: 30%;
-            left: 35%;
-            z-index: 12;
-        }
-        input{
-            position: absolute;
-            left: 24%;
-            width: 45%;
-            z-index: 12;
-            height: 40px;
-            border: orange solid 3px;
-            border-radius: 40px;
-            padding-left: 20px;
-        }
-        .result_success_button{
-            position: absolute;
-            left: 24%;
-            width: 52%;
-            z-index: 12;
-        }
-
-        /*滚动*/
-        .case {
-            position: absolute;
-            width: 95%;
-            left: 5%;
-            height: 70px;
-            overflow: hidden;
-        }
-        .case .part2 {
-            float: left;
-            width: 93%;
-            height: 70px;
-            text-indent: 1em;
-            overflow: hidden;
-        }
-        #part2 ul {
-            width: 100%;
-            height: auto;
-            list-style: none;
-            padding: 0;
-            margin: 0;
-        }
-        #part2 ul li {
-            width: 100%;
-            height: 30px;
-            font-size: 16px;
-            line-height: 30px;
-            color: white;
-            overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-        }
-    </style>
+    <script src="js/jquery.min.js"></script>
+    <link rel="stylesheet" href="css/lottery.css" type="text/css" />
     <script type="text/javascript">
         var current = 0;
         var last = 0;
@@ -158,19 +20,39 @@
             $(window).resize(function () {
                 setPosition();
             });
+            
+            //获取
+            $.post("../prize/luckDrawList", {}, function(resp) {
+				if (resp.code == 'error') {
+					console.log(resp.code);
+				}else{
+					for(let index in resp.data){
+						$(".advertisement").append("<li>恭喜" + resp.data[index].nickName + "获得了" + resp.data[index].prize + "</li>")
+					}
+				}
+			});
+            
             //点击抽奖
             $(".button").click(function () {
                 if(enable == true){
-                    alert("抽奖开始");
-                    //进入不可点击状态
-                    enable = false;
-                    //设置初始速度
-                    speed = 60;
-                    //设置要中奖的位置
-                    threshold = 7;
-                    //配置移动次数
-                    last = 56 + threshold - current;
-                    setTimeout(function(){next(current)}, 1000);
+                	
+                	//获取
+                    $.post("../prize/luckDraw", {userId: 1}, function(resp) {
+        				if (resp.code == 'error') {
+        					console.log(resp.code);
+        				}else{
+        					console.log(resp);
+        					//进入不可点击状态
+                            enable = false;
+                            //设置初始速度
+                            speed = 60;
+                            //设置要中奖的位置
+                            threshold = 7;
+                            //配置移动次数
+                            last = 56 + threshold - current;
+                            setTimeout(function(){next(current)}, 1000);
+        				}
+        			});
                 }
             });
             //谢谢惠顾后点击的按钮
@@ -260,26 +142,7 @@
     <div class="case">
         <div class="part2" id="part2">
             <div id="scroll1">
-                <ul>
-                    <li>恭喜XXXX获得YYYY</li>
-                    <li>恭喜XXXX获得YYYY</li>
-                    <li>恭喜XXXX获得YYYY</li>
-                    <li>恭喜XXXX获得YYYY</li>
-                    <li>恭喜XXXX获得YYYY</li>
-                    <li>恭喜XXXX获得YYYY</li>
-                    <li>恭喜XXXX获得YYYY</li>
-                    <li>恭喜XXXX获得YYYY</li>
-                    <li>恭喜XXXX获得YYYY</li>
-                    <li>恭喜XXXX获得YYYY</li>
-                    <li>恭喜XXXX获得YYYY</li>
-                    <li>恭喜XXXX获得YYYY</li>
-                    <li>恭喜XXXX获得YYYY</li>
-                    <li>恭喜XXXX获得YYYY</li>
-                    <li>恭喜XXXX获得YYYY</li>
-                    <li>恭喜XXXX获得YYYY</li>
-                    <li>恭喜XXXX获得YYYY</li>
-                    <li>恭喜XXXX获得YYYY</li>
-                    <li>恭喜XXXX获得YYYY</li>
+                <ul class="advertisement">
                 </ul>
             </div>
             <div id="scroll2"></div>