当前位置: 首页 > 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…...

基于Flask实现的医疗保险欺诈识别监测模型

基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施&#xff0c;由雇主和个人按一定比例缴纳保险费&#xff0c;建立社会医疗保险基金&#xff0c;支付雇员医疗费用的一种医疗保险制度&#xff0c; 它是促进社会文明和进步的…...

YSYX学习记录(八)

C语言&#xff0c;练习0&#xff1a; 先创建一个文件夹&#xff0c;我用的是物理机&#xff1a; 安装build-essential 练习1&#xff1a; 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件&#xff0c;随机修改或删除一部分&#xff0c;之后…...

1.3 VSCode安装与环境配置

进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件&#xff0c;然后打开终端&#xff0c;进入下载文件夹&#xff0c;键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成&#xff0c;核心是利用 HTTP 协议的 Range 请求头指定下载范围&#xff1a; 实现原理 Range 请求头&#xff1a;向服务器请求文件的特定字节范围&#xff08;如 Range: bytes1024-&#xff09; 本地文件记录&#xff1a;保存已…...

PL0语法,分析器实现!

简介 PL/0 是一种简单的编程语言,通常用于教学编译原理。它的语法结构清晰,功能包括常量定义、变量声明、过程(子程序)定义以及基本的控制结构(如条件语句和循环语句)。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言,由 Niklaus Wirth 设计,用于展示编译原理的核…...

QT3D学习笔记——圆台、圆锥

类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体&#xff08;对象或容器&#xff09;QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质&#xff08;定义颜色、反光等&#xff09;QFirstPersonC…...

LabVIEW双光子成像系统技术

双光子成像技术的核心特性 双光子成像通过双低能量光子协同激发机制&#xff0c;展现出显著的技术优势&#xff1a; 深层组织穿透能力&#xff1a;适用于活体组织深度成像 高分辨率观测性能&#xff1a;满足微观结构的精细研究需求 低光毒性特点&#xff1a;减少对样本的损伤…...

MacOS下Homebrew国内镜像加速指南(2025最新国内镜像加速)

macos brew国内镜像加速方法 brew install 加速formula.jws.json下载慢加速 &#x1f37a; 最新版brew安装慢到怀疑人生&#xff1f;别怕&#xff0c;教你轻松起飞&#xff01; 最近Homebrew更新至最新版&#xff0c;每次执行 brew 命令时都会自动从官方地址 https://formulae.…...

【LeetCode】3309. 连接二进制表示可形成的最大数值(递归|回溯|位运算)

LeetCode 3309. 连接二进制表示可形成的最大数值&#xff08;中等&#xff09; 题目描述解题思路Java代码 题目描述 题目链接&#xff1a;LeetCode 3309. 连接二进制表示可形成的最大数值&#xff08;中等&#xff09; 给你一个长度为 3 的整数数组 nums。 现以某种顺序 连接…...

OD 算法题 B卷【正整数到Excel编号之间的转换】

文章目录 正整数到Excel编号之间的转换 正整数到Excel编号之间的转换 excel的列编号是这样的&#xff1a;a b c … z aa ab ac… az ba bb bc…yz za zb zc …zz aaa aab aac…; 分别代表以下的编号1 2 3 … 26 27 28 29… 52 53 54 55… 676 677 678 679 … 702 703 704 705;…...