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

2024-04-10 01:44

本文主要是介绍web蓝桥杯真题:年度明星项目,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

代码及注释:

//全部数据
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 => { ...})

这篇关于web蓝桥杯真题:年度明星项目的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/889768

相关文章

深度解析Java项目中包和包之间的联系

《深度解析Java项目中包和包之间的联系》文章浏览阅读850次,点赞13次,收藏8次。本文详细介绍了Java分层架构中的几个关键包:DTO、Controller、Service和Mapper。_jav... 目录前言一、各大包1.DTO1.1、DTO的核心用途1.2. DTO与实体类(Entity)的区别1

如何在Spring Boot项目中集成MQTT协议

《如何在SpringBoot项目中集成MQTT协议》本文介绍在SpringBoot中集成MQTT的步骤,包括安装Broker、添加EclipsePaho依赖、配置连接参数、实现消息发布订阅、测试接口... 目录1. 准备工作2. 引入依赖3. 配置MQTT连接4. 创建MQTT配置类5. 实现消息发布与订阅

springboot项目打jar制作成镜像并指定配置文件位置方式

《springboot项目打jar制作成镜像并指定配置文件位置方式》:本文主要介绍springboot项目打jar制作成镜像并指定配置文件位置方式,具有很好的参考价值,希望对大家有所帮助,如有错误... 目录一、上传jar到服务器二、编写dockerfile三、新建对应配置文件所存放的数据卷目录四、将配置文

怎么用idea创建一个SpringBoot项目

《怎么用idea创建一个SpringBoot项目》本文介绍了在IDEA中创建SpringBoot项目的步骤,包括环境准备(JDK1.8+、Maven3.2.5+)、使用SpringInitializr... 目录如何在idea中创建一个SpringBoot项目环境准备1.1打开IDEA,点击New新建一个项

如何使用Maven创建web目录结构

《如何使用Maven创建web目录结构》:本文主要介绍如何使用Maven创建web目录结构的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录创建web工程第一步第二步第三步第四步第五步第六步第七步总结创建web工程第一步js通过Maven骨架创pytho

Java Web实现类似Excel表格锁定功能实战教程

《JavaWeb实现类似Excel表格锁定功能实战教程》本文将详细介绍通过创建特定div元素并利用CSS布局和JavaScript事件监听来实现类似Excel的锁定行和列效果的方法,感兴趣的朋友跟随... 目录1. 模拟Excel表格锁定功能2. 创建3个div元素实现表格锁定2.1 div元素布局设计2.

如何使用Haporxy搭建Web群集

《如何使用Haporxy搭建Web群集》Haproxy是目前比较流行的一种群集调度工具,同类群集调度工具有很多如LVS和Nginx,本案例介绍使用Haproxy及Nginx搭建一套Web群集,感兴趣的... 目录一、案例分析1.案例概述2.案例前置知识点2.1 HTTP请求2.2 负载均衡常用调度算法 2.

springboot项目中整合高德地图的实践

《springboot项目中整合高德地图的实践》:本文主要介绍springboot项目中整合高德地图的实践,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一:高德开放平台的使用二:创建数据库(我是用的是mysql)三:Springboot所需的依赖(根据你的需求再

一文详解如何在idea中快速搭建一个Spring Boot项目

《一文详解如何在idea中快速搭建一个SpringBoot项目》IntelliJIDEA作为Java开发者的‌首选IDE‌,深度集成SpringBoot支持,可一键生成项目骨架、智能配置依赖,这篇文... 目录前言1、创建项目名称2、勾选需要的依赖3、在setting中检查maven4、编写数据源5、开启热

SpringBoot项目配置logback-spring.xml屏蔽特定路径的日志

《SpringBoot项目配置logback-spring.xml屏蔽特定路径的日志》在SpringBoot项目中,使用logback-spring.xml配置屏蔽特定路径的日志有两种常用方式,文中的... 目录方案一:基础配置(直接关闭目标路径日志)方案二:结合 Spring Profile 按环境屏蔽关