给王者荣耀做一个各种信息的归纳

2024-03-21 09:31:40

对王者荣耀的英雄列表,局内道具和召唤师技能做一个页面管理,根据这三个事物进行了三个页面编写,首先第一个是英雄列表:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>英雄列表</title>

   <style>
       .tab {
           margin: 0 auto;
           width: 1200px;
           border: 1px solid rgba(52, 52, 52, 0.5);
           border-collapse: collapse;
       }

       .tab th {
           padding: 10px 20px;
           height: 30px;
           background: #2c3e50;
           color: #eee;
       }

       td {
           padding: 20px;
           border: 1px solid rgba(52, 52, 52, 0.5);
       }

       td img {
           width: 87px;
           height: 87px;
       }
   </style>
   <script src="../../js/jquery-1.11.3.js"></script>

</head>
<body>
<table class="tab">
   <thead>
   <tr>
       <th>序号</th>
       <th>头像</th>
       <th>姓名</th>
       <th>称号</th>
       <th>类型</th>
       <th>皮肤</th>
   </tr>
   </thead>
   <tbody>
   <tr>
       <td>535</td>
       <td><img src=""></td>
       <td>小乔</td>
       <td>年至微粉</td>
       <td>法师</td>
       <td>各种皮肤</td>
   </tr>
   </tbody>
</table>
<script>
   $(function () {
           $.getJSON("王者荣耀/herolist.json", function (data) {
               rendarDate(data);
       });
       //数据渲染
       function rendarDate(data) {
           let html = '';
           $(data).each(function (i, e) {
               html += `<tr>
                             <td>${e.ename}</td>
                             <td><img src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/${e.ename}/${e.ename}.jpg"></td>
                             <td>${e.cname}</td>
                             <td>${e.title}</td>
                             <td>${typeFmt(e.hero_type)}&nbsp;${e.hero_type2 ? typeFmt(e.hero_type2) : ""}</td>
                             <td>${e.skin_name}</td>
                       </tr>`;
           })
           $('.tab tbody').html(html)

       }

       function typeFmt(type) {
           switch (type) {
               case 1:
                   return "战士";
               case 2:
                   return "法师";
               case 3:
                   return "坦克";
               case 4:
                   return "刺客";
               case 5:
                   return "射手";
               case 6:
                   return "辅助";
           }
       }
   })

</script>
</body>
</html>

在这里我利用$.getJSON()的方法,发送请求,获得数据并转换为JSON对象,从而拿到数据,在根据数据的格式做出的一个表格,效果不错

效果:

局内道具和英雄列表同上:

局内道具:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>局内道具</title>
    <script src="../../js/jquery-1.11.3.js"></script>
    <style>
        .tab {
            margin: 0 auto;
            width: 1200px;
            border: 1px solid rgba(52, 52, 52, 0.5);
            border-collapse: collapse;
        }

        .tab th {
            padding: 10px 20px;
            height: 30px;
            background: #2c3e50;
            color: #eee;
        }

        td {
            padding: 20px;
            border: 1px solid rgba(50, 50, 50, 0.5);
        }

        td img {
            width: 87px;
            height: 87px;
        }


    </style>
</head>
<body>
<table class="tab">
    <thead>
    <tr>
        <th>序号</th>
        <th>头像</th>
        <th>名字</th>
        <th>单价</th>
        <th>总价格</th>
        <th>功能</th>
    </tr>
    </thead>
    <tbody>
        <tr>
            <td>1112</td>
            <td><img src=""></td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
    </tbody>
</table>
<script>
    $(function () {
        $.getJSON("王者荣耀/item.json", function (data) {
            rendarDate(data);
        })

        function rendarDate(data) {
            let html = '';
            $(data).each(function (i, e) {
                html += `<tr>
                    <td>${e.item_id}</td>
                    <td><img src="https://game.gtimg.cn/images/yxzj/img201606/itemimg/${e.item_id}.jpg"></td>
                    <td>${e.item_name}</td>
                    <td>${e.total_price}</td>
                    <td>${e.total_price}</td>
                    <td>${e.des1}<br>${e.des2 ? e.des2 : ""}</td>
                  </tr>`;
            })
            $('.tab tbody').html(html);
        }
    })

