【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()}
})

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

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

相关文章

Firefox 编译指南2024 Windows10篇- 编译Firefox(三)

1.引言 在成功获取了Firefox源码之后&#xff0c;下一步就是将这些源码编译成一个可执行的浏览器。编译是开发流程中的关键环节&#xff0c;通过编译&#xff0c;我们可以将源代码转换为可执行的程序&#xff0c;测试其功能&#xff0c;并进行必要的优化和调试。 对于像Firef…

git命令含有中文,终端输出中文乱码的问题

目录 1、[当前代码页] 的936 (ANSI/OEM - 简体中文 GBK) 是导致中文乱码的原因 2、这样会导致什么问题呢&#xff1f; (1) 问题一: 【属性】选项的【字体】无法识别自定义文字样式&#xff0c;【默认值】选项可选自定义字体样式&#xff0c;却无法覆盖【属性】选项 (2) 问题…

品牌推广怎么样?掌握正确做法,让品牌大放异彩!

品牌推广对于初创公司来说是一项至关重要的任务。在市场众多品牌中&#xff0c;如何脱颖而出&#xff0c;是每个品牌方都要考虑的问题。 作为一名手工酸奶品牌的创始人&#xff0c;目前全国复制了100多家门店&#xff0c;我来分享下&#xff0c;如何推广&#xff0c;可以让品牌…

通过shell脚本创建MySQl数据库

通过shell脚本创建数据库 #!/bin/bashserverIP10.1.1.196 SERVER_NAMEecho $serverIP | cut -d . -f4cat<<EOF>db.sql drop database if exists ${SERVER_NAME}_scheduler; drop database if exists ${SERVER_NAME}_kms; drop database if exists ${SERVER_NAME}_uim…

Unity 粒子特效(下)

11、Size over Lifetime(生命周期内大小) 主要用于定义粒子从发射到消亡的整个生命周期内&#xff0c;其大小如何随时间发生变化。通过该模块&#xff0c;可以创建出如烟雾扩散、火焰膨胀等。Separate Axes&#xff1a;当勾选此选项时&#xff0c;可以分别控制粒子在X轴、Y轴和…

自定义控件动画篇(四)ObjectAnimator的使用

ObjectAnimator 是 Android 属性动画框架中的一个重要组件&#xff0c;它允许你针对特定属性的值进行动画处理。与 ValueAnimator 相比&#xff0c;ObjectAnimator 更专注于 UI 组件&#xff0c;可以直接作用于视图的属性&#xff0c;如位置、尺寸、透明度等&#xff0c;而无需…

详细阐述 Spring Boot 的核心概念、优势、开发流程、常见配置以及最佳实践

Spring Boot 是一种基于 Java 的框架&#xff0c;它简化了基于 Spring 的应用开发。通过自动配置和嵌入式服务器等技术&#xff0c;Spring Boot 使得开发者可以快速搭建并运行 Spring 应用。下面&#xff0c;我将详细阐述 Spring Boot 的核心概念、优势、开发流程、常见配置以及…

闭包的不同形式

定义 **闭包&#xff08;closure&#xff09;**是一个函数以及其捆绑的周边环境状态&#xff08;lexical environment&#xff0c;词法环境&#xff09;的引用的组合。换而言之&#xff0c;闭包让开发者可以从内部函数访问外部函数的作用域。在 JavaScript 中&#xff0c;闭包…

【Jetpack】ViewModel使用技巧

ViewModel的基本使用方法&#xff0c;这里不再讲解 ViewModel优点 可以在屏幕旋转之后&#xff0c;仍然保持之前的状态&#xff0c;这样就不用刻意去处理屏幕旋转事件可以轻松实现作用域内的单例模式可以轻松在作用域内进行数据共享 ViewMode使用注意 不能将Activity作为Co…

Centos7修改yum源

安装好系统后&#xff0c;网络能通信&#xff0c;源也没有配置&#xff0c;但是安装软件失败。 解决办法&#xff1a;配置阿里yum源 # curl -o /etc/yum.repos.d/CentOS-Base.repo https://mirrors.aliyun.com/repo/Centos-7.repo # yum clean all # yum make cache再次安装软…

