JSON 练习

发布时间：2023-09-06 02:24责任编辑：彭小芳关键词：暂无标签

<!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="" >
???????</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="" ?></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="" ?>
???????????</div>
???????????<p>${equName}</p>
???????</div>
???</div>

???<script>
???????var temMain = document.getElementsByClassName(‘template-main‘)[0].innerHTML
???????var story = document.getElementsByClassName(‘template-history‘)[0].innerHTML
???????var skill = document.getElementsByClassName(‘template-skill‘)[0].innerHTML
???????var equTemp = document.getElementsByClassName(‘template-equ‘)[0].innerHTML
???????var itemEqu = document.getElementsByClassName(‘equ-main‘)[0].innerHTML

???????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"
???????????????}
???????????]
???????}
???]
}

摘抄自谭兴旺的博客

JSON 练习

原文地址：https://www.cnblogs.com/axl1017/p/10022798.html

JSON 练习

知识推荐