【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.pswp.cn/web/38367.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/38367.shtml
英文地址,請注明出處:http://en.pswp.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…