Home Explore Help
Register Sign In
wutt
/
game
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Merge branch 'master' of http://47.100.37.243:10080/wutt/game

351035557@qq.com 5 years ago
parent
820dcc98d0 c629e2ea9f
commit
3ac79071b2
21 changed files with 340 additions and 0 deletions
Unified View Show Diff Stats
  1. 137 0
      minigame/WebContent/static/css/lottery.css
  2. BIN
      minigame/WebContent/static/images/lottery_background.png
  3. BIN
      minigame/WebContent/static/images/lottery_background2.png
  4. BIN
      minigame/WebContent/static/images/lottery_button.png
  5. BIN
      minigame/WebContent/static/images/lottery_pool.png
  6. BIN
      minigame/WebContent/static/images/result_failed.png
  7. BIN
      minigame/WebContent/static/images/result_failed_button.png
  8. BIN
      minigame/WebContent/static/images/result_success.png
  9. BIN
      minigame/WebContent/static/images/result_success_button.png
  10. BIN
      minigame/WebContent/static/images/reward_book.png
  11. BIN
      minigame/WebContent/static/images/reward_book2.png
  12. BIN
      minigame/WebContent/static/images/reward_null.png
  13. BIN
      minigame/WebContent/static/images/reward_oil10.png
  14. BIN
      minigame/WebContent/static/images/reward_oil10_2.png
  15. BIN
      minigame/WebContent/static/images/reward_oil5.png
  16. BIN
      minigame/WebContent/static/images/reward_oil5_2.png
  17. BIN
      minigame/WebContent/static/images/reward_oil60.png
  18. BIN
      minigame/WebContent/static/images/reward_oil60_2.png
  19. BIN
      minigame/WebContent/static/images/reward_soap.png
  20. BIN
      minigame/WebContent/static/images/reward_soap2.png
  21. 203 0
      minigame/WebContent/static/lottery.html

+ 137 - 0
minigame/WebContent/static/css/lottery.css
View File 

@@ -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;

+}

BIN
minigame/WebContent/static/images/lottery_background.png
View File


BIN
minigame/WebContent/static/images/lottery_background2.png
View File


BIN
minigame/WebContent/static/images/lottery_button.png
View File


BIN
minigame/WebContent/static/images/lottery_pool.png
View File


BIN
minigame/WebContent/static/images/result_failed.png
View File


BIN
minigame/WebContent/static/images/result_failed_button.png
View File


BIN
minigame/WebContent/static/images/result_success.png
View File


BIN
minigame/WebContent/static/images/result_success_button.png
View File


BIN
minigame/WebContent/static/images/reward_book.png
View File


BIN
minigame/WebContent/static/images/reward_book2.png
View File


BIN
minigame/WebContent/static/images/reward_null.png
View File


BIN
minigame/WebContent/static/images/reward_oil10.png
View File


BIN
minigame/WebContent/static/images/reward_oil10_2.png
View File


BIN
minigame/WebContent/static/images/reward_oil5.png
View File


BIN
minigame/WebContent/static/images/reward_oil5_2.png
View File


BIN
minigame/WebContent/static/images/reward_oil60.png
View File


BIN
minigame/WebContent/static/images/reward_oil60_2.png
View File


BIN
minigame/WebContent/static/images/reward_soap.png
View File


BIN
minigame/WebContent/static/images/reward_soap2.png
View File


+ 203 - 0
minigame/WebContent/static/lottery.html
View File 

@@ -0,0 +1,203 @@
 
+<!DOCTYPE html>

+<html lang="en">

+

+<head>

+    <meta charset="UTF-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="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;

+        var threshold = 0;

+        var speed = 1;

+        var enable = true;

+        $(function () {

+            //进入和窗口缩放时重新设置内容位置

+            setPosition();

+            $(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){

+                	

+                	//获取

+                    $.post("../prize/luckDraw", {userId: 6}, function(resp) {

+        				if (resp.code == 'error') {

+        					console.log(resp.code);

+        					alert(resp.msg);

+        				}else{

+        					//进入不可点击状态

+                            enable = false;

+                            //设置初始速度

+                            speed = 60;

+                            //设置要中奖的位置 0手账 2 1升 4谢谢惠顾 5肥皂 6 12瓶 7 500毫升

+                            if(resp.data.prizeLevel == -1){

+                                threshold = 4;

+                            }else if(resp.data.prizeLevel == 0){

+                            	threshold = 6;

+                            }else if(resp.data.prizeLevel == 1){

+                            	threshold = 7;                            	

+                            }else if(resp.data.prizeLevel == 2){

+                            	threshold = 2;                            	

+                            }else if(resp.data.prizeLevel == 3){

+                            	threshold = 5;                            	

+                            }else if(resp.data.prizeLevel == 4){

+                            	threshold = 0;           	

+                            }else{

+                            	threshold = 4;

+                            }

+                            //配置移动次数

+                            last = 56 + threshold - current;

+                            setTimeout(function(){next(current)}, 1000);

+        				}

+        			});

+                }

+            });

