打老鼠

html/annualMeeting/AnnuaLmeetingHome.html

@@ -27,9 +27,11 @@
 
                 </div>
 
-                <div class="c_right" >
+                <div class="c_center">
 
+                </div>
 
+                <div class="c_right" >
 
                 </div>
 
@@ -47,7 +49,7 @@
                 <div class="bar_input">
                     <input type="text" placeholder="发弹幕参与大屏互动">
                 </div>
-                <div class="send_btn" onclick="send()">
+                <div class="send_btn" onclick="sendMsg(1)">
                     <p>发送</p>
                 </div>
             </div>
@@ -63,6 +65,9 @@
 <script type="text/javascript" src="../../js/layer/layer.js"></script>
 
 <script>
+    $("input").on("blur",function(){
+        window.scroll(0,0);//失焦后强制让页面归位
+    });
     var conn = $.hubConnection("http://192.168.2.66:7838/signalr", {
         qs: `i=1951&n=张建国&p=${encodeURIComponent(
             "http://imgfile.oytour.com/New/Upload/User/20191018150051176.png"
@@ -74,30 +79,29 @@
     }).fail(data => {});
     getMsg()
 
-    function sendMsg(msg) {
-
-            proxy.invoke("SendBarrage", msg).done(data => {
+    function sendMsg(type) {
+        if(type ==1){
+            var value = $('.bar_input input').val();
+            if(value.length==0){
+                layer.msg('不能为空哦');
+                return
+            }
+            proxy.invoke("SendBarrage", value).done(data => {
                 layer.msg('发送成功');
             });
-
-    }
-    function send() {
-        var value = $('.bar_input input').val();
-        if(value.length==0){
-            layer.msg('不能为空哦');
-            return
         }
-        sendMsg(value)
+
+
     }
+
     function getMsg() {
 
         //年会首页菜单
         proxy.on("getMenus", function (data){
             console.log(data)
-
             $(".menu_view").remove()
             var html="";
-            $.each(data, function(i,v) {//这里的函数参数是键值对的形式，k代表键名，v代表值
+            $.each(data, function(i,v) {
                 html+='<div class="menu_view" onclick="menu_btn('+data[i].Id+')">\n' +
                     '                        <img src="../../images/aM/menu@2x.png" alt="">\n' +
                     '                        <p>'+data[i].MName+'</p>\n' +
@@ -106,9 +110,11 @@
             $(".menu").append(html);
         });
 
+        //节目单
         proxy.on('getPrograms',function (data) {
-            programguides(data)
+            console.log(data)
 
+            programguides(data)
 
         });
         //嘉宾数量
@@ -128,6 +134,7 @@
     }
     function programguides(data){
         $(".right_box").remove()
+        $(".c_xian").remove()
         $(".letf_box").remove()
         var leftList = [];
         var rightList = [];
@@ -138,17 +145,18 @@
                 leftList.push(data[i])
             }
         }
+
         var html_l="";
+        var html_c="";
         var html_r="";
         $.each(rightList, function(i,v) {//这里的函数参数是键值对的形式，k代表键名，v代表值
             if(i==0){
-                html_l+='<div class="right_box" style="margin-top:0rem ">\n' +
+                html_l+='<div class="right_box" style="margin-top:0 ">\n' +
                     '                        <p class="time">'+rightList[i].StartTime+'</p>\n' +
                     '                        <div class="c_describe">\n' +
                     '                            <p>'+rightList[i].Title+'</p>\n' +
                     '                            <p>'+rightList[i].Performer+'</p>\n' +
                     '                        </div>\n' +
-                    '                        <div class="yuan_r"></div>\n' +
                     '                    </div>'
             }else {
                 html_l+='<div class="right_box" style="margin-top:0.75rem ">\n' +
@@ -157,12 +165,18 @@
                     '                            <p>'+rightList[i].Title+'</p>\n' +
                     '                            <p>'+rightList[i].Performer+'</p>\n' +
                     '                        </div>\n' +
-                    '                        <div class="yuan_r"></div>\n' +
                     '                    </div>'
             }
 
         });
         $(".c_right").append(html_l);
+        $.each(data, function(i,v) {//这里的函数参数是键值对的形式，k代表键名，v代表值
+            html_c+=' <div class="c_xian">\n' +
+                '                        <div class="yuan"></div>\n' +
+                '                        <div class="yuan_x"></div>\n' +
+                '                    </div>'
+        });
+        $(".c_center").append(html_c);
 
         $.each(leftList, function(i,v) {//这里的函数参数是键值对的形式，k代表键名，v代表值
             html_r+='<div class="letf_box" style="margin-top: 0.75rem">\n' +
@@ -173,7 +187,6 @@
                 '                            <p>'+leftList[i].Title+'</p>\n' +
                 '                            <p>'+leftList[i].Performer+'</p>\n' +
                 '                        </div>\n' +
-                '                        <div class="yuan_l"></div>\n' +
                 '                    </div>'
         });
         $(".c_left").append(html_r);

html/annualMeeting/HitMouse.html

@@ -40,6 +40,8 @@
         <div class="hole-container">
             <div class="hole" style="transform: translate(0.5rem, 0) scale(0.8, 0.8);">
                 <div class="mouse">
+<!--                    <img src="../../images/aM/dadao.png" alt="" class="yan">-->
+<!--                    <p class="show_score">500</p>-->
                 </div>
             </div>
             <div class="hole" style="transform: translate(1.5rem, 0) scale(0.8, 0.8);">
@@ -85,10 +87,10 @@
 
 <!--        弹出的一层-->
         <div class="status">
-            <p>游戏即将开始</p>
+            <p>保存体力，等待开始</p>
         </div>
         <div class="status1">
-            <p>保存体力，等待开始</p>
+            <p>游戏即将开始</p>
         </div>
         <div class="status2">
             <p>抱歉！游戏正在进行中</p>
@@ -98,7 +100,44 @@
         </div>
         <div class="circleCount">3</div>
 
+        <audio id="audio" src="img/game_running.mp3" autoplay="autoplay">
+            您的浏览器不支持audio标签
+        </audio>
+        <audio id="audio2" src="img/ready321go.mp3" autoplay="autoplay">
+            您的浏览器不支持audio标签
+        </audio>
+
+        <!--        排行榜-->
+        <div class="rank_mask">
+            <div class="zhezao"></div>
+            <div class="rank_box">
+                <div class="rBox_top">
+                    <p>排行榜</p>
+                </div>
+                <div class="rank_y">
+                    <p>你的排名 第</p>
+                    <p>1</p>
+                    <p>名</p>
+                </div>
+                <div class="rank_i">
+                    <div class="rank_item">
+                        <div class="rank_itemL">
+                            <div class="rank_num">1</div>
+                            <p>李思思</p>
+                        </div>
+                        <div class="rank_itemR">
+                            <div class="shuxi"></div>
+                            <p>1234</p>
+                        </div>
+                    </div>
+
+                </div>
+
+                <div class="Close"></div>
+            </div>
+
 
+        </div>
     </div>
 
 
@@ -112,7 +151,10 @@
 
     var status=0; //活动状态
     var laoshudata = [];//老鼠数据
-
+    var audio=document.getElementById("audio");
+    var audio2=document.getElementById("audio2");
+    audio.play();
+    audio.loop=true;
 
     var conn = $.hubConnection("http://192.168.2.66:7838/signalr", {
         qs: `i=1951&n=张建国&p=${encodeURIComponent(
@@ -228,15 +270,25 @@
         var wz = laoshudata[key].Location-1
         if(laoshudata[key].Type == 1){
             //创建img元素
-            $('.hole-container .hole:eq('+wz+') .mouse').append('<img src="../../images/aM/mouse.png" alt="">');
-            $('.hole-container .hole:eq('+wz+') .mouse img').animate({top:"0.05rem"},600);
+            $('.hole-container .hole:eq('+wz+') .mouse').append('<img src="../../images/aM/mouse.png" alt="" class="zoon">');
+            $('.hole-container .hole:eq('+wz+') .mouse img').animate({top:"0.02rem"},600);
             //为老鼠的时候加100分
-            $('.hole-container .hole:eq('+wz+') .mouse img').click(function () {
+            $('.hole-container .hole:eq('+wz+') .mouse .zoon').click(function () {
                 if(laoshudata[key].noclick == 0) {
-                    score = score + 100;
+                    score = score + 500;
                     $('.score').html(score + '分')
                     sendScore(score)
-                    $('.hole-container .hole:eq(' + wz + ') .mouse img').attr('src', '../../images/aM/dadao.png')
+                    $('.hole-container .hole:eq(' + wz + ') .mouse .zoon').remove()
+
+                    $('.hole-container .hole:eq('+wz+') .mouse').append('<img src="../../images/aM/dadao.png" alt="" class="yan">');
+                    $('.hole-container .hole:eq('+wz+') .mouse').append('<p class="show_score"> +500 </p>');
+
+                    setTimeout(function () {
+                        $('.hole-container .hole:eq('+wz+') .mouse .yan').remove();
+                        $('.hole-container .hole:eq('+wz+') .mouse .show_score').remove();
+
+                    },300)
+
                     laoshudata[key].noclick=1
                 }
             })
@@ -249,14 +301,20 @@
 
         }
         if(laoshudata[key].Type == 2){
-            $('.hole-container .hole:eq('+wz+') .mouse').append('<img src="../../images/aM/pig.png" alt="">');
-            $('.hole-container .hole:eq('+wz+') .mouse img').animate({top:"0.05rem"},600);
-            $('.hole-container .hole:eq('+wz+') .mouse img').click(function () {
+            $('.hole-container .hole:eq('+wz+') .mouse').append('<img src="../../images/aM/pig.png" alt="" class="zoon>');
+            $('.hole-container .hole:eq('+wz+') .mouse img').animate({top:"0.02rem"},600);
+            $('.hole-container .hole:eq('+wz+') .mouse .zoon').click(function () {
                 if(laoshudata[key].noclick == 0){
-                    score=score-50;
+                    score=score- 100;
                     $('.score').html(score+ '分')
                     sendScore(score)
-                    $('.hole-container .hole:eq('+wz+') .mouse img').attr('src','../../images/aM/dadao.png')
+                    $('.hole-container .hole:eq(' + wz + ') .mouse .zoon').remove()
+                    $('.hole-container .hole:eq('+wz+') .mouse').append('<img src="../../images/aM/dadao.png" alt="" class="yan">');
+                    $('.hole-container .hole:eq('+wz+') .mouse').append('<p class="show_score">-100</p>');
+                    setTimeout(function () {
+                        $('.hole-container .hole:eq('+wz+') .mouse .yan').remove();
+                        $('.hole-container .hole:eq('+wz+') .mouse .show_score').remove();
+                    },300)
                     laoshudata[key].noclick=1
                 }
             })
@@ -273,6 +331,7 @@
     }
 
     function StartGame() {
+        audio2.play()
         Count=3;
         Count2=30;
         $('.circleCount').css('display','block');
@@ -310,8 +369,16 @@
             }
         }, 1000)
     }
+    $('.Close').click(function () {
+        $('.rank_mask').css('display','none')
+    })
+    $('.ranging').click(function () {
+        $('.rank_mask').css('display','block')
+    })
     $('.return').click(function () {
         //返回首页
     })
+
+
 </script>
 </html>

html/annualMeeting/css/Amhome.css

@@ -122,7 +122,7 @@ p{
 }
 .center{
     width: 90%;
-    /*height: 50%;*/
+    height: 58%;
     margin-left: 5%;
     margin-top: 1rem;
     display: flex;
@@ -143,16 +143,30 @@ p{
     overflow-x:hidden;
 }
 .c_left,.c_right{
-    width: 50%;
+    width: 48%;
 }
-.c_left{
-   display: flex;
+.c_center{
+    width: 4%;
+}
+.c_xian{
+    width: 100%;
+    height: 0.74rem;
+    display: flex;
     flex-direction: column;
-
+    align-items: center;
 }
-.c_right{
-
+.yuan{
+    width: 0.08rem;
+    height: 0.08rem;
+    border-radius: 0.04rem;
+    background: #FDD54B;
 }
+.yuan_x{
+    width: 1px;
+    height: 0.67rem;
+    background: #FDD54B;
+}
+
 .time{
     color: #FDD54B;
     font-size: 0.12rem;
@@ -176,24 +190,14 @@ p{
 .right_box{
     width: 100%;
     height: 0.75rem;
-    border-left:1px solid #E88A36;
     padding-left: 0.08rem;
     position: relative;
 
 }
-.yuan_r{
-    width: 0.08rem;
-    height: 0.08rem;
-    border-radius: 0.04rem;
-    background: #FDD54B;
-    position: absolute;
-    left: -0.04rem;
-    top: 0;
-}
+
 .letf_box{
     width: 100%;
     height: 0.75rem;
-    border-right:1px solid #E88A36;
     position: relative;
     display: flex;
     flex-direction: column;
@@ -206,12 +210,4 @@ p{
     align-items: center;
     justify-content: flex-end;
 }
-.yuan_l{
-    width: 0.08rem;
-    height: 0.08rem;
-    border-radius: 0.04rem;
-    background: #FDD54B;
-    position: absolute;
-    right: -0.04rem;
-    top: 0;
-}
+

html/annualMeeting/css/HitMouse.css

@@ -4,6 +4,8 @@ body {
     padding: 0;
     overflow-x: hidden;
     height: 100%;
+    -webkit-overflow-scrolling: auto;
+    overflow-scrolling: auto
 }
 p{
     margin: 0;
@@ -119,18 +121,33 @@ li{
 .mouse{
     position: absolute;
     width: 0.83rem;
-    height: 0.68rem;
+    height: 0.78rem;
     overflow: hidden;
-    top:-0.5rem
+    top:-0.62rem;
+
 }
-.mouse img{
+.mouse .zoon{
     position: absolute;
     width: 0.83rem;
     height: 0.68rem;
     top:0.65rem;
     z-index: 100;
 }
-
+.mouse .yan{
+    position: absolute;
+    width: 0.23rem;
+    height: 0.35rem;
+    top:0.25rem;
+    left: 0.3rem;
+    z-index: 80;
+}
+.mouse .show_score{
+    color: #FFFE01;
+    font-size: 0.14rem;
+    position: absolute;
+    top:0;
+    left: 0.3rem;
+}
 .status{
     width: 90%;
     height: 0.45rem;
@@ -271,6 +288,13 @@ li{
     background-image: url('../../../images/aM/rank_top.png');
     background-size: 100% 100%;
     background-repeat: no-repeat;
+    display: flex;
+    justify-content: center;
+}
+.rBox_top p{
+    color: #FDD54B;
+    font-size: 0.18rem;
+    margin-top: 0.12rem;
 }
 .rank_y{
     width: 80%;