静态代码分页

最新推荐文章于 2022-01-18 10:35:28 发布
最新推荐文章于 2022-01-18 10:35:28 发布
阅读量891 收藏
点赞数
分类专栏： javascript 文章标签： javascript 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-Type" content="text/html;charset=gb2312"/>
<title>网页特效 静态代码的分页效果 站长特效网欢迎您。</title>
<style type="text/css">
tr {
	display: none
}
</style>
</head>
<body>

	<table id="www_zzjs_net">
		<tr>
			<td>站长特效01页，打造国内最帅的网页特效站！</td>
		</tr>
		<tr>
			<td>站长特效02页，打造国内最帅的网页特效站！</td>
		</tr>
		<tr>
			<td>站长特效03页，打造国内最帅的网页特效站！</td>
		</tr>
		<tr>
			<td>站长特效04页，打造国内最帅的网页特效站！</td>
		</tr>
		<tr>
			<td>站长特效05页，打造国内最帅的网页特效站！</td>
		</tr>
		<tr>
			<td>站长特效06页，打造国内最帅的网页特效站！</td>
		</tr>
		<tr>
			<td>站长特效07页，打造国内最帅的网页特效站！</td>
		</tr>
		<tr>
			<td>站长特效08页，打造国内最帅的网页特效站！</td>
		</tr>
		<tr>
			<td>站长特效09页，打造国内最帅的网页特效站！</td>
		</tr>
		<tr>
			<td>站长特效10页，打造国内最帅的网页特效站！</td>
		</tr>
		<tr>
			<td>站长特效11页，打造国内最帅的网页特效站！</td>
		</tr>
		<tr>
			<td>站长特效12页，打造国内最帅的网页特效站！</td>
		</tr>
		<tr>
			<td>站长特效13页，打造国内最帅的网页特效站！</td>
		</tr>
		<tr>
			<td>站长特效14页，打造国内最帅的网页特效站！</td>
		</tr>
		<tr>
			<td>站长特效15页，打造国内最帅的网页特效站！</td>
		</tr>
		<tr>
			<td>站长特效16页，打造国内最帅的网页特效站！</td>
		</tr>
		<tr>
			<td>站长特效17页，打造国内最帅的网页特效站！</td>
		</tr>
		<tr>
			<td>站长特效18页，打造国内最帅的网页特效站！</td>
		</tr>
		<tr>
			<td>站长特效19页，打造国内最帅的网页特效站！</td>
		</tr>
		<tr>
			<td>站长特效20页，打造国内最帅的网页特效站！</td>
		</tr>
	</table>
	<div id="changpage"></div>
	<script language="javascript">
		var obj, j;
		var page = 0;
		var nowPage = 0;//当前页
		var listNum = 3;//每页显示<ul>数
		var PagesLen;//总页数
		var PageNum = 4;//分页链接接数(5个)
		onload = function() {
			obj = document.getElementById("www_zzjs_net").getElementsByTagName("tr");
			j = obj.length
			PagesLen = Math.ceil(j / listNum);
			upPage(0)
		}
		function upPage(p) {
			nowPage = p
			//内容变换
			for ( var i = 0; i < j; i++) {
				obj[i].style.display = "none"
			}
			for ( var i = p * listNum; i < (p + 1) * listNum; i++) {
				if (obj[i])
					obj[i].style.display = "block"
			}
			//分页链接变换
			strS = '<a href="###" οnclick="upPage(0)">首页</a>  '
			/* var PageNum_2 = PageNum % 2 == 0 ? Math.ceil(PageNum / 2) + 1
					: Math.ceil(PageNum / 2)  
			var PageNum_3 = PageNum % 2 == 0 ? Math.ceil(PageNum / 2) : Math
					.ceil(PageNum / 2) + 1 */
			var PageNum_2 = 2;
			var PageNum_3 = 3;
					
					
			var strC = "", startPage, endPage;
			if (PageNum >= PagesLen) {
				startPage = 0;
				endPage = PagesLen - 1
			} else if (nowPage < PageNum_2) {
				startPage = 0;
				endPage = PagesLen - 1 > PageNum ? PageNum : PagesLen - 1
			}//首页
			else {
				startPage = nowPage + PageNum_3 >= PagesLen ? PagesLen
						- PageNum - 1 : nowPage - PageNum_2 + 1;
				var t = startPage + PageNum;
				endPage = t > PagesLen ? PagesLen - 1 : t
			}
			for ( var i = startPage; i <= endPage; i++) {
				if (i == nowPage)
					strC += '<a href="###" style="color:red;font-weight:700;" οnclick="upPage('
							+ i + ')">' + (i + 1) + '</a> '
				else
					strC += '<a href="###" οnclick="upPage(' + i + ')">'
							+ (i + 1) + '</a> '
			}
			
			
			
			strE = ' <a href="###" οnclick="upPage(' + (PagesLen - 1)
					+ ')">尾页</a>  '
			strE2 = nowPage + 1 + "/" + PagesLen + "页" + "  共" + j + "条"
			document.getElementById("changpage").innerHTML = strS + strC + strE
					+ strE2
		}
	</script>
