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 <!-- main-modal --> 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 <!-- class改为template-equ-box --> 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 <!-- class改为equ-conten --> 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" } ] } ] }
