当前位置: 首页 > news >正文

【ajax实战08】分页功能

本文章目标:点击上/下一页按钮,实现对应页面的变化
实现基本步骤:

一:保存并设置文章总条数

设置一个全局变量,将服务器返回的数据返回给全局变量

二:点击下一页,做临界值判断,并切换页码参数并请求最新数据

核心代码

searchUrl.page < Math.ceil(totalPage / searchUrl.page)

判断是否可以有下一页

三:点击上一页,做临界值判断,并切换页码参数并请求最新数据

document.querySelector('.next').addEventListener('click', () => {if (searchUrl.page < Math.ceil(totalPage / searchUrl.page)) {searchUrl.page++document.querySelector('.page-now').innerHTML = `${searchUrl.page}`getArtileList()}
})
document.querySelector('.last').addEventListener('click', () => {if (searchUrl.page > 1) {searchUrl.page--document.querySelector('.page-now').innerHTML = `${searchUrl.page}`getArtileList()}
})

相关文章:

【ajax实战08】分页功能

本文章目标&#xff1a;点击上/下一页按钮&#xff0c;实现对应页面的变化 实现基本步骤&#xff1a; 一&#xff1a;保存并设置文章总条数 设置一个全局变量&#xff0c;将服务器返回的数据返回给全局变量 二&#xff1a;点击下一页&#xff0c;做临界值判断&#xff0c;并…...

基于Hadoop平台的电信客服数据的处理与分析②项目分析与设计---需求分析-项目场景引入

任务描述 需求分析是软件生命周期中一个非常重要的过程&#xff0c;它决定着整个软件项目的质量&#xff0c;也是整个软件开发的成败所在。本环节任务是完成软件需求规格说明书。 知识点 &#xff1a;软件需求规格说明书的编写 重 点 &#xff1a;软件需求规格说明书内容的…...

debug-mmlab

mmyolo bug1: MMYOLO for yolov5 instance segmentation on balloon dataset getting this error "ValueError: Key img_path is not in available keys. solution: pip install albumentations1.3.1 reference...

年轻人为什么那么爱喝奶茶?

作者 | 艾泊宇 为什么年轻人那么爱喝奶茶&#xff1f;答案很简单&#xff1a;对他们来说&#xff0c;奶茶之于年轻人&#xff0c;正如白酒之于中年人。 奶茶不仅仅是一种饮料&#xff0c;它已经演化成一种文化现象&#xff0c;代表着温暖和爱的象征&#xff0c;甚至在某种程度上…...

手写数组去重