</body>
</html>

码农wind
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
几种静态页面生成的代码，包括带内容分页的生成静态
佛缘的技术专栏
06-24 2605
<br />  #region 直接读取页面生成静态 /// <summary> /// 直接读取页面生成静态 /// </summary> /// <param name="Url">需要生成静态的页面</param> /// <param name="htmlPath">保存静态页面的地址</param> private void toHtmlPath(string Url, str
layui实现动态和静态分页
08-27
layui实现动态和静态分页 layui是一个流行的前端框架，它提供了许多实用的功能模块，今天我们来学习一下layui实现动态和静态分页的详细方法。 首先，我们需要了解一下layui的基本使用方法。layui提供了一个非常...
静态分页代码分页分页分页
08-06
html静态代码所写的分页 纯分页代码 源码易懂
静态代码的分页效果
u011425213的专栏
07-22 662
网页特效 静态代码的分页效果 特效网欢迎您。 tr{display:none} 特效01页，打造国内最帅的网页特效站！ 特效02页，打造国内最帅的网页特效站！ 特效03页，打造国内最帅的网页特效站！ 特效04页，打造国内最帅的网页特效站！ 特效05页，打造国内最帅的网页特效站！ 特效06页，打造国内最帅的网页特效站！ 特效07页，打造国内最帅的网页特效站！ 特
jS静态分页代码
01侠 caijianwen.com
01-10 565
doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312"> head> title>JS静态分页程序t
js 静态页 html页面 分页
03-22
实现html静态页面分页，ul li的分页功能，实现首页，尾页，共几页，共几条，123的详细分页 的功能
Javascript静态分页(多个资料，静态自动分页)
10-30
本文将基于提供的示例代码，深入探讨JavaScript静态分页的基本原理及其具体实现方法。 #### 二、静态分页概述 静态分页是指在前端不通过与服务器交互的情况下，对已有的数据进行分页显示的一种方式。这种方式通常...
asp+ajax实现静态页面分页的代码
10-30
如描述中的HTML代码所示，设置一个容器`#content`来展示分页内容，以及分页导航链接。CSS样式用于美化页面布局，如居中、字体、边框等。 2. **AJAX函数**： `createAjax()`函数是创建XMLHttpRequest对象的通用...
共享生成静态页面并分页源码
06-07 441
using System;using System.Data;using System.Configuration;using System.Collections;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.We
laypage静态数据分页组件的调用实战代码
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
01-18 365
引入layui.js封装库 <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8"/> <!--JS核心库--> <script src="layui/layui.js"></script> <link rel="stylesheet" type="text/css.
html前台分页,静态分页,使用及其简单,支持多个列表
05-24
html前台分页,静态分页,使用及其简单,支持多个列表
html无刷新分页代码,javascript 新闻标题静态分页代码 (无刷新)_javascript技巧
weixin_39977776的博客
06-07 112
一个模板，从数据库取n条记录，生成静态。做单页面的静态化,索引页面是用JS对数组进行组合的。因为记录只是一个标题，一个链接，字节数不会太大，那么用js去用这个大数组进行分页，貌似不错,很节约带宽!还是很棒的，简单，实用，值得推荐！JS代码：function title_array(title, link_add, store_time) {this.title = title;this.l...
静态网页分页
xueshanfeitian的博客
12-12 1382
以前，总是不明白静态网页为什么需要分写，但是如果是一个纯静态的html项目，如果网页内容过多，网页的可读性会变差，所以需要对网页进行分页，对网页分页需要在script标签中写入js代码，写这篇博文时，我参考了网上一位小姐姐的播客，下面奉上小姐姐播客地址：[添加链接描述](https://www.cnblogs.com/websmile/p/8310014.html) 静态网页分页思想其实与传统...
静态页分页功能js代码
php菜鸟技术天地
06-02 3570
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> <meta http-equiv="content-Type" content="tex
js实现静态分页
tangpeng527的博客
07-01 5677
不喜欢说废话，我把代码贴出来，自己去试试，不明白的地方可以留言哈~ html: [html] view plain copy print? script src="jquery.min-2.0.0.js" type="text/javascript">script>    [html] view plain copy print?
一个简单的静态的分页界面
To be a better man！
02-28 2534
话不多说，先上个效果图： 接下来是代码：（利用边框属性做的，相信你们看完之后一定会理解的） 分页 .page a{ border: 1px solid #ff9600; padding: 5px 5px; text-decoration: none;
静态化网站的分页对比
上帝狼
08-07 1633
曾经看过动易CMS的代码，曾经在官方论坛上也讨论过分页算法的问题。主要的瓶颈在于，如果一个分类页数过多，那么每更新一个文件，需要生成 count/pagesize 个静态页面，这样再算上分发的话，消耗了大量的cpu，io，带宽。因此门户级的网站，设计一个好的分页算法或者说新闻组织结构是非常必要的。这里考虑的是全静态网站，并且使用分发形式更新的，也就是在前端只有html静态文件。首页，板块首页，
element ui 静态数据分页
最新发布
08-21
要实现Element UI的静态数据分页，你可以按照以下步骤操作： 1. 创建一个包含所有数据的数组，这将作为你的静态数据源。 2. 在页面中使用`<el-table>`组件展示数据，并设置`data`属性为你的数据数组。 3. 使用`<el-pagination>`组件创建分页器。设置`total`属性为数据数组的长度，表示总条目数。 4. 在分页器中绑定一个变量，例如`currentPage`，表示当前页数。 5. 使用计算属性来实现分页功能。根据`currentPage`和每页显示的条目数，使用`Array.slice()`方法从数据数组中截取对应的数据，并将截取后的数据作为表格的数据源。 6. 当用户点击分页器中的页码时，更新`currentPage`的值，从而触发计算属性重新计算并更新表格数据。 以下是一个简单示例代码： ```vue <template> <div> <el-table :data="paginatedData"> <!-- 表格列定义 --> </el-table> <el-pagination @current-change="handlePageChange" :current-page="currentPage" :page-size="pageSize" :total="data.length" ></el-pagination> </div> </template> <script> export default { data() { return { data: [], // 所有数据 currentPage: 1, // 当前页数 pageSize: 10, // 每页显示条目数 }; }, computed: { paginatedData() { const startIndex = (this.currentPage - 1) * this.pageSize; const endIndex = startIndex + this.pageSize; return this.data.slice(startIndex, endIndex); }, }, methods: { handlePageChange(page) { this.currentPage = page; }, }, }; </script> ``` 请根据你的具体业务需求修改和完善上述代码。希望能对你有所帮助！如有其他问题，请继续提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值