web蓝桥杯真题:年度明星项目

news/2024/11/24 14:15:31/

代码及注释:

//全部数据
var allData = []
// 每次需要加载的数量
var num = 15// TODO: 请在此补充代码实现项目数据文件和翻译数据文件的请求功能
$.get({url: './js/all-data.json'}).then(res => {allData = resloading(allData, num)   //初始加载数据
})
$.get({url: './js/translation.json'}).then(res => {translation = res
})
// TODO-END// TODO: 请修改以下代码实现项目数据展示的功能
function loading(data, num) {$("ul > li").remove() //对已有的项目置空data.forEach((item, index) => { //每次加载num个项目,其中对描述(中文或英文)做出处理if(index < num) {  //需要展示的项目数组const element = { icon: item.icon,description: currLang == "zh-cn" ? item.descriptionCN : item.descriptionEN,name: item.name,stars: item.stars,tags: item.tags,};// 添加至页面的项目列表中,查看页面可以看到有一行 bun 的项目数据$(".list > ul").append(createProjectItem(element));}})
}
// TODO-END//点击更多
$(".load-more").click(() => {num += 15     //数量加15loading(allData, num)   //调用loading函数document.querySelector('.load-more').style.display = "none"
})// 用户点击切换语言的回调
$(".lang").click(() => {// 切换页面文字的中英文if (currLang === "en") {$(".lang").text("English");currLang = "zh-cn";} else {$(".lang").text("中文");currLang = "en";}$("body").find("*").each(function () {const text = $(this).text().trim();if (translation[text]) {$(this).text(translation[text]);}});// TODO: 请在此补充代码实现项目描述的语言切换loading(allData, num)   //调用loading函数重新加载
});

知识点:

1.元素移除
element.remove()        //删除一个子节点
parent.removeChild(child)        //删除一个子节点并返回删除的节点。
2.元素添加
element.append()        //添加多个节点,没有返回值
parent.appendChild(child)        //追加单个节点,返回追加的 Node 节点
3.子元素选择(.list > ul)            //.list类名下的ul标签元素
4.请求ajax.get({url: '...'}).then(res => { ...})


http://www.ppmy.cn/news/1412999.html

相关文章

Redis Desktop Manager可视化工具

可视化工具 Redis https://www.alipan.com/s/uHSbg14XmsL 提取码: 38cl 点击链接保存&#xff0c;或者复制本段内容&#xff0c;打开「阿里云盘」APP &#xff0c;无需下载极速在线查看&#xff0c;视频原画倍速播放。 官网下载&#xff08;不推荐&#xff09;&#xff1a;http…

【热门话题】 Fiddler:一款强大的Web调试代理工具——安装与使用详解

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 Fiddler&#xff1a;一款强大的Web调试代理工具——安装与使用详解一、Fiddler的…

4.9QT

完善对话框&#xff0c;点击登录对话框&#xff0c;如果账号和密码匹配&#xff0c;则弹出信息对话框&#xff0c;给出提示”登录成功“&#xff0c;提供一个Ok按钮&#xff0c;用户点击Ok后&#xff0c;关闭登录界面&#xff0c;跳转到其他界面 如果账号和密码不匹配&#xf…

GitHub 仓库 (repository) Pulse - Contributors - Network

GitHub 仓库 [repository] Pulse - Contributors - Network 1. Pulse2. Contributors3. NetworkReferences 1. Pulse 显示该仓库最近的活动信息。该仓库中的软件是无人问津&#xff0c;还是在火热地开发之中&#xff0c;从这里可以一目了然。 2. Contributors 显示对该仓库进…

Java基础知识总结(46)

&#xff08;1&#xff09;构造器 构造器的定义&#xff1a; 需要注意的是构造器是一种特殊的方法&#xff0c;其方法名和类名相同&#xff0c;但没有方法返回值&#xff0c;也不用void修饰。 [修饰符] 方法名(形参列表){ •方法体 •} 修饰符&#xff1a;修饰符可以省略&am…

宁波宠物展|2024中国(宁波)国际宠物用品博览会

中国(宁波)国际宠物用品博览会 地点&#xff1a;宁波国际会展中心 时间&#xff1a;2024年11月14-16日 主办单位:凤麟展览(宁波)有限公司 协办单位:浙江省宠物产业协会 宁波市跨境电子商务协会 宁波欧德国际商务咨询服务有限公司 宁波扬扬会议展览有限公司 20000方展览…

X服务器远程连接问题解决:Bad displayname ““‘或Missing X server or $DISPLAY

X服务器远程连接问题 报错1 ImportError: this platform is not supported: (failed to acquire X connection: Bad displayname "", DisplayNameError()) Try one of the following resolutions: * Please make surethat you have an X server running, and that …

【图像分类】MMPretrain训练ImageNet格式自定义数据集

1. 安装环境 1.1. Conda虚拟环境 conda create --name mmpretrain python3.8 -y conda activate mmpretrain 1.2. 安装PyTorch pip install torch1.13.1cu117 torchvision0.14.1cu117 torchaudio0.13.1 --extra-index-url https://download.pytorch.org/whl/cu117 1.3. 安…