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

//创建一个函数用来添加元素，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);

<div class="music clearFloat" id="music"> ???<div class="NekoTitle"><span class="pnavItem ????glyphicon glyphicon-headphones"></span>音乐</div></div>

.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;}