$(function() {
getCatList();
getPlayList();
})
function getCatList() {
$.get(`./json/catList.json`, {}, function(data) {
var sub = data.sub;
var categories = data.categories;
for(var index in categories){
$('#catList').append(`
<li class="list-group-item row">
<div class="col-xs-2 col-sm-1 text-right categorie">${categories[index]}</div>
<ul class="nav nav-pills col-xs-10 col-sm-10 text-justify">
<li role="presentation" class="active">
<a href="#">全部</a>
</li>
</ul>
</li>
`);
$(sub).each(function(i,subItem){
if(subItem.category==index){
$("#catList .nav").eq(index).append(`
<li role="presentation">
<a href="#">${subItem.name}</a>
</li>
`)
}
})
//$("#catList .nav").eq(index).find("li:first-child").addClass("active")
}
}, 'json')
}
function getPlayList(){
$.get(`./json/playList.json`, {}, function(data) {
var playlists = data.playlists;
console.log(playlists)
$(playlists).each(function(index, item) {
var playCount = formatPlayCount(item.playCount);
$('#playlists').append(`
<div class="col-xs-6 col-sm-3 col-md-2">
<a class="thumbnail">
<img src="${item.coverImgUrl}" class="img-responsive" alt="...">
<div class="caption">
<h5>${item.name}</h5>
<p class="playCount">播放量:${playCount}</p>
</div>
</a>
</div>
`);
})
}, 'json');
}
function formatPlayCount(playCount) {
var playCountStr = playCount;
if (playCount > 100000000) {
playCountStr = (playCount / 100000000).toFixed(1) + "亿"
} else if (playCount > 10000) {
playCountStr = (playCount / 10000).toFixed(1) + "万"
}
return playCountStr;
}
给你每一行都加上注释了。你怎么有两个账户?
function getTheCharts(){
// 从'theCharts.json'文件获取数据
$.get('./json/theCharts.json', {}, function(data) {
// 从数据对象中检索'list'数组
var list = data.list;
// 遍历'list'数组中的每个项
$(list).each(function(index, item) {
// 将新的列表项追加到'#theCharts'元素中
$("#theCharts").append(`
<li class="col-md-3 col-sm-6 col-xs-6">
<div class="bg">
<p class="text-center">${item.updateFrequency}</p>
<h2 class="text-center">${item.name}</h2>
<span class="item_liner"></span>
<ul class="ranking_song"></ul>
</div>
</li>`);
// 遍历当前项目的'tracks'数组中的每个曲目
$(item.tracks).each(function(i,song){
// 在当前索引处的'.ranking_song'元素中追加新的列表项
$('.ranking_song').eq(index).append(`
<li class="row">
<a href="#">
<div class="col-md-3 col-sm-2 col-xs-2 text-right">${i+1}.</div>
<div class="col-md-8 col-sm-9 col-xs-9">
<p>${song.first}</p>
<p>${song.second}</p>
</div>
</a>
</li>
`)
})
})
}, 'json')
}
function getMV(){
// 从'mv.json'文件获取数据
$.get('./json/mv.json',{},function(data){
// 从数据对象中检索'result'数组
var result = data.result;
// 遍历'result'数组中的每个项
$(result).each(function(index, item) {
// 将新的div追加到'#mv'元素中
$("#mv").append(`
<div class="col-xs-6 col-md-6">
<a href="#">
<img class="img-responsive" src="${item.picUrl}" alt="${item.copywriter}">
</a>
</div>
`);
})
},'json')
}
这段代码是一个 JavaScript 的函数和相应的操作。主要功能是使用 AJAX 技术从 JSON 文件中获取数据,并将数据动态地添加到 HTML 页面上。
具体来说,这段代码完成了以下操作:
$(function() { ... })
:这是 jQuery 中的一个语法,表示在文档加载完成后执行的函数。在这里,它用于调用 getCatList()
和 getPlayList()
函数。
getCatList()
函数:这个函数使用 AJAX 从 ./json/catList.json
文件中获取数据。然后,它根据数据动态地生成 HTML 内容,并将其附加到 id 为 catList
的元素上。
getPlayList()
函数:这个函数使用 AJAX 从 ./json/playList.json
文件中获取数据。然后,它根据数据动态地生成 HTML 内容,并将其附加到 id 为 playlists
的元素上。
formatPlayCount()
函数:这个函数用于将播放量数据进行格式化。根据播放量大小,如果大于1亿,将以亿为单位显示;如果大于1万,将以万为单位显示。
总体来说,这段代码是用于在网页中展示分类列表和播放列表的功能。它使用了 jQuery 库中的 AJAX 方法来获取 JSON 数据,并通过生成相应的 HTML 内容进行动态展示。
const GET = 'GET';
const POST = 'POST';
const baseUrl = 'https://xfxuezhang.cn:8080/village/v1/';
request
函数封装请求function request(method, url, data) {
return new Promise((resolve, reject) => {
let header = {
'content-type': 'application/json'
};
uni.request({
url: baseUrl + url,
method: method,
header: header,
data: method === POST ? JSON.stringify(data) : data,
success: (res) => {
if(res.data.code === 0){
resolve(res);
} else {
reject('运行时错误,请稍后再试');
}
},
fail: (err) => {
reject(err);
}
})
})
}
const Api = {
getActivity: (data) => request(GET, 'media/activity/detail', data),
getsiwper: () => request(GET, 'media/activity/newest'),
login: (data) => request(POST, 'user/login', data),
......
};
Api
module.exports = {
Api
}
// 或者
module.exports = {
Api:Api
}
const GET = 'GET';
const POST = 'POST';
const baseUrl = 'https://xfxuezhang.cn:8080/village/v1/';
function request(method, url, data) {
return new Promise((resolve, reject) => {
let header = {
'content-type': 'application/json'
};
uni.request({
url: baseUrl + url,
method: method,
header: header,
data: method === POST ? JSON.stringify(data) : data,
success: (res) => {
if(res.data.code === 0){
resolve(res);
} else {
reject('运行时错误,请稍后再试');
}
},
fail: (err) => {
reject(err);
}
})
})
}
const Api = {
getActivity: (data) => request(GET, 'media/activity/detail', data),
getsiwper: () => request(GET, 'media/activity/newest'),
login: (data) => request(POST, 'user/login', data),
};
module.exports = {
Api
}