实现王者荣耀的局内道具的详细显示列表

最新推荐文章于 2025-06-04 19:10:40 发布

季末、诉说

最新推荐文章于 2025-06-04 19:10:40 发布

阅读量938

点赞数

文章标签： js jquery html

本文链接：https://blog.youkuaiyun.com/song957021042/article/details/112008183

版权

本文通过布局、导入jQuery和JSON数据，详细介绍了如何实现王者荣耀游戏内的道具详细显示列表。首先进行CSS布局，然后利用jQuery获取并解析从官网爬取的JSON文件，根据item_id动态加载道具图片，并根据道具类型进行区分。最后展示了实现的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

使用jQuery和html，css来实现王者荣耀的局内道具的详细显示列表。

一、先布局，完成css部分

设置了一个按钮，点击就获取所有的装备数据
图片地址是在王者荣耀官网找的。
"https://game.gtimg.cn/images/yxzj/img201606/itemimg/1111.jpg

<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:10px 20px;
            border:1px solid rgba(52,52,52,0.5);
        }
        td img{
            width: 87px;
            height: 87px;
        }
    </style>
</head>
<body>

<button>获取装备数据</button>
<table class="tab">
    <thead>
    <tr>
        <th>编号</th>
        <th>图片</th>
        <th>装备名</th>
        <th>装备类型</th>
        <th>售价</th>
        <th>总价</th>
        <th>属性</th>

    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1111</td>
        <td><img src="https://game.gtimg.cn/images/yxzj/img201606/itemimg/1111.jpg"></td>
        <td>铁剑</td>
        <td>攻击</td>
        <td>150</td>
        <td>250</td>
        <td><p>+20物理攻击</p></td>
    </tr>
    </tbody>
</table>

在这里插入图片描述

二、导入jQuery，json文件并获取

json文件是在王者荣耀官网爬的，就是这种文件。
在这里插入图片描述

三、完成script部分

json文件里面一个名字对应一个数据，那个图片地址很容易看出来后缀就是item_id，一个id对应一个图片https://game.gtimg.cn/images/yxzj/img201606/itemimg/${e.item_id}.jpg,这就可以找到所有的图片。最后还要判断一个装备的类型，不同的数字对应不同的类型，比如1对应攻击。

<script src="../js/jquery-1.11.3.js"></script>
<script>
    $(function () {
        $('button').click(function () {
            $.getJSON("../json/局内道具_item.json",function (data) {
                renderData(data);
            })
        })

    function renderData(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>${typeFmt(e.item_type)}&nbsp;${e.hero_type2 ? typeFmt(e.item_type2) : ""}</td>
                        <td>${e.price}</td>
                        <td>${e.total_price}</td>
                        <td>${e.des1}${e.des2}</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 "游走";
            default:
                return null;
        }
    }



    })
</script>