模拟分页效果

css部分：

    <style type="text/css">.main{width:800px;zoom:1;margin:0 auto;}.item{width:800px;overflow:hidden;}ul{padding:0;width:860px;zoom:1;}.clear{zoom:1;}.clear:after{content:"";display:block;height:0;clear:both;visibility:hidden;}ul li{list-style-type:none;float:left;background:#F69;font-size:60px;text-shadow:1px 1px 3px #555;width:380px;height:200px;margin:10px 40px 10px 0;line-height:200px;text-align:center;color:#fff;}.page_btn{padding-top:20px;}.page_btn a{cursor:pointer;padding:5px;border:solid 1px #ccc;font-size:12px;}.page_box{float:right;}.num{padding:0 10px;}</style>

html部分：

<div class="main"><div class="item"><ul class="clear"><li>1</li><li>2</li><li>3</li><li>4</li><li style="background: yellowgreen">5</li><li style="background: yellowgreen">6</li><li style="background: yellowgreen">7</li><li style="background: yellowgreen">8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li></ul></div><div class="page_btn clear"><span class="page_box"><a class="prev">上一页</a><span class="num"><span class="current_page">1</span><span style="padding:0 3px;">/</span><span class="total"></span></span><a class="next">下一页</a></span></div>
</div>

js部分：（此处需要引入jquery.js）

<script type="text/javascript">$(document).ready(function(){$("ul li:gt(0)").hide();//初始化，前面4条数据显示，其他的数据隐藏。var total_q=$("ul li").index()+1;//总数据var current_page=1;//每页显示的数据var current_num=1;//当前页数var total_page= Math.round(total_q/current_page);//总页数  var next=$(".next");//下一页var prev=$(".prev");//上一页
            $(".total").text(total_page);//显示总页数
            $(".current_page").text(current_num);//当前的页数//下一页
            $(".next").click(function(){if(current_num==28){return false;//如果大于总页数就禁用下一页
                }else{$(".current_page").text(++current_num);//点击下一页的时候当前页数的值就加1
                    $.each($('ul li'),function(index,item){var start = current_page* (current_num-1);//起始范围var end = current_page * current_num;//结束范围if(index >= start && index < end){//如果索引值是在start和end之间的元素就显示，否则就隐
                            $(this).show();}else {$(this).hide();}});}});//上一页方法
                $(".prev").click(function(){if(current_num==1){return false;}else{$(".current_page").text(--current_num);$.each($('ul li'),function(index,item){var start = current_page* (current_num-1);//起始范围var end = current_page * current_num;//结束范围if(index >= start && index < end){//如果索引值是在start和end之间的元素就显示，否则就隐藏
                            $(this).show();}else {$(this).hide();}});}})})</script>

 

转载于:https://www.cnblogs.com/shanhaihong/p/5691226.html

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

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

相关文章

XML基本概念及增删改查操作

XML基本概念及增删改查操作

一、概念及特征&#xff1a; 1. XML 指可扩展标记语言(Extensible Markup Language)&#xff0c;用户可以自己定义标签。XML 被设计用来传输和存储数据&#xff0c;而 HTML 用于格式化并显示数据&#xff0c;并且HTML不能自定义标签。 2. XML 文档形成一种树结构&#xff0c; X…
阅读更多...
mysql 时间类型 datetime,timestamp

mysql 时间类型 datetime,timestamp

2019独角兽企业重金招聘Python工程师标准>>> CURRENT_TIMESTAMP 的 timestamp 意思是 根据 mysql 的当前时间&#xff0c;使用mysql 的当前时间。 参考地址&#xff1a;http://blog.sina.com.cn/s/blog_67cc6e7d0100nrwk.html datetime 和 timestamp 都是保存时间格…
阅读更多...
生成jsp验证码的代码详解(servlet版)

生成jsp验证码的代码详解(servlet版)

package util; import java.util.*; import java.io.*; import java.awt.*; import java.awt.image.*; import javax.servlet.*; import javax.servlet.http.*; import com.sun.image.codec.jpeg.*; /** 生成验证码图片*/ public class ValidateCode exten…
阅读更多...
机器学习中的交叉验证（cross-validation）

机器学习中的交叉验证（cross-validation）

from:https://blog.csdn.net/lhx878619717/article/details/49079785 交叉验证&#xff08;Cross validation)&#xff0c;交叉验证用于防止模型过于复杂而引起的过拟合. 有时亦称循环估计&#xff0c; 是一种统计学上将数据样本切割成较小子集的实用方法。于是可以先在一个子…
阅读更多...
linux禁止ping

linux禁止ping

执行此命令 &#xff1a;echo 1 > /proc/sys/net/ipv4/icmp_echo_ignore_all 可以禁止ping一、如果没有iptables禁止pingecho 1 > /proc/sys/net/ipv4/icmp_echo_igore_all #开启echo 0 > /proc/sys/net/ipv4/icmp_echo_igore_all #关闭二、利用iptables规则禁pingi…
阅读更多...
python3字符串属性（二）

python3字符串属性（二）

1、S.isdecimal() -> bool Return True if there are only decimal characters in S, False otherwise. 字符串如果是十进制&#xff0c;返回True。 2、S.isdigit() -> bool Return True if all characters in S are digits and there is at least one character …
阅读更多...
使用libsvm中的svm_cross_validation函数进行交叉验证

使用libsvm中的svm_cross_validation函数进行交叉验证

