尝试json文件导入数据

Posted 2021-01-26 relrayford

recommand.json

{
  "music":[
          {
            "releasetime":"2018年11月24日",
            "title":"某一天，灵梦从此丢失了节操",
            "description":"妖历2019年11月23日21:9 ，博丽神社巫女竟为10000日元出卖了节操......",
            "reImage":"./resources/images/Konachan.png"
          },
          {
            "releasetime":"2018年11月14日",
            "title":"蕾米莉亚大小姐每一天都威风堂堂",
            "description":"妖历2019年11月13日20:11 ，蕾米莉亚大小姐又使出了威风堂堂的------抱头蹲防......",
            "reImage":"./resources/images/Konachan.png"
          },
          {
            "releasetime":"2018年11月12日",
            "title":"某处，⑨-----‘幻想乡最强‘",
            "description":"妖历2019年11月13日21:9 ，琪露诺昂首叉腰，大笑：‘我可是最强的‘",
            "reImage":"./resources/images/Konachan.png"
          },
          {
            "releasetime":"2018年11月18日",
            "title":"某一天，灵梦家里发出了一阵惨叫",
            "description":"妖历2019年11月23日21:9 ，正在山间的闲者，扇掩面，微笑着拿着一万元......",
            "reImage":"./resources/images/Konachan.png"
          }

          ]
}

main.js

//创建一个函数用来添加元素，parent，是父元素，object是要添加的元素的属性类
function addMusic(parent,obj){

   //创建容器
   var musicCon = document.createElement("div");//创建容器元素
   $(musicCon).addClass("Nekoitem item");//添加样式类
   var musicA = document.createElement("a");
   $(musicA).attr({href:"#"});//添加属性
   musicCon.appendChild(musicA);//在容器中添加元素


  //创建时间元素
   var musicReleaseDiv = document.createElement("div");
   $(musicReleaseDiv).addClass("date");
   var iconSpan = document.createElement("span");
   $(iconSpan).addClass("glyphicon glyphicon-send");
   var testI = document.createElement("i");
   testI.textContent = obj.releasetime;
   musicReleaseDiv.appendChild(iconSpan);
   musicReleaseDiv.appendChild(testI);


   //创建标题
   var musicTitleDiv = document.createElement("div");
   $(musicTitleDiv).addClass("title");
   musicTitleDiv.textContent = obj.title;

   //创建描述
   var musicDescriptionDiv = document.createElement("div");
   $(musicDescriptionDiv).addClass("sim-con");
   musicDescriptionDiv.textContent = obj.description;


  //创建图像
   var musicReImageDiv = document.createElement("div");
   $(musicReImageDiv).addClass("sim-img");
   var img = document.createElement("img");
   $(img).attr({src:"./resources/images/Konachan.png"});
   musicReImageDiv.appendChild(img);

   //添加元素进容器
   musicA.appendChild(musicReleaseDiv);
   musicA.appendChild(musicTitleDiv);
   musicA.appendChild(musicDescriptionDiv);
   musicA.appendChild(musicReImageDiv);

   //将容器添加到父元素
   parent.appendChild(musicCon);
}

//获取和添加对象
function getAndAddObjectsByURL(requestURL)
{
    var request = new XMLHttpRequest();
    request.open(‘GET‘, requestURL);
    request.responseType = ‘json‘;
    request.send();
    var objectArray;
    request.onload = function() {
       var objectArray = (request.response).music;
       var i = 0;
      for (i in objectArray)
      {

        addMusic($("#music")[0],objectArray[i]);//添加元素

      }


     };

}

alert(1);
var reMusicURL = "https://yuanzhenwen.github.io/crossdomain/recommandJSON.json";

getAndAddObjectsByURL(reMusicURL);

main.html 关键代码

<div class="music clearFloat" id="music">

    <div class="NekoTitle"><span class="pnavItem     glyphicon glyphicon-headphones"></span>音乐</div>

</div>

main.css 关键代码

.Nekoitem {
  background-color: white;
  border: 1px solid rgba(200, 200, 200, 1);
  padding: 20px;
  width: 100%;
  border-radius: 2px;
  position: relative;
  bottom: 0;
}

.Nekoitem .date {
  font-size: 10px;
  color: rgba(151, 151, 151, 1);
}

.Nekoitem .date span {
  padding-right: 10px;
}

.Nekoitem .title {
  font-family: ‘微软雅黑‘;
  font-weight: bold;
  font-size: 15px;
}

.Nekoitem .sim-con {
  font-size: 10px;
}

.main-content .item {}
.Nekoitem:hover {
  border-radius: 2px;
  box-shadow: 4px 4px 4px rgba(100,100,100,1);
  bottom:15px;
  transition: bottom 0.3s;

  -moz-transition: bottom 0.3s;
  /* Firefox 4 */
  -webkit-transition: bottom 0.3s;
  /* Safari 和 Chrome */
  -o-transition: bottom 0.3s;
  /* Opera */


}
.Nekoitem:hover img {
  filter: brightness(90%);
}
.recommend {
  margin-top: 50px;
}

.NekoTitle {
  background-color: white;
  border: 1px solid rgba(200, 200, 200, 1);
  padding: 10px 20px;
  font-size: 12px;
  color: rgba(100, 100, 100, 1);
}

.NekoTitle span {
  padding-right: 10px
}

.recommend .item {
  width: 25%;
  float: left;
}

 

 

效果图