蓝桥杯前端Web赛道-课程列表

蓝桥杯前端Web赛道-课程列表

题目链接:0课程列表 - 蓝桥云课 (lanqiao.cn)

题目要求如下:

在这里插入图片描述

分析题目我们发现其实就是需要我们手写一个分页的功能,根据题目的要求,分析如下

  • 需要通过axios获取数据
  • 每页显示5条数据,默认当前页码是第一页
  • 要在页面上渲染出总页数和当前是第几页
  • 页码为第一页的时候禁用上一页的按钮,页码为第二页的时候禁用下一页的按钮

现在开始一步一步的完成上面的需求,我们先使用axios来获取数据

let pageNum = 1; // 当前页码,默认页码1
let maxPage; // 最大页数// TODO:待补充代码
const getData = ()=>{axios.get('./js/carlist.json').then((res)=>{console.log(res.data);})
}
getData()
// 点击上一页
let prev = document.getElementById("prev");
prev.onclick = function () {// TODO:待补充代码
};
// 点击下一页
let next = document.getElementById("next");
next.onclick = function () {// TODO:待补充代码
};

通过打印来验证是否获得数据

console.log(res.data);

确认数据被获取到之后,再把数据赋到另外一个变量去。

第二步的思路如下:当点击第一页的时候,我们就只渲染第一页应该出现的数据量,点击第二页的时候再出现第二页应该出现的数据量,所以getData()这个函数在点击上一页和下一页的时候是会被反复调用的,我们只需要确定从第几个数据开始遍历list变量,并确定遍历结束的位置即可。

根据题目我们可以得出,一共有十六条数据,一页需要显示5条数据。

则第一页的数据对应的是数组下标0到第4条数据

第二页的数据对应的是数组下标5到第9条数据

第三页对应的是数组下标10到第14条数据

最后一页则显示数组下标第15条数据

从上面的规律可以得出循环可以轻易的出遍历开始的计算公式

let start = (pageNum-1)*5

那么结束的位置怎么确定呢,我们看最后一页可以轻松得出,当pageNum到达第四页的时候,就来到了最后一条数据,此时start的值为15,所以就容易得出

let end = pageNum==4?start+1:start+4

判断此时pageNum的值是否是第四页,是的话就在start的基础上+1,这样循环就只会遍历一次,从而将最后一条数据遍历出来,否则则在此基础上加上4

可以通过以上两个公式来验证刚刚我们得到的结论。

得出规律之后,我们就可以进行遍历以及渲染了

然后再通过计算得出总页数

    maxPage = Math.ceil(list.length/5) 

Math.ceil函数的作用会将计算出来的数字进行向上取整。

然后按照要求渲染到对应的地方

 document.getElementById('pagination').innerHTML = `${maxPage}页,当前${pageNum}`

代码如下

let pageNum = 1; // 当前页码,默认页码1
let maxPage; // 最大页数// TODO:待补充代码
const getData = ()=>{axios.get('./js/carlist.json').then((res)=>{let list;list = res.dataconsole.log(list);let start = (pageNum-1)*5let end = pageNum==4?start+1:start+4maxPage = Math.ceil(list.length/5) let html=''for(let i=start;i<end;i++){html+=`<!-- list-group 起始位置  list-group为示例代码,动态渲染时可删除--><div class="list-group"><a href="#" class="list-group-item list-group-item-action"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1">${list[i].name}</h5><small>${list[i].price}</small></div><p class="mb-1">${list[i].description}</p></a></div><!-- list-group 结束位置 -->`}document.getElementById('list').innerHTML = html;document.getElementById('pagination').innerHTML = `${maxPage}页,当前${pageNum}`})}
getData()
// 点击上一页
let prev = document.getElementById("prev");
prev.onclick = function () {// TODO:待补充代码
};
// 点击下一页
let next = document.getElementById("next");
next.onclick = function () {// TODO:待补充代码
};

然后再来实现最后一个要求

点击按钮进行跳转并且页码为第一页的时候禁用上一页的按钮,页码为第二页的时候禁用下一页的按钮

根据要求可以轻易的得出,当页数为第一页的时候,上一页的按钮就应该添加disabled的样式

页数为最后一页的时候就轮到下一页的按钮添加disabled的样式,我们只需要根据当前页码判断即可

请注意添加了类名之后,情况如果改变需要移除类名并且每点击一次按钮就需要再调用一次getData()方法不要遗忘

完整代码如下

