- <!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>
- <!-- main-modal -->
- <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>
- <!-- class 改为 template-equ-box -->
- <div class="template-equ">
- <div class="start">
- <h4>
- ${introduce}
- </h4>
- <div class="content">
- </div>
- </div>
- </div>
- <!-- class 改为 equ-conten -->
- <div class="equ-main">
- <div class="item">
- <div class="item-top">
- <img src="" alt="">
- </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 = "http://www.curtaintan.tk/dist/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>
来源: http://www.bubuko.com/infodetail-2851515.html