window

0ac2d4ec · 2breakegg · 1c27f7ee · 0ac2d4ec
Commit 0ac2d4ec authored Jun 08, 2017 by 2breakegg
Show whitespace changes
Inline Side-by-side

Showing with 174 additions and 0 deletions

end.html end.html +174 -0

No files found.
--- a/end.html
+++ b/end.html
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <link href="./node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
+    <script src="node_modules/jquery/dist/jquery.min.js"></script>
+    <style>
+        html,div,body,td,tr{
+            background: rgba(0,0,0,0);
+            font-size:14px;
+            font-family:-apple-system, Arial, 'Source Sans Pro', "Microsoft YaHei", 'Microsoft JhengHei', "WenQuanYi Micro Hei", sans-serif;
+            padding:0;
+            margin:0;
+            color:#00a4d9;
+        }
+        i:hover{
+            color:#0b88b1;
+        }
+        td{
+            text-align:center;
+            width:50px;
+            height:20px;
+            line-height: 20px;
+            padding:2px;
+        }
+        td:nth-child(1){
+            width:auto;
+        }
+        td:nth-child(2){
+            text-align:left;
+            width:150px
+        }
+        img{
+            display: block;
+            height: 100%;
+        }
+        .window{
+            position:relative;
+            width:320px;
+            height:180px;
+            background:linear-gradient(to bottom, #bfcdd2, rgba(218, 218, 218, 0.17));
+            padding:5px;
+        }
+        .myIcon{
+            float:left;
+            height:100%
+        }
+        .close{
+            position:absolute;
+            top:5px;
+            right:5px
+        }
+        .title{
+            /*display: table;*/
+            height:50px;
+            line-height:30px;
+            padding:5px;
+            border-bottom:1px #fff solid;
+            color:#00a4d9
+        }
+        .winOrLose{
+            font-size:30px;
+            display:table-cell;
+            vertical-align:middle;
+            padding-right:10px;
+            display: none;
+        }
+        .myInfo_tr{background:linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0.5));}
+        #myName{
+            height:50%;
+            line-height:100%;
+            font-size:25px;
+        }
+        #myScore{font-size:25px; padding-right: 10px}
+        #myExp{font-size:15px; color:green; padding-right: 10px}
+        #myGold{font-size:15px; color:#ec6d20; padding-right: 10px}
+        #win{color:green;}
+        #lose{color:red;}
+        #users_info{border-collapse:collapse;}
+    </style>
+</head>
+
+<body>
+    <div class="window">
+        <i onclick="window.opener=null;window.close();" class="fa fa-times close" title="关闭"></i>
+        <div class="title">
+            <div class="myIcon">
+                <img id="myIcon" >
+            </div>
+            <div style="float:left; padding-left:10px">
+                <div id="myName"></div>
+                <div style="height:50%;">
+                    <span id="myScore"></span>
+                    <span id="myExp"></span>
+                    <span id="myGold"></span>
+                </div>                
+            </div>
+            <div style="height:100%; float:right; display:table;">
+                <span id="win" class="winOrLose">胜</span>
+                <span id="lose" class="winOrLose">败</span>
+            </div>            
+        </div>
+        <div class="clear:both"></div>
+
+        <div style="padding:5px;">
+            <table id="users_info">
+                <tr>
+                    <th colspan="2">玩家</th>
+                    <th>评价</th>
+                    <th>经验</th>
+                    <th>金币</th>
+                </tr>
+            </table>
+        </div>
+    </div>
+</body>
+
+<script>
+    let data_url=(new URL(document.location)).searchParams;
+    let data_str=data_url.get("data");
+    console.log(data_str);
+//  data={
+    //        'win':true,
+    //        'users_info':[{
+    //            'isPlay':true,
+    //            'icon':'http://himg.bdimg.com/sys/portrait/item/55c177633531343132333435f20c.jpg',
+    //            'name':'刘大耳',
+    //            'score':'5555',
+    //            'exp':'123',
+    //            'gold':'321'
+    //        },{
+    //            'isPlay':false,
+    //            'icon':'http://himg.bdimg.com/sys/portrait/item/55c177633531343132333435f20c.jpg',
+    //            'name':'关绿帽',
+    //            'score':'008',
+    //            'exp':'789',
+    //            'gold':'999'
+    //        }
+    //        ]
+    //    }
+//    data={"win":true,"users_info":[{"isPlay":true,"icon":"http://himg.bdimg.com/sys/portrait/item/55c177633531343132333435f20c.jpg","name":"刘大耳","score":"5555","exp":"123","gold":"321"},{"isPlay":false,"icon":"http://himg.bdimg.com/sys/portrait/item/55c177633531343132333435f20c.jpg", "name":"关绿帽", "score":"008", "exp":"789", "gold":"999"}]}
+    data=JSON.parse(data_str);
+    console.log(data);
+    let win=data.win;
+    let users_info=data.users_info;
+    let my_info;
+    if(win){
+        $('#win').show();
+    }else{
+        $('#lose').show();
+    }
+    console.log(data);
+
+    for(user_info of users_info) {
+        let tr_style='';
+        if(user_info.isPlay) {
+            tr_style = ' class="myInfo_tr"'
+            my_info=user_info;
+        }
+        let tr = "<tr"+tr_style+"> <td><img src='"+user_info.icon+"'></td>        <td>"+user_info.name+"</td>        <td>"+user_info.score+"</td>    <td>"+user_info.exp+"</td>    <td>"+user_info.gold+"</td>    </tr>";
+        $('#users_info').append(tr);
+    }
+
+    $('#myIcon').attr('src',my_info.icon);
+    $('#myName').html(my_info.name);
+    $('#myScore').html(my_info.score);
+    $('#myExp').html(my_info.exp);
+    $('#myGold').html(my_info.gold);
+
+</script>
+
+</html>
+
+