let pageNum = 1; // 当前页码,默认页码1
let maxPage; // 最大页数// TODO:待补充代码
const getData = ()=>{axios.get('./js/carlist.json').then((res)=>{let list;list = res.datalet start = (pageNum-1)*5let end = pageNum==4?start+1:start+4maxPage = Math.ceil(list.length/5) let html=''for(let i=start;i<end;i++){html+=`<!-- list-group 起始位置  list-group为示例代码,动态渲染时可删除--><div class="list-group"><a href="#" class="list-group-item list-group-item-action"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1">${list[i].name}</h5><small>${list[i].price}</small></div><p class="mb-1">${list[i].description}</p></a></div><!-- list-group 结束位置 -->`}document.getElementById('list').innerHTML = html;document.getElementById('pagination').innerHTML = `${maxPage}页,当前${pageNum}`})}
getData()
// 点击上一页
let prev = document.getElementById("prev");
prev.onclick = function () {// TODO:待补充代码pageNum = pageNum-1if(pageNum===1){prev.classList.add('disabled')next.classList.remove('disabled')}else {prev.classList.remove('disabled')}getData()
};
// 点击下一页
let next = document.getElementById("next");
next.onclick = function () {pageNum = pageNum+1// TODO:待补充代码if(pageNum===4){next.classList.add('disabled')}else {next.classList.remove('disabled')prev.classList.remove('disabled')}getData()
};

至此完成目标

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

P1927 防护伞

题目传送门 题目描述 据说 2012 的灾难和太阳黑子的爆发有关。于是地球防卫小队决定制造一个特殊防护伞&#xff0c;挡住太阳黑子爆发的区域&#xff0c;减少其对地球的影响。由于太阳相对于地球来说实在是太大了&#xff0c;我们可以把太阳表面看作一个平面&#xff0c;中心…

黑马程序员java部分笔记(持续更新)九点六:数组的常见操作

数组的常见操作&#xff1a; 求最值 求和 交换数据 打乱数据 ---------------------------------------------------------------------------------------------------------------------------------1.求最值&#xff1a;【个人建议看看B站上的视频&#xff0c;提有意思的】…

11.vue学习笔记(组件生命周期+生命周期应用+动态组件+组件保持存活)

文章目录 1.组件生命周期2.生命周期应用2.1通过ref获取元素DOM结构2.2.模拟网络请求渲染数据 3.动态组件3.1.A&#xff0c;B两个组件 4.组件保持存活&#xff08;销毁期&#xff09; 1.组件生命周期 每个Vue组件实例在创建时都需要经历一系列的初始化步骤&#xff0c;比如设置…

Android摄像头横屏的时候_人脸预览横向显示_问题解决---Android原生开发工作笔记164

