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

相关文章

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

如何用Docker运行Django项目

本章教程,介绍如何用Docker创建一个Django,并运行能够访问。 一、拉取镜像 这里我们使用python3.11版本的docker镜像 docker pull python:3.11 二、运行容器 这里我们将容器内部的8080端口,映射到宿主机的80端口上。 docker run -itd --name python311 -p

在cscode中通过maven创建java项目

在cscode中创建java项目 可以通过博客完成maven的导入 建立maven项目 使用快捷键 Ctrl + Shift + P 建立一个 Maven 项目 1 Ctrl + Shift + P 打开输入框2 输入 "> java create"3 选择 maven4 选择 No Archetype5 输入 域名6 输入项目名称7 建立一个文件目录存放项目,文件名一般为项目名8 确定

Java Web指的是什么

Java Web指的是使用Java技术进行Web开发的一种方式。Java在Web开发领域有着广泛的应用,主要通过Java EE(Enterprise Edition)平台来实现。  主要特点和技术包括: 1. Servlets和JSP:     Servlets 是Java编写的服务器端程序,用于处理客户端请求和生成动态网页内容。     JSP(JavaServer Pages)

BUUCTF靶场[web][极客大挑战 2019]Http、[HCTF 2018]admin

目录   [web][极客大挑战 2019]Http 考点:Referer协议、UA协议、X-Forwarded-For协议 [web][HCTF 2018]admin 考点:弱密码字典爆破 四种方法:   [web][极客大挑战 2019]Http 考点:Referer协议、UA协议、X-Forwarded-For协议 访问环境 老规矩,我们先查看源代码

Vue3项目开发——新闻发布管理系统(六)

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后,系统就进入了首页。接下来,也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分,左侧为系统的菜单栏,右侧

SpringBoot项目是如何启动

启动步骤 概念 运行main方法,初始化SpringApplication 从spring.factories读取listener ApplicationContentInitializer运行run方法读取环境变量,配置信息创建SpringApplication上下文预初始化上下文,将启动类作为配置类进行读取调用 refresh 加载 IOC容器,加载所有的自动配置类,创建容器在这个过程

EasyPlayer.js网页H5 Web js播放器能力合集

最近遇到一个需求,要求做一款播放器,发现能力上跟EasyPlayer.js基本一致,满足要求: 需求 功性能 分类 需求描述 功能 预览 分屏模式 单分屏(单屏/全屏) 多分屏(2*2) 多分屏(3*3) 多分屏(4*4) 播放控制 播放(单个或全部) 暂停(暂停时展示最后一帧画面) 停止(单个或全部) 声音控制(开关/音量调节) 主辅码流切换 辅助功能 屏

Maven创建项目中的groupId, artifactId, 和 version的意思

文章目录 groupIdartifactIdversionname groupId 定义:groupId 是 Maven 项目坐标的第一个部分,它通常表示项目的组织或公司的域名反转写法。例如,如果你为公司 example.com 开发软件,groupId 可能是 com.example。作用:groupId 被用来组织和分组相关的 Maven artifacts,这样可以避免

2. 下载rknn-toolkit2项目

官网链接: https://github.com/airockchip/rknn-toolkit2 安装好git:[[1. Git的安装]] 下载项目: git clone https://github.com/airockchip/rknn-toolkit2.git 或者直接去github下载压缩文件,解压即可。