from:https://blog.csdn.net/tao1107291820/article/details/51581322 在libsvm的使用中&#xff0c;为了得到更好的c、gama参数&#xff0c;可以通过多次使用libsvm中的svm_cross_validation函数进行参数寻优&#xff0c;下面是svm_cross_validation的一种使用方法&#xff1…
阅读更多...
JavaScript中eval()函数

JavaScript中eval()函数

eval调用时&#xff0c;实例为eval( "( javascript代码 )" )&#xff0c; eval() 函数可将字符串转换为代码执行&#xff0c;并返回一个或多个值。转载于:https://www.cnblogs.com/lxcmyf/p/5703640.html
阅读更多...
轻松谈话：谈话的力量

轻松谈话：谈话的力量

如何与她人搭话&#xff1f;&#xff1f; 第一&#xff1a;给别人一个好印象 1、环境&#xff1a;通过共同环境来激发兴趣&#xff0c;比如&#xff1a;在球场&#xff0c;你觉得谁会赢。 2、对方:多数人喜欢谈论自己。 3、自己&#xff1a;主动表明意图&#xff0c;要真诚。 第…
阅读更多...
函数的二义性与函数对象的传递问题（通过实现vector的to_string示例）

函数的二义性与函数对象的传递问题（通过实现vector的to_string示例）

许多时候&#xff0c;我们想要直接打印容器的内容&#xff0c;比如 std::vector<int> a { 1, 2, 3 }; 可以打印出[1, 2, 3]。 参考标准库&#xff0c;可以写出一个带有迭代器的to_string函数&#xff1a; template <typename Iter, typename Func> std::string to…
阅读更多...
libSVM介绍（二）

libSVM介绍（二）

from&#xff1a;https://blog.csdn.net/carson2005/article/details/6539192 鉴于libSVM中的readme文件有点长&#xff0c;而且&#xff0c;都是采用英文书写&#xff0c;这里&#xff0c;我把其中重要的内容提炼出来&#xff0c;并给出相应的例子来说明其用法&#xff0c;大家…
阅读更多...
四则运算题2

四则运算题2

本题新学知识点&#xff1a; itoa函数 char *itoa( int value, char *string,int radix);[1]原型说明&#xff1a;value&#xff1a;欲转换的数据。string&#xff1a;目标字符串的地址。radix&#xff1a;转换后的进制数&#xff0c;可以是10进制、16进制等。程序实例:#includ…
阅读更多...
c++调用Libsvm

c++调用Libsvm

libSVM中的readme中文版&#xff1a;http://blog.csdn.net/carson2005/article/details/6539192 LibSVM的package中的Readme文件中介绍了怎样具体的使用LibSvm&#xff0c;可以在Dos下以命令形式进行调用&#xff0c;也可以用程序包中提供的GUI程序Svm-toy进行图形化的操作。sv…
阅读更多...
STL -set

STL -set

转载自&#xff1a;http://blog.csdn.net/LYHVOYAGE/article/details/22989659 set集合容器实现了红黑树&#xff08;Red-Black Tree&#xff09;的平衡二叉检索树的的数据结构&#xff0c; 在插入元素时&#xff0c;它会自动调整二叉树的排列&#xff0c;把该元素放到适当的位…
阅读更多...
【机器学习实战之一】：C++实现K-近邻算法KNN

【机器学习实战之一】：C++实现K-近邻算法KNN

本文不对KNN算法做过多的理论上的解释&#xff0c;主要是针对问题&#xff0c;进行算法的设计和代码的注解。 KNN算法&#xff1a; 优点&#xff1a;精度高、对异常值不敏感、无数据输入假定。 缺点&#xff1a;计算复杂度高、空间复杂度高。 适用数据范围&#xff1a;数值…
阅读更多...
libsvm C++ 代码参数说明汇总

libsvm C++ 代码参数说明汇总

几个重要的数据结构 2.1 struct svm_problem {int l; // 记录样本的总数double *y; // 样本所属的标签(1, -1)struct svm_node **x; // 指向样本数据的二维数组(即一个矩阵&#xff0c;行数是样本数&#xff0c;列数是特征向量维度) }; 2.2 struct svm_node {int …
阅读更多...
javascript设计模式-继承

javascript设计模式-继承

javascript继承分为两种&#xff1a;类式继承&#xff08;原型链、extend函数&#xff09;、原型式继承&#xff08;对继承而来的成员的读和写的不对等性、clone函数&#xff09;。 类式继承-->prototype继承&#xff1a; 1 function Person(name){2 this.name …
阅读更多...
GIS基础软件及操作(二)

GIS基础软件及操作(二)

原文 GIS基础软件及操作(二) 练习二、管理地理空间数据库 1.利用ArcCatalog 管理地理空间数据库 2.在ArcMap中编辑属性数据 第1步 启动 ArcCatalog 打开一个地理数据库 当 ArcCatalog打开后&#xff0c;点击, 按钮&#xff08;连接到文件夹&#xff09;. 建立到包含练习数据的…
阅读更多...
libSVM分类小例C++

libSVM分类小例C++

from&#xff1a;http://www.doczj.com/list_31/ 使用libSVM求解分类问题的C小例 1.libSVM简介 训练模型的结构体 struct svm_problem//储存参加计算的所有样本 { int l; //记录样本总数 double *y; //指向样本类别的组数 //prob.y new double[prob.l]; struct svm_node …
阅读更多...
qunit 前端脚本测试用例

qunit 前端脚本测试用例

首先引用qunit 测试框架文件 <link rel"stylesheet" href"qunit-1.22.0.css"> <script src"qunit-1.22.0.js"></script> <div id"qunit"></div> <div id"qunit-fixture"></div>…
阅读更多...
最新文章

Copyright @ 2022~2023