@{
ViewBag.Title = "Index";
}
<style>
#div_content {
height: 500px;
width: 500px;
}
#div_list {
border: 1px solid;
margin-left: 10px;
margin-top: 10px;
height: 100px;
width: 100px;
float: left;
display: none;
}
</style>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script>
$(function () {
var str = "";
var arrColor = ["red", "green", "yellow"];
var page = 0;//当前页数
var divs;//所有div的个数
var pagesize = 0;//最大页数
var pagesDiv = document.getElementById("pages");//显示当前页数的div
var div_content = document.getElementById("div_content");
var divnums = 0;
$("#sure").click(function () {
//一点击所以都得初始化
div_content.innerHTML = "";
str = "";
page = 0;
divnums = $("#divnums").val();
//插入div
for (var i = 0; i < divnums; i++) {
str += "<div id='div_list'></div>"
}
$(div_content).append(str);
//背景颜色赋值
divs = div_content.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
divs[i].style.background = arrColor[i % 3];
}
//最大页数的计算
if (divs.length % 4 == 0) {
pagesize = divs.length / 4;
} else {
pagesize = Math.floor(divs.length / 4) + 1;
}
for (var i = 0; i < 4; i++) {
// divs[i].style.display = "block";
$(divs[i]).fadeIn("slow");
}
pagesDiv.innerHTML = ("第<font color='red'>" + (page + 1) + "</font>页");
});
$("#pre").click(function () {
for (var i = 0; i < divs.length; i++) {
divs[i].style.display = "none";
}
if (page - 1 >= 0)//若-1后还有页数
{
page--;
for (var i = page * 4; i < (page + 1) * 4; i++) {
$(divs[i]).fadeIn("slow");
}
}
else {//若无页数则返回最前页
page = pagesize - 1;
for (var i = page * 4; i < divs.length; i++)
$(divs[i]).fadeIn("slow");
}
pagesDiv.innerHTML = ("第<font color='red'>" + (page + 1) + "</font>页");
});
$("#next").click(function () {
for (var i = 0; i < divs.length; i++) {
divs[i].style.display = "none";
}
if (page + 1 < pagesize)//若加一还小于总页数,则还可以进行下一页
{
page++;
if ((page + 1) == pagesize)//若与最后一页相等
{
for (var i = page * 4; i < divs.length; i++) {
$(divs[i]).slideDown("slow");
}
}
else {
for (var i = page * 4; i < (page + 1) * 4; i++) {
$(divs[i]).slideDown("slow");
}
}
}
else {
page = 0;
for (var i = page * 4; i < (page + 1) * 4; i++) {
$(divs[i]).slideDown("slow");
}
}
pagesDiv.innerHTML = ("第<font color='red'>" + (page + 1) + "</font>页");
});
});
</script>
<h2>Index</h2>
<form method="post">
div个数: <input type="text" id="divnums" />
<input type="button" id="sure" value="确认" />
<input type="button" id="pre" value="上一页">
<input type="button" id="next" value="下一页">
<div id="pages"></div>
<div id="div_content"> </div>
</form>
JQuery上一页与下一页的实现
最新推荐文章于 2020-08-25 22:35:32 发布