JSON 练习

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>厄运小姐</title>
<style>
*{
padding: 0px;
margin: 0px;
}
a{
font-size: 18px;
color: rgb(0, 0, 0);
text-decoration: none;
padding: 5px 8px;
background-color: rgb(218, 230, 226);
border-radius: 4px;
}
.title{
margin: 40px auto;
width: 360px;
display: flex;
justify-content: center;
align-items: center;
}
.title span{
margin: 0px 20px;
}
.asd{
max-width: 960px;
margin: 100px auto;
}
.about{
position: relative;
}
.about{
color: #fff;
}
.about .introuduce{
position: absolute;
left: 60px;
top: 70px;
}
.about .introuduce p{
margin: 10px 0px;
}
.about .introuduce p span{
margin-right: 20px;
}
button{
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
margin: 4px 2px;
cursor: pointer;
}
.about .mask{
width: 200px;
height: 100%;
left: 0px;
top: 0px;
position: absolute;
background-color: rgba(0, 0, 0, .5);
}
.work{
padding: 4px 8px;
border: 1px solid rgb(255, 126, 40);
background: rgb(255, 126, 40);
border-radius: 6px;
}
.history{
margin: 20px 0px;
}
.template{
display: flex;
margin: 20px 0px;
}
.template .img{
margin-right: 20px;
}
h2{
font-size: 20px;
margin: 10px 0px;
}
h4{
margin: 8px 0px;
font-size: 14px;
}
.template-skill, .template-equ, .equ-main, .template-main, .template-history{
display: none;
}

.equ-item{
display: inline-block;
width: 110px;
text-align: center;
}

</style>
</head>
<body>
<div class="asd">
<div class="title">
<a href="https://lol.qq.com/data/info-defail.shtml?id=MissFortune">点击直达官方网页</a>
<span>赏金猎人</span>
<span>厄运小姐</span>
</div>
<div class="about">

</div>
<div class="history">

</div>
<div class="skill">
<h2>技能介绍</h2>

</div>
<div class="zhuangbei">
<h2>推荐装备</h2>

</div>
</div>

<div class="template-main">
<div class="mask"></div>
<div class="introuduce">
<h4>${nickname}</h4>
<h1>${name}</h1>
<p><span class="work" >射手</span></p>
<p><span>物理攻击</span> ${}</p>
<p><span>魔法攻击</span> ${}</p>
<p><span>防御能力</span> ${}</p>
<p><span>上手难度</span> ${}</p>
<div class="down">
<button>购买英雄</button>
</div>
</div>
<div class="bgm">
<img src="" alt="">
</div>
</div>

<div class="template-history">
<h2>背景故事</h2>
<div class="story">
<p>${story}</p>
</div>
</div>


<div class="template-skill">
<div class="img"><img src="" alt="" ></div>
<div class="skill-about">
<h3>${skillName}</h3>
<p>${skillOne}</p>
<p>${skillTwo}</p>
</div>
</div>

<div class="template-equ">
<div class="start">
<h4>${introduce}</h4>
<div class="content">

</div>
</div>
</div>

<div class="equ-main">
<div class="item">
<div class="item-top">
<img src="" alt="" >
</div>
<p>${equName}</p>
</div>
</div>

var mainBox = document.getElementsByClassName('about')[0]
var storyBox = document.getElementsByClassName('history')[0]
var skillBox = document.getElementsByClassName('skill')[0]
var equBox = document.getElementsByClassName('zhuangbei')[0]

var templateString = ""

var asd = new XMLHttpRequest()
var reqUrl = "https://curtaintan.github.io/tan/a.json"
asd.open( 'GET', reqUrl, true )
asd.responseType = 'json'
asd.send()
asd.onload = function(){
var res = asd.response
console.log(res)
show( res )
}

function show ( data ){

//替换main
templateString = temMain.replace("${nickname}", data.nickName)
.replace("${name}", data.name)
.replace('src=""', 'src="'+ data.headImg +'"')
.replace('${}', data.attr.物理攻击 )
.replace('${}', data.attr.魔法攻击 )
.replace('${}', data.attr.防御能力 )
.replace('${}', data.attr.上手难度 )
mainBox.innerHTML = templateString

//替换故事
templateString = story.replace( '${story}', data.story )
storyBox.innerHTML = templateString

//替换技能
for( let i = 0; i < data.skill.length; i ++ ){
templateString = skill.replace( 'src=""', 'src="'+ data.skill[i].image +'"' )
.replace( '${skillName}', data.skill[i].name )
.replace( '${skillOne}', data.skill[i].introduce)
.replace( '${skillTwo}', data.skill[i].twointroduce)
let ss = document.createElement('div')
ss.classList.add('template')
ss.innerHTML = templateString
skillBox.appendChild( ss )
}

//替换装备
for( let i = 0; i < data.equipment.length; i ++ ){
templateString = equTemp.replace( "${introduce}", data.equipment[i].introduce )
let ss = document.createElement('div')
ss.innerHTML = templateString
for( let j = 0; j < data.equipment[i].equ.length; j ++ ){
templateString = itemEqu.replace('${equName}', data.equipment[i].equ[j].name)
.replace( 'src=""', 'src="'+ data.equipment[i].equ[j].image +'"' )
var son = document.createElement('div')
son.classList.add('equ-item')
son.innerHTML = templateString
ss.appendChild( son )
}
equBox.appendChild( ss )
}
}

</script>

</body>
</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"
}
]
}
]
}

摘抄自谭兴旺的博客

猜你喜欢