方法1-判断相邻元素 function _deleteRepeat(arr){if(!Array.isArray(arr)){throw new Error(参数必须是数组)}let res[];// 使用slice创建arr的副本&#xff0c;并排序let sortArrarr.slice().sort((a,b)>a-b);for(let i0;i<sortArr.length;i){if(isortArr.length-1||s…...

Firewalld 防火墙

1. 概述 在 RHEL7 系统中&#xff0c;firewalld 防火墙取代了传统的 iptables 防火墙。iptables 的防火墙策略是通过内核层面的 netfilter 网络过滤器来处理的&#xff0c;而 firewalld 则是通过内核层面的 nftables 包过滤框架来处理。firewalld 提供了更为丰富的功能和动态更…...

Hive查询优化 - 面试工作不走弯路

引言&#xff1a;Hive作为一种基于Hadoop的数据仓库工具&#xff0c;广泛应用于大数据分析。然而&#xff0c;由于其依赖于MapReduce框架&#xff0c;查询的性能可能会受到影响。为了确保Hive查询能够高效运行&#xff0c;掌握查询优化技巧至关重要。在日常工作中&#xff0c;高…...

【VUE3】uniapp + vite中 uni.scss 使用 /deep/ 不生效(踩坑记录三)

vite 中使用 /deep/ 进行样式穿透报错 原因&#xff1a;vite 中不支持&#xff0c;换成 ::v-deep 或:deep即可...

容器部署rabbitmq集群迁移

1、场景&#xff1a; 因业务需要&#xff0c;要求把rabbitmq-A集群上的数据迁移到rabbitmq-B集群上&#xff0c;rabbitmq的数据包括元数据&#xff08;RabbitMQ用户、vhost、队列、交换和绑定&#xff09;和消息数据&#xff0c;而消息数据存储在单独的消息存储库中。 2、迁移要…...

DP:背包问题----0/1背包问题

文章目录 &#x1f497;背包问题&#x1f49b;背包问题的变体&#x1f9e1;0/1 背包问题的数学定义&#x1f49a;解决背包问题的方法&#x1f499;例子 &#x1f497;解决背包问题的一般步骤&#xff1f;&#x1f497;例题&#x1f497;总结 ❤️❤️❤️❤️❤️博客主页&…...

React antd umi 监听当前页面离开,在菜单栏提示操作

需求是我这里有个页面&#xff0c;离开当前页面之后&#xff0c;需要在菜单栏显示个提示&#xff0c;也就是Tour const [unblock, setUnblock] useState<() > void>(() > () > {});const [next, setNext] useState();useEffect(() > {const unblockHandler…...

在 Windows PowerShell 中模拟 Unix/Linux 的 touch 命令

在 Unix 或 Linux 系统中&#xff0c;touch 命令被广泛用于创建新文件或更新现有文件的时间戳。不过&#xff0c;在 Windows 系统中&#xff0c;尤其是在 PowerShell 环境下&#xff0c;并没有内置的 touch 命令。这篇博客将指导你如何在 Windows PowerShell 中模拟 touch 命令…...

鸿蒙NEXT

[中国&#xff0c;东莞&#xff0c;2024年6月24日] 华为开发者大会&#xff08;HDC&#xff09;正式开幕&#xff0c;带来全新的 HarmonyOS NEXT、盘古大模型5.0等最创新成果&#xff0c;持续为消费者和开发者带来创新体验。 HarmonyOS NEXT 鸿蒙生态 星河璀璨 鸿蒙生态设备数…...

VUE3-Elementplus-form表单-笔记

1. 结构相关 el-row表示一行&#xff0c;一行分成24份 el-col表示列 (1) :span"12" 代表在一行中&#xff0c;占12份 (50%) (2) :span"6" 表示在一行中&#xff0c;占6份 (25%) (3) :offset"3" 代表在一行中&#xff0c;左侧margin份数 el…...

Analyze an ORA-12801分析并行 parallel 12801 实际原因

"ORA-06512: at "PKG_P_DATA", line 19639 ORA-06512: at "PKG_P_DATA", line 19595 ORA-06512: at "PKG_P_DATA", line 14471-JOB 调用 -ORA-12801: error signaled in parallel query server P009, instance rac2:dwh2 (2) Error: ORA-12…...

高级运维工程师讲述银河麒麟V10SP1服务器加固收回权限/tmp命令引起生产mysql数据库事故实战

高级运维工程师讲述银河麒麟V10SP1服务器加固收回权限/tmp命令引起生产MySql数据库事故实战 一、前言 作为运维工程师经常会对生产服务器进行安全漏洞加固&#xff0c;一般服务厂商、或者甲方信息安全中心提供一些安全的shell脚本&#xff0c;一般这种shell脚本都是收回权限&…...

昇思25天学习打卡营第09天|sea_fish

打开第九天&#xff0c;本次学习的内容为保存与加载&#xff0c;记录学习的过程。本次的内容少而且简单。 在训练网络模型的过程中&#xff0c;实际上我们希望保存中间和最后的结果&#xff0c;用于微调&#xff08;fine-tune&#xff09;和后续的模型推理与部署&#xff0c;因…...

flutter开发实战-Charles抓包设置,dio网络代理

flutter开发实战-Charles抓包设置 在开发过程中抓包&#xff0c;可以看到请求参数等数据&#xff0c;方便分析问题。flutter上使用Charles抓包设置。dio需要设置网络代理。 一、dio设置网络代理 在调试模式下需要抓包调试&#xff0c;所以需要使用代理&#xff0c;并且仅用H…...

Elasticsearch:Runtime fields - 运行时字段(二)

这是继上一篇文章 “Elasticsearch&#xff1a;Runtime fields - 运行时字段&#xff08;一&#xff09;” 的续篇。 在查询时覆盖字段值 如果你创建的运行时字段与映射中已存在的字段同名&#xff0c;则运行时字段会隐藏映射字段。在查询时&#xff0c;Elasticsearch 会评估运…...

Python正则表达式的入门用法(上)

Python正则表达式是使用re模块来进行操作的。re模块提供了一组函数&#xff0c;用于进行字符串的匹配和查找操作。 下面是Python中使用正则表达式的一些常用函数&#xff1a; re.search(pattern, string)&#xff1a;在字符串中查找并返回第一个匹配的对象。 re.match(patte…...

梦行云软件——溯源系统-》企业方》产品溯源管理》员工管理

梦行云软件——溯源系统-》企业方》产品溯源管理》员工管理 湖南梦辰软件开发有限公司是立足怀化、服务全国的数字化技术服务商。公司拥有19项软件著作权及多项自主知识产权。专注于Web系统、APP与小程序定制开发&#xff0c;提供全链路数字化解决方案。以合规先行与稳定交付为…...

OneMore插件:让OneNote效率倍增的全方位解决方案

OneMore插件&#xff1a;让OneNote效率倍增的全方位解决方案 【免费下载链接】OneMore A OneNote add-in with simple, yet powerful and useful features 项目地址: https://gitcode.com/gh_mirrors/on/OneMore 当你在OneNote中处理复杂表格时&#xff0c;是否曾因缺乏…...

RRT*在ROS中的实战:用Gazebo仿真实现动态避障(Python+ROS Noetic)

RRT*在ROS中的实战&#xff1a;用Gazebo仿真实现动态避障&#xff08;PythonROS Noetic&#xff09; 路径规划是机器人自主导航的核心技术之一。在复杂动态环境中&#xff0c;如何快速找到一条安全且优化的路径一直是研究热点。RRT*&#xff08;Rapidly-exploring Random Trees…...

Genus水平共现网络分析:高效替代OTU的实战指南

1. 为什么需要Genus水平共现网络分析&#xff1f; 做微生物群落研究的朋友们应该都深有体会&#xff0c;OTU/ASV水平的共现网络分析简直就是个时间黑洞。我去年处理一个土壤微生物项目时&#xff0c;2000多个OTU的共现网络跑了整整8个小时&#xff0c;等结果的时候都能看完两集…...

OpenClaw任务编排:GLM-4.7-Flash复杂流程设计

OpenClaw任务编排&#xff1a;GLM-4.7-Flash复杂流程设计 1. 为什么需要任务编排 去年我接手了一个市场分析项目&#xff0c;需要每周手动收集竞品动态并生成报告。重复性的复制粘贴和格式调整消耗了大量时间&#xff0c;直到发现OpenClaw可以通过编排GLM-4.7-Flash模型实现全…...

从防火墙到AI:企业级网络异常检测方案选型指南(2024最新版)

从防火墙到AI&#xff1a;企业级网络异常检测方案选型指南&#xff08;2024最新版&#xff09; 当某跨国零售企业遭遇持续3天的DDoS攻击导致线上业务瘫痪时&#xff0c;技术团队发现传统防火墙规则库已48小时未更新&#xff1b;而当某金融机构因AI模型误判正常促销流量为异常导…...

STM32F103 Bootloader跳转失败?别急着怀疑Boot,先检查你的裸机APP中断向量表

STM32F103 Bootloader跳转失败&#xff1f;别急着怀疑Boot&#xff0c;先检查你的裸机APP中断向量表 当你的STM32F103项目采用HAL库Bootloader搭配裸机应用程序&#xff08;APP&#xff09;时&#xff0c;如果遇到Bootloader能正常启动HAL版本的APP却无法跳转裸机APP的情况&…...

Thorium浏览器架构深度解析:基于Chromium的极致性能优化实践

Thorium浏览器架构深度解析&#xff1a;基于Chromium的极致性能优化实践 【免费下载链接】thorium Chromium fork named after radioactive element No. 90. Windows and MacOS/Raspi/Android/Special builds are in different repositories, links are towards the top of the…...

保姆级教程:在RK3568开发板上配置RK809-5 PMIC的Android设备树(附完整代码)

RK3568开发板实战&#xff1a;RK809-5 PMIC设备树配置全流程解析 当你在RK3568开发板上第一次按下电源键&#xff0c;却只看到一片黑屏时&#xff0c;作为嵌入式工程师的直觉会告诉你&#xff1a;PMIC配置出了问题。RK809-5这颗电源管理芯片就像系统的"心脏"&#xf…...

so-vits-svc声压级标准化技术解析:从原理到实践的7个关键维度

so-vits-svc声压级标准化技术解析&#xff1a;从原理到实践的7个关键维度 【免费下载链接】so-vits-svc SoftVC VITS Singing Voice Conversion 项目地址: https://gitcode.com/gh_mirrors/so/so-vits-svc 声压级标准化是so-vits-svc&#xff08;SoftVC VITS Singing Vo…...