AI安全研究滞后?清华专家团来支招

在21世纪的科技浪潮中&#xff0c;人工智能&#xff08;AI&#xff09;无疑是最为耀眼的一抹亮色。随着技术的不断突破&#xff0c;AI正以前所未有的速度融入我们的日常生活&#xff0c;重塑着社会、经济乃至人类文明的面貌。然而&#xff0c;在这股汹涌澎湃的发展洪流中&#…

二分查找1

1. 二分查找&#xff08;704&#xff09; 题目描述&#xff1a; 算法原理&#xff1a; 暴力解法就是遍历数组来找到相应的元素&#xff0c;使用二分查找的解法就是每次在数组中选定一个元素来将数组划分为两部分&#xff0c;然后因为数组有序&#xff0c;所以通过大小关系舍弃…

七天速通javaSE:第五天 数组基础

文章目录 前言一、认识数组二、数组的声明和创建1. 声明数组变量2. 创建数组3. 变量的初始化&#xff08;赋值&#xff09;3.1 静态初始化3.2 动态初始化 3. 示例 三、数组的使用1. 循环1.1 普通for循环1.2 For-Each 循环 2. 数组作为函数的参数和返回值 前言 本文将为大家介绍…

Win11 Python3.10 安装pytorch3d

0&#xff0c;背景 Python3.10、cuda 11.7、pytorch 2.0.1 阅读【深度学习】【三维重建】windows10环境配置PyTorch3d详细教程-CSDN博客 1&#xff0c;解决方法 本来想尝试&#xff0c;结果发现CUB安装配置对照表里没有cuda 11.7对应的版本&#xff0c;不敢轻举妄动&#x…

0051__win - RegisterWaitForSingleObject的例子

win - RegisterWaitForSingleObject的例子_registerwaitforsingleobject msdn-CSDN博客

DP:子序列问题

文章目录 什么是子序列子序列的特点举例说明常见问题 关于子序列问题的几个例题1.最长递增子序列2.摆动序列3.最长递增子序列的个数4.最长数对链5.最长定差子序列 总结 什么是子序列 在计算机科学和数学中&#xff0c;子序列&#xff08;Subsequence&#xff09;是指从一个序列…

c语言的烫烫烫烫烫??

当初学习C语言时&#xff0c;对于一些特殊的打印输出可能会感到困惑&#xff0c;比如会出现一堆乱码烫烫烫的情况。其实这是因为在C语言中&#xff0c;对于字符类型和数字类型之间的隐式转换可能会导致打印输出的结果不符合预期。这并不意味着程序员"烫"&#xff0c;…

[激光原理与应用-96]:激光器研发与生产所要的常见设备(大全)与仪器(图解)

目录 一、激光器制造设备 二、测试与校准设备 2.1 光功率计&#xff1a; 1、工作原理 2、主要功能 3、应用场景 4、测量方法 5、总结 2.2. 激光束质量分析仪&#xff1a; 1、概述 2、主要功能和特点 3、工作原理 4、常见品牌和型号 5、应用领域 6、总结 2.3 光…

力扣-2529. 正整数和负整数的最大计数

文章目录 力扣题目代码工程 力扣题目 给你一个按 非递减顺序 排列的数组 nums &#xff0c;返回正整数数目和负整数数目中的最大值。 换句话讲&#xff0c;如果 nums 中正整数的数目是 pos &#xff0c;而负整数的数目是 neg &#xff0c;返回 pos 和 neg二者中的最大值。 注…

机器人运动范围检测 c++

地上有一个m行n列的方格&#xff0c;一个机器人从坐标&#xff08;0&#xff0c;0&#xff09;的格子开始移动&#xff0c;它每次可以向上下左右移动一个格子&#xff0c;但不能进入行坐标和列坐标的位数之和大于k的格子&#xff0c;请问机器人能够到达多少个格子 #include &l…