json实现

<!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>厄运小姐</title> 8 <style> 9 *{ 10 padding: 0px; 11 margin: 0px; 12 } 13 a{ 14 font-size: 18px; 15 color: rgb(0, 0, 0); 16 text-decoration: none; 17 padding: 5px 8px; 18 background-color: rgb(218, 230, 226); 19 border-radius: 4px; 20 } 21 .title{ 22 margin: 40px auto; 23 width: 360px; 24 display: flex; 25 justify-content: center; 26 align-items: center; 27 } 28 .title span{ 29 margin: 0px 20px; 30 } 31 .asd{ 32 max-width: 960px; 33 margin: 100px auto; 34 } 35 .about{ 36 position: relative; 37 } 38 .about{ 39 color: #fff; 40 } 41 .about .introuduce{ 42 position: absolute; 43 left: 60px; 44 top: 70px; 45 } 46 .about .introuduce p{ 47 margin: 10px 0px; 48 } 49 .about .introuduce p span{ 50 margin-right: 20px; 51 } 52 button{ 53 background-color: #4CAF50; 54 border: none; 55 color: white; 56 padding: 10px 15px; 57 text-align: center; 58 text-decoration: none; 59 display: inline-block; 60 font-size: 12px; 61 margin: 4px 2px; 62 cursor: pointer; 63 } 64 .about .mask{ 65 width: 200px; 66 height: 100%; 67 left: 0px; 68 top: 0px; 69 position: absolute; 70 background-color: rgba(0, 0, 0, .5); 71 } 72 .work{ 73 padding: 4px 8px; 74 border: 1px solid rgb(255, 126, 40); 75 background: rgb(255, 126, 40); 76 border-radius: 6px; 77 } 78 .history{ 79 margin: 20px 0px; 80 } 81 .template{ 82 display: flex; 83 margin: 20px 0px; 84 } 85 .template .img{ 86 margin-right: 20px; 87 } 88 h2{ 89 font-size: 20px; 90 margin: 10px 0px; 91 } 92 h4{ 93 margin: 8px 0px; 94 font-size: 14px; 95 } 96 .template-skill, .template-equ, .equ-main, .template-main, .template-history{ 97 display: none; 98 } 99 100 101 .equ-item{ 102 display: inline-block; 103 width: 110px; 104 text-align: center; 105 } 106 107 108 </style> 109 </head> 110 <body> 111 <div class="asd"> 112 <div class="title"> 113 <a href="https://lol.qq.com/data/info-defail.shtml?id=MissFortune">点击直达官方网页</a> 114 <span>赏金猎人</span> 115 <span>厄运小姐</span> 116 </div> 117 <div class="about"> 118 119 </div> 120 <div class="history"> 121 122 </div> 123 <div class="skill"> 124 <h2>技能介绍</h2> 125 126 </div> 127 <div class="zhuangbei"> 128 <h2>推荐装备</h2> 129 130 </div> 131 </div> 132 133 134 135  136 <div class="template-main"> 137 <div class="mask"></div> 138 <div class="introuduce"> 139 <h4>${nickname}</h4> 140 <h1>${name}</h1> 141 <p><span class="work" >射手</span></p> 142 <p><span>物理攻击</span> ${}</p> 143 <p><span>魔法攻击</span> ${}</p> 144 <p><span>防御能力</span> ${}</p> 145 <p><span>上手难度</span> ${}</p> 146 <div class="down"> 147 <button>购买英雄</button> 148 </div> 149 </div> 150 <div class="bgm"> 151 <img src="" alt=""> 152 </div> 153 </div> 154 155  156 <div class="template-history"> 157 <h2>背景故事</h2> 158 <div class="story"> 159 <p>${story}</p> 160 </div> 161 </div> 162 163  164 <div class="template-skill"> 165 <div class="img"><img src="" alt="" ></div> 166 <div class="skill-about"> 167 <h3>${skillName}</h3> 168 <p>${skillOne}</p> 169 <p>${skillTwo}</p> 170 </div> 171 </div> 172  173 <div class="template-equ"> 174 <div class="start"> 175 <h4>${introduce}</h4> 176 <div class="content"> 177 178 </div> 179 </div> 180 </div> 181  182 <div class="equ-main"> 183 <div class="item"> 184 <div class="item-top"> 185 <img src="" alt="" > 186 </div> 187 <p>${equName}</p> 188 </div> 189 </div> 190 191 192 <script> 193 var temMain = document.getElementsByClassName('template-main')[0].innerHTML 194 var story = document.getElementsByClassName('template-history')[0].innerHTML 195 var skill = document.getElementsByClassName('template-skill')[0].innerHTML 196 var equTemp = document.getElementsByClassName('template-equ')[0].innerHTML 197 var itemEqu = document.getElementsByClassName('equ-main')[0].innerHTML 198 199 var mainBox = document.getElementsByClassName('about')[0] 200 var storyBox = document.getElementsByClassName('history')[0] 201 var skillBox = document.getElementsByClassName('skill')[0] 202 var equBox = document.getElementsByClassName('zhuangbei')[0] 203 204 205 var templateString = "" 206 207 208 var asd = new XMLHttpRequest() 209 var reqUrl = "https://curtaintan.github.io/tan/a.json"

210         asd.open( 'GET', reqUrl, true )
211         asd.responseType = 'json'
212         asd.send()
213         asd.onload = function(){
214             var res = asd.response
215             console.log(res)
216             show( res )
217         }
218 
219         function show ( data ){
220 
221             //替换main
222             templateString =  temMain.replace("${nickname}", data.nickName)
223             .replace("${name}", data.name)
224             .replace('src=""', 'src="'+ data.headImg +'"')
225             .replace('${}', data.attr.物理攻击 )
226             .replace('${}', data.attr.魔法攻击 )
227             .replace('${}', data.attr.防御能力 )
228             .replace('${}', data.attr.上手难度 )
229             mainBox.innerHTML = templateString
230 
231 
232             //替换故事
233             templateString = story.replace( '${story}', data.story )
234             storyBox.innerHTML = templateString
235 
236 
237             //替换技能
238             for( let i = 0; i < data.skill.length; i ++ ){
239                 templateString = skill.replace( 'src=""', 'src="'+ data.skill[i].image +'"' )
240                 .replace( '${skillName}', data.skill[i].name )
241                 .replace( '${skillOne}', data.skill[i].introduce)
242                 .replace( '${skillTwo}', data.skill[i].twointroduce)
243                 let ss = document.createElement('div')
244                 ss.classList.add('template')
245                 ss.innerHTML = templateString
246                 skillBox.appendChild( ss )
247             }
248 
249 
250             //替换装备
251             for( let i = 0; i < data.equipment.length; i ++ ){
252                 templateString = equTemp.replace( "${introduce}", data.equipment[i].introduce )
253                 let ss = document.createElement('div')
254                 ss.innerHTML = templateString
255                 for( let j = 0; j < data.equipment[i].equ.length; j ++ ){
256                     templateString = itemEqu.replace('${equName}', data.equipment[i].equ[j].name)
257                     .replace( 'src=""', 'src="'+ data.equipment[i].equ[j].image +'"' )
258                     var son = document.createElement('div')
259                     son.classList.add('equ-item')
260                     son.innerHTML = templateString
261                     ss.appendChild( son )
262                 }
263                 equBox.appendChild( ss )
264             }
265         }
266 
267 
268     </script>
269 
270 
271 </body>
272 </html>

json文件

{
    "nickName": "赏金猎人",
    "name": "厄运小姐",
    "work": "射手",
    "headImg": "https://ossweb-img.qq.com/images/lol/web201310/skin/big21001.jpg",
    "attr": {
        "物理攻击" : 90,
        "魔法攻击" : 50,
        "防御能力" : 30,
        "上手难度" : 10
    },
    "story" : "以美貌闻名，但却以无情立命的莎拉是一位比尔吉沃特的船长，她在这座港镇的强硬犯罪集团中塑造了不容轻视的形象。在她还是个孩子的时候，亲眼目睹了海盗之王普朗克谋杀了自己的家人。多年以后她残忍地报仇雪恨，把他和他的旗舰连人带船一同炸飞。所有低估她的人都会发现，自己面对的是一个极具欺骗性的狡黠对手，还有可能要处理肚子里的一两颗子弹。",
    "skill" : [
        {
            "name" : "厄运的眷顾",
            "image" : "https://ossweb-img.qq.com/images/lol/img/passive/MissFortune_W.png",
            "introduce" : "在攻击一个新目标时，厄运小姐会造成额外物理伤害。",
            "twointroduce" : ""
        },
        {
            "name" : "一箭双雕",
            "image" : "https://ossweb-img.qq.com/images/lol/img/spell/MissFortuneRicochetShot.png",
            "introduce" : "厄运小姐向敌方目标发射一次弹跳射击，对每个目标造成20/40/60/80/100(+1)(+0.35)物理伤害。每段射击都能施加攻击特效。",
            "twointroduce" : "第二段射击可以暴击，造成%伤害，并且如果第一段攻击杀死了它的目标，那么第二段攻击就必定暴击。。"
        },
        {
            "name" : "大步流星",
            "image" : "https://ossweb-img.qq.com/images/lol/img/spell/MissFortuneViciousStrikes.png",
            "introduce" : "被动：如果5秒内没有受到直接伤害，厄运小姐就会获得25移动速度。再过5秒后，这个加成会提升至60/70/80/90/100。",
            "twointroduce" : "主动：全额激活【大步流星】的移动速度加成并提供40/55/70/85/100%攻击速度加成，持续4秒。"
        },
        {
            "name" : "弹幕时间",
            "image" : "https://ossweb-img.qq.com/images/lol/img/spell/MissFortuneBulletTime.png",
            "introduce" : "厄运小姐向前方锥形地带扫射出持续3秒的强力弹幕，每波弹幕造成(+0.35)(+0.2)物理伤害（总波数：12/14/16）。",
            "twointroduce" : "每一波【弹幕时间】都可以暴击并造成%伤害。"
        }
    ],
    "equipment" : [
        {
            "introduce" : "期初装备",
            "equ" : [
                {
                    "name" : "多兰之剑",
                    "image" : "https://ossweb-img.qq.com/images/lol/img/item/1055.png"
                },
                {
                    "name" : "监视图腾",
                    "image" : "https://ossweb-img.qq.com/images/lol/img/item/3340.png"
                }
            ]
        },
        {
            "introduce" : "核心物品",
            "equ" : [
                {
                    "name" : "幽梦之灵",
                    "image" : "https://ossweb-img.qq.com/images/lol/img/item/3142.png"
                },
                {
                    "name" : "狂战士胫甲",
                    "image" : "https://ossweb-img.qq.com/images/lol/img/item/3006.png"
                },
                {
                    "name" : "黑色切割者",
                    "image" : "https://ossweb-img.qq.com/images/lol/img/item/3071.png"
                }
            ]
        },
        {
            "introduce" : "进攻型物品",
            "equ" : [
                {
                    "name" : "疾射火炮",
                    "image" : "https://ossweb-img.qq.com/images/lol/img/item/3094.png"
                },
                {
                    "name" : "多米尼克领主的致意",
                    "image" : "https://ossweb-img.qq.com/images/lol/img/item/3036.png"
                },
                {
                    "name" : "德拉克萨的幕刃",
                    "image" : "https://ossweb-img.qq.com/images/lol/img/item/3147.png"
                }
            ]
        }
    ]
}

相关阅读:
Docker（12）- docker run 命令详解
adb 常用命令大全（7）- 其他实用功能
adb 常用命令大全（6）- 模拟按键输入
adb 常用命令大全（5）- 日志相关
adb 常用命令大全（4）- 应用管理
adb 常用命令大全（3）- 查看手机设备信息
adb 常用命令大全（2）- 基础命令
adb 常用命令大全（1）- 汇总
Docker
Docker（11）- docker ps 命令详解

原文地址：https://www.cnblogs.com/xichen25/p/10105828.html