在Android系统的平板中发现一个问题,我们做的一个Android程序,横屏的时候,摄像头在上面, 然后这个时候程序中的一个人脸预览页面,横向手持平板,摄像头在上面,但是这个时候预览的摄像头画面却是很像头像朝左,也是横过来的. private int getCameraOrientation(int cameraId) {Ca…

Rocky Linux安装部署Elasticsearch(ELK日志服务器)

一、Elasticsearch的简介 Elasticsearch是一个强大的开源搜索和分析引擎&#xff0c;可用于实时处理和查询大量数据。它具有高性能、可扩展性和分布式特性&#xff0c;支持全文搜索、聚合分析、地理空间搜索等功能&#xff0c;是构建实时应用和大规模数据分析平台的首选工具。 …

Linux学习之system V

目录 一&#xff0c;system V共享内存 快速认识接口 shmget(shared memory get) shmat(shared memory attach) shmdt(shared memory delete) shmctl (shared memory control) 编写代码 综上那么共享内存与管道通信有什么区别&#xff1f; system v消息队列 system v信号…

《Effective C++》- 极精简版 41-55条

本文章属于专栏《业界Cpp进阶建议整理》 继续上篇《Effective C》- 极精简版 31-40条。本文列出《Effective C》的41-55条的个人理解的极精简版本。 40、谨慎使用多重继承 个人见解&#xff1a;这是一个性价比不高的功能&#xff0c;容易出错&#xff0c;且收益不高。java语言…

代码随想录训练营总结篇

1:刚开始学习了数据结构的时候,碰到一些树图等有点畏难,感觉刷力扣跟是一件恐怖的事情 2:在网上找了很多关于数据结构与算法的视频讲解,有听进去,但是自己动手写有点困难 3:碰到一些比较复杂的问题时需要与人讨论,加了一些代码随想录中的群,发现这里是学习算法 的天堂,大家都…

【深度学习笔记】深度卷积神经网络——NiN

网络中的网络&#xff08;NiN&#xff09; LeNet、AlexNet和VGG都有一个共同的设计模式&#xff1a;通过一系列的卷积层与汇聚层来提取空间结构特征&#xff1b;然后通过全连接层对特征的表征进行处理。 AlexNet和VGG对LeNet的改进主要在于如何扩大和加深这两个模块。 或者&am…

Android 14 权限

问题Android 14 按照视频播放类的应用 无法获取到权限。 原因是从 Android 13 开始&#xff0c;如果你的应用程序 targetSdk 指定到了 33 或以上&#xff0c;那么 READ_EXTRERNAL_STORGE 权限就完全失去了作用&#xff0c;申请它将不会产生任何效果。 与此相对应的&#xff0c…

C编程学习资源汇总

Study Soures Pool 基础:推荐 C Primer Plus 第6版 中文版 + C Primer Plus 第6版 中文版习题解答 进阶:推荐使用小甲鱼的学习视频,课程细致,而且免费,资源很丰富。 首页:鱼C工作室-免费编程视频教学|Python教学|Web开发教学|全栈开发教学|C语言教学|汇编教学|Win32开发…

诉诸存储和传输的编码

用脑补而不是重传对有损传输进行纠错 后&#xff0c;有朋友评论&#xff1a; 可现代的图像压缩、数据编码已经很大程度上把可以脑补的空间从传输载荷中沥干了——完美编码下所传输的数据是近乎噪声的没有任何特点的分布。在这个框架下&#xff0c;被压缩的载荷如果随便丢了一点…

Linux------进程地址空间

目录 一、进程地址空间 二、地址空间本质 三、什么是区域划分 四、为什么要有地址空间 1.让进程以统一的视角看到内存 2.进程访问内存的安全检查 3.将进程管理与内存管理进行解耦 一、进程地址空间 在我们学习C/C的时候&#xff0c;一定经常听到数据存放在堆区、栈区、…

4、正则表达式、本地存储

一、正则表达式 1、定义 用事先定义好的一些特定字符&#xff0c;这样的字符组合&#xff0c;组合成一个“规则字符串” 2、正则的组成 特殊字符 字母、数字、下划线、中文、特殊字符… 元字符&#xff08;常用&#xff09; 1、\d 匹配至少有一个数字 var reg /\d/ /…

2024Java面试题一

目录 问题&#xff1a; 答案&#xff1a; 问题&#xff1a; 什么是Java中的多态性&#xff08;Polymorphism&#xff09;&#xff1f;Java中的重载&#xff08;Overloading&#xff09;和重写&#xff08;Overriding&#xff09;有什么区别&#xff1f;什么是Java中的抽象类&…

XGB-13:使用 XGBoost 外部内存版本

在处理大型数据集时&#xff0c;训练 XGBoost 模型可能会面临挑战&#xff0c;因为整个数据集需要加载到内存中。这可能成本高昂&#xff0c;有时也难以实现。从版本 1.5 开始&#xff0c;用户可以定义自定义迭代器以按块加载数据来运行 XGBoost 算法。外部内存可以用于训练和预…

每日一题Acwing-借教室

503. 借教室 - AcWing题库 想到了差分没想到二分法。同时注意INT的范围是10位。 #include<iostream> using namespace std; int n,m; const int N 1e610; int r[N],s[N],d[N],t[N]; long long b[N]; bool check(int mid){for(int i1;i<n;i){b[i]r[i]-r[i-1];}for(…

SpringBoot整合rabbitmq-直连交换机队列(二)

说明&#xff1a;本文章主要是Direct定向/直连类型交换机的使用&#xff0c;它的大致流程是将一个队列绑定到一个直连交换机上&#xff0c;并赋予一个路由键 routingkey&#xff0c;当一个消息携带着路由值为routingkey&#xff0c;这个消息通过生产者发送给交换机时&#xff0…

【冲击蓝桥篇】动态规划(下):你还在怕动态规划!?进来!答题模板+思路解析+真题实战

&#x1f389;&#x1f389;欢迎光临&#x1f389;&#x1f389; &#x1f3c5;我是苏泽&#xff0c;一位对技术充满热情的探索者和分享者。&#x1f680;&#x1f680; &#x1f31f;特别推荐给大家我的最新专栏《数据结构与算法&#xff1a;初学者入门指南》&#x1f4d8;&am…