zoukankan      html  css  js  c++  java

  • 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"
                }
            ]
        }
    ]
}
  • 相关阅读:
    web安全
    WCF通信架构
    WCF地址
    WCFContracts(契约)
    分布式中的王者WCF
    SOAP 介绍
    诊所管理软件
    MFC 画图CDC双缓冲
    Linux 启动、关闭、重启网络服务
    C# 除法的小数点问题
  • 原文地址：https://www.cnblogs.com/xichen25/p/10105828.html
Copyright © 2011-2022 走看看