+            //谢谢惠顾后点击的按钮

+            $(".result_failed_button").click(function () {

+                alert("点击了再玩一次");

+            });

+            

+        });

+

+        //重新设置内容位置

+        function setPosition() {

+            $(".pool").css("top", $(document).width() / 1.9);

+            $(".container").css("top", $(document).width() / 1.75).css("height", $(document).width() / 1.6);

+            $(".item").css("height", $(".container").width() / 3.9);

+            $(".title").css("top", $(".container").width() * 2.35);

+            $(".tips").css("top", $(".container").width() * 2.45);

+            $(".mask").css("height", $(document).height());

+            $(".result_failed_button").css("top", $(".container").width() * 1.6);

+            $(".result_success_title").css("top", $(".container").width() * 0.66);

+            $(".result_success_logo").css("top", $(".container").width() * 0.9);

+            $(".result_success_name").css("top", $(".container").width() * 1.35);

+            $(".result_success_phone").css("top", $(".container").width() * 1.59);

+            $(".result_success_button").css("top", $(".container").width() * 1.82);

+            $(".case").css("top", $(".container").width() * 1.9);

+        }

+

+        //激活移动

+        function next() {

+            $(".item" + current).removeClass("active");

+            $(".item" + (current + 1) % 8).addClass("active");

+            current = (current + 1) % 8;

+            //10以下开始减速

+            if(last < 10){

+                speed += 60;

+            }

+            //剩余次数8以下并且到了号时

+            if(!(last-- < 8 && current == threshold)){

+                setTimeout(function(){next()}, speed);

+            }else{

+                setTimeout(function(){

+                    alert("抽奖完毕，抽到了" + threshold + "号");

+                    enable = true;

+                }, 1500);

+            }

+        }

+

+        //中奖之后

+        function success(){

+            $(".mask").show();

+            $(".success").show();

+            $(".result_success_title").show();

+            $(".result_success_logo").show();

+            $(".result_success_name").show();

+            $(".result_success_phone").show();

+            $(".result_success_button").show();

+        }

+

+        //谢谢惠顾

+        function failed(){

+            $(".mask").show();

+            $(".failed").show();

+            $(".result_failed_button").show();

+        }

+    </script>

+</head>

+

+<body>

+    <img class="background" src="images/lottery_background.png">

+    <img class="pool" src="images/lottery_pool.png">

+    <div class="container">

+        <img class="item item0 active" src="images/reward_book.png">

+        <img class="item item1" src="images/reward_soap.png">

+        <img class="item item2" src="images/reward_oil10.png">

+        <img class="item item7" src="images/reward_oil5.png">

+        <img class="item button" src="images/lottery_button.png">

+        <img class="item item3" src="images/reward_oil5.png">

+        <img class="item item6" src="images/reward_oil60.png">

+        <img class="item item5" src="images/reward_soap.png">

+        <img class="item item4" src="images/reward_null.png">

+    </div>

+    <span class="title"><span style="color: #FF356B">活动</span>说明</span>

+    <span class="tips">1.中奖者留下姓名和电话，在活动结束后会联系邮寄奖品；<br>

+        2.微博参与抽奖方式：<br>

+        关注@贝蒂斯橄榄油官方微博，转发或评论置顶微博并上传“游戏结果海报”。

+    </span>

+

+    <div class="case">

+        <div class="part2" id="part2">

+            <div id="scroll1">

+                <ul class="advertisement">

+                </ul>

+            </div>

+            <div id="scroll2"></div>

+        </div>

+    </div>

+

+    <script type="text/javascript">

+        var PartArea = document.getElementById('part2');

+        var Scroll1 = document.getElementById('scroll1');

+        var Scroll2 = document.getElementById('scroll2');

+

+        Scroll2.innerHTML = Scroll1.innerHTML;

+

+        function roll() {

+            if(Scroll2.offsetHeight - PartArea.scrollTop <= 0) {

+                PartArea.scrollTop -= Scroll1.offsetHeight;

+            } else {

+                PartArea.scrollTop++;

+            }

+        }

+

+        var StopRoll = setInterval(roll, 60);

+

+        PartArea.onmouseover = function () {

+            clearInterval(StopRoll);

+        }

+        PartArea.onmouseout = function () {

+            StopRoll = setInterval(roll, 60);

+        }

+    </script>

+

+    <div class="mask" style="display: none;"></div>

+    <img class="result success" src="images/result_success.png" style="display: none;">

+    <p class="result_success_title" style="display: none;">输入个人信息进行领奖</p>

+    <img class="result_success_logo" src="images/reward_oil10_2.png" style="display: none;">

+    <input class="result_success_name" type="text" placeholder="姓名" style="display: none;">

+    <input class="result_success_phone" type="text" placeholder="手机号" style="display: none;">

+    <img class="result_success_button" src="images/result_success_button.png" style="display: none;">

+

+    <img class="result failed" src="images/result_failed.png" style="display: none;">

+    <img class="result_failed_button" src="images/result_failed_button.png" style="display: none;">

+</body>

+

+</html>