</script>
</body>
</html>

召唤师技能:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>召唤师技能</title>
    <script src="../../js/jquery-1.11.3.js"></script>
    <style>
        .tab {
            margin: 0 auto;
            width: 1200px;
            border: 1px solid rgba(52, 52, 52, 0.5);
            border-collapse: collapse;
        }

        .tab th {
            padding: 10px 20px;
            height: 30px;
            background: #2c3e50;
            color: #eee;
        }

        td {
            padding: 20px;
            border: 1px solid rgba(50, 50, 50, 0.5);
        }

        td img {
            width: 87px;
            height: 87px;
        }


    </style>
</head>
<body>
<table class="tab">
    <thead>
    <tr>
        <th>序号</th>
        <th>头像</th>
        <th>名字</th>
        <th>等级解锁</th>
        <th>技能</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1112</td>
        <td><img src=""></td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>
    </tbody>
</table>
<script>
    $(function () {
        $.getJSON("王者荣耀/summoner.json", function (data) {
            rendarDate(data);
        })

        function rendarDate(data) {
            let html = '';
            $(data).each(function (i, e) {
                html += `<tr>
                    <td>${e.summoner_id}</td>
                    <td><img src="https://game.gtimg.cn/images/yxzj/img201606/summoner/${e.summoner_id}.jpg"></td>
                    <td>${e.summoner_name}</td>
                    <td>${e.summoner_rank}</td>
                    <td>${e.summoner_description}</td>
                  </tr>`;
            })
            $('.tab tbody').html(html);
        }
    })

</script>

</body>
</html>

效果:

在以上页面写完之后再将其在同一个页面显示,这样效果也会更好,所以做一个管理来显示这三个页面:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>王者荣耀管理栏</title>

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .header{
            position: relative;
            padding: 0 20px;
            height: 5vh;
            line-height: 50px;
            background: #2c3e50;
            color: #fff;
        }
        h1{
            font-size: 1.2em;
        }
        .container{
            position: relative;
            left: 0;
            right: 0;
            min-height: 600px;
            height: 95vh;
        }
        .menu,
        .box{
            height: 100%;
        }
        .menu{
            position:absolute;
            left: 0;
            bottom: 0;
            width: 15%;
            background:#bdc3c7 ;
            border-top: 1px solid rgba(255,255,255,0.5);
        }

        .menu ul{
            list-style: none;
            width: 100%;
            text-align: center;
        }
        .menu ul li{
            height: 40px;
            line-height: 40px;
            background: #2c3e50;
        }
        a{
            display: block;
            height: 100%;
            text-decoration: none;
            color:#fff;
        }

        li:not(:last-child){
            border-bottom: 1px solid rgba(255,255,255,0.2);
        }

        a:hover{
            background: #bdc3c7;
            color: #2c3e50;
        }
        .box{
            position: absolute;
            left: 15%;
            width: 85%;
        }

    </style>
    <script src="../../js/jquery-1.11.3.js"></script>
</head>
<body>
    <div class="header">
        <h1>王者荣耀管理系统</h1>
    </div>
    <div class="container">
        <div class="menu">
            <ul>
                <li><a href="javascript:;" data-page="kingHero.html">英雄列表</a></li>
                <li><a href="javascript:;" data-page="props.html">局内道具</a></li>
                <li><a href="javascript:;" data-page="skill.html">召唤师技能</a></li>
            </ul>
        </div>
        <div class="box"></div>

    </div>

    <script>
        $(function () {
            $('.menu ul a').on('click',function () {
                let url = $(this).data('page');
                $('.box').load(url);
            })
        })

    </script>

</body>
</html>

效果:

点击左边管理栏可以查看各个信息,这里只做了个框架然后导入需要的架包即可完成,及其简单.这样一个小页面就完成了

码农公寓

局内道具和英雄列表同上:

局内道具:

召唤师技能:

效果:

相关文章