首页 / HTML / 分享一个模拟静态网页分页的特效代码实例

分享一个模拟静态网页分页的特效代码实例

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了分享一个模拟静态网页分页的特效代码实例，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6078字，纯文字阅读大概需要9分钟。

内容图文

模拟静态分页的特效代码。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
* {
font-size:10.2pt;
font-family:tahoma;
line-height:150%;
}
.divContent
{
border:1px solid red;
background-color:#FFD2D3;
width:500px;
word-break:break-all;
margin:10px 0px 10px;
padding:10px;
}
</style>
</HEAD>
<BODY>
header
<div id="divPagenation"></div>
<div id="divContent"></div>
footer
<SCRIPT LANGUAGE="JavaScript">
<!--
s="<p>女老师竭力向孩子们证明，学习好功课的重要性。 </p><p>她说：“牛顿坐在树下，眼睛盯着树在思考，这时，有一个苹果落在他的头上，于是他发现了万有引力定律，孩子们，你们想想看，做一位伟大的科学家多么好，多么神气啊，要想做到这一点，就必须好好学习。” </p><p>“班上一个调皮鬼对此并不满意。他说：“兴许是这样，可是，假如他坐在学校里，埋头书本，那他就什么也发现不了啦。” </p><p>女老师竭力向孩子们证明，学习好功课的重要性。 </p><p>她说：“牛顿坐在树下，眼睛盯着树在思考，这时，有一个苹果落在他的头上，于是他发现了万有引力定律，孩子们，你们想想看，做一位伟大的科学家多么好，多么神气啊，要想做到这一点，就必须好好学习。” </p><p>“班上一个调皮鬼对此并不满意。他说：“兴许是这样，可是，假如他坐在学校里，埋头书本，那他就什么也发现不了啦。” </p><p>女老师竭力向孩子们证明，学习好功课的重要性。 </p><p>她说：“牛顿坐在树下，眼睛盯着树在思考，这时，有一个苹果落在他的头上，于是他发现了万有引力定律，孩子们，你们想想看，做一位伟大的科学家多么好，多么神气啊，要想做到这一点，就必须好好学习。” </p><p>“班上一个调皮鬼对此并不满意。他说：“兴许是这样，可是，假如他坐在学校里，埋头书本，那他就什么也发现不了啦。” </p><p>女老师竭力向孩子们证明，学习好功课的重要性。 </p><p>她说：“牛顿坐在树下，眼睛盯着树在思考，这时，有一个苹果落在他的头上，于是他发现了万有引力定律，孩子们，你们想想看，做一位伟大的科学家多么好，多么神气啊，要想做到这一点，就必须好好学习。” </p><p>“班上一个调皮鬼对此并不满意。他说：“兴许是这样，可是，假如他坐在学校里，埋头书本，那他就什么也发现不了啦。” </p><p>女老师竭力向孩子们证明，学习好功课的重要性。 </p><p>她说：“牛顿坐在树下，眼睛盯着树在思考，这时，有一个苹果落在他的头上，于是他发现了万有引力定律，孩子们，你们想想看，做一位伟大的科学家多么好，多么神气啊，要想做到这一点，就必须好好学习。” </p><p>“班上一个调皮鬼对此并不满意。他说：“兴许是这样，可是，假如他坐在学校里，埋头书本，那他就什么也发现不了啦。” </p>";
function DHTMLpagenation(content) { with (this)
{
// client static html file pagenation
this.content=content;
this.contentLength=content.length;
this.pageSizeCount;
this.perpageLength=100; //default perpage byte length.
this.currentPage=1;
//this.regularExp=/.+[\?\&]{1}page=(\d+)/;
this.regularExp=/\d+/;
this.divDisplayContent;
this.contentStyle=null;
this.strDisplayContent="";
this.divDisplayPagenation;
this.strDisplayPagenation="";
arguments.length==2?perpageLength=arguments[1]:'';
try {
divExecuteTime=document.createElement("DIV");
document.body.appendChild(divExecuteTime);
}
catch(e)
{
}
if(document.getElementById("divContent"))
{
divDisplayContent=document.getElementById("divContent");
}
else
{
try
{
divDisplayContent=document.createElement("DIV");
divDisplayContent.id="divContent";
document.body.appendChild(divDisplayContent);
}
catch(e)
{
return false;
}
}
if(document.getElementById("divPagenation"))
{
divDisplayPagenation=document.getElementById("divPagenation");
}
else
{
try
{
divDisplayPagenation=document.createElement("DIV");
divDisplayPagenation.id="divPagenation";
document.body.appendChild(divDisplayPagenation);
}
catch(e)
{
return false;
}
}
DHTMLpagenation.initialize();
return this;
}};
DHTMLpagenation.initialize=function() { with (this)
{
divDisplayContent.className=contentStyle!=null?contentStyle:"divContent";
if(contentLength<=perpageLength)
{
strDisplayContent=content;
divDisplayContent.innerHTML=strDisplayContent;
return null;
}
pageSizeCount=Math.ceil((contentLength/perpageLength));
DHTMLpagenation.goto(currentPage);
DHTMLpagenation.displayContent();
}};
DHTMLpagenation.displayPage=function() { with (this)
{
strDisplayPagenation="分页：";
if(currentPage&&currentPage!=1)
strDisplayPagenation+='<a href="javascript:void(0)" onclick="DHTMLpagenation.previous()">上一页</a>&nbsp;&nbsp;';
else
strDisplayPagenation+="上一页&nbsp;&nbsp;";
for(var i=1;i<=pageSizeCount;i++)
{
if(i!=currentPage)
strDisplayPagenation+='<a href="javascript:void(0)" onclick="DHTMLpagenation.goto('+i+');">'+i+'</a>&nbsp;&nbsp;';
else
strDisplayPagenation+=i+"&nbsp;&nbsp;";
}
if(currentPage&&currentPage!=pageSizeCount)
strDisplayPagenation+='<a href="javascript:void(0)" onclick="DHTMLpagenation.next()">下一页</a>&nbsp;&nbsp;';
else
strDisplayPagenation+="下一页&nbsp;&nbsp;";
strDisplayPagenation+="共 " + pageSizeCount + " 页，每页" + perpageLength + " 字符，调整字符数：<input type='text' value='"+perpageLength+"' id='ctlPerpageLength'><input type='button' value='确定' onclick='DHTMLpagenation.change(document.getElementById(\"ctlPerpageLength\").value);'>";
divDisplayPagenation.innerHTML=strDisplayPagenation;
}};
DHTMLpagenation.previous=function() { with(this)
{
DHTMLpagenation.goto(currentPage-1);
}};
DHTMLpagenation.next=function() { with(this)
{
DHTMLpagenation.goto(currentPage+1);
}};
DHTMLpagenation.goto=function(iCurrentPage) { with (this)
{
startime=new Date();
if(regularExp.test(iCurrentPage))
{
currentPage=iCurrentPage;
strDisplayContent=content.substr((currentPage-1)*perpageLength,perpageLength);
}
else
{
alert("page parameter error!");
}
DHTMLpagenation.displayPage();
DHTMLpagenation.displayContent();
}};
DHTMLpagenation.displayContent=function() { with (this)
{
divDisplayContent.innerHTML=strDisplayContent;
}};
DHTMLpagenation.change=function(iPerpageLength) { with(this)
{
if(regularExp.test(iPerpageLength))
{
DHTMLpagenation.perpageLength=iPerpageLength;
DHTMLpagenation.currentPage=1;
DHTMLpagenation.initialize();
}
else
{
alert("请输入数字");
}
}};
// method
// DHTMLpagenation(strContent,perpageLength)
DHTMLpagenation(s,100);
//-->
</SCRIPT>
</BODY>
</HTML>

以上就是分享一个模拟静态网页分页的特效代码实例的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的分享一个模拟静态网页分页的特效代码实例全部内容，希望文章能够帮你解决分享一个模拟静态网页分页的特效代码实例所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/393147.html

来源：【匿名】

【上一篇】浏览器解析模式:DOCTYPE声明问题用法详解【下一篇】PHP 和 HTML

更多 ►

【分享一个模拟静态网页分页的特效代码实例】教程文章相关的互联网学习教程文章

HTML5 Canvas锯齿图代码实例

效果图：提示：把代码复制到一个html文件中并保存，直接打开即可看到效果。实现代码：复制代码代码如下:<!doctype html><html lang="zh"><head><meta charset="gbk"><title>锯齿图</title><script type="text/javascript">window.addEventListener("load", eventWindowLoaded, false);function eventWindowLoaded(){var x,y;var theCanvas = document.getElementById("canvas");var context = theCanvas.getContext("2d");//Boxcon...

openDatabase数据库web前端缓存（代码实例）

本篇文章给大家带来的内容是关于openDatabase数据库web前端缓存（代码实例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。本次数据库缓存的api学习要求对数据库操作语句有点基础认知，如果不了解数据库语句的简单的增删查改的话，建议观看此篇博客的童鞋先去小小的了解一下数据库语句的增删改查，本文也只是对数据库表的增删改查的基本操作的实例演示，并没有做一些数据库表的关联操作，但满足大家对前端数据...

HTML学习之html列表介绍（代码实例）【图】

本篇文章就给大家带来HTML学习之html列表介绍，通过简单的代码示例来介绍。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。一，效果图。二，代码。<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>html 列表</title></head><body>  <h4>An Unordered list</h4> <ul> <li>Cofferr</li> <li>tea</li> <li>Mide</li> </ul> ...

关于htmlbig标签的作用和具体的用法详解(内有代码实例)【图】

本篇文章是关于html big标签的介绍，有关于html big标签的定义和作用的解释，还有与html big标签有关的标准属性和事件属性，最后讲解的就是html big标签的使用方法说明，还有实例解释，最后，小编想说，虽然html5里面已经不支持<big>标签了，但在html4里面html big标签还是挺好用的，好了，让我们一起来看看正文吧html big标签的定义和作用:<big> 标签呈现大号字体效果。使用 <big> 标签可以很容易地放大字体。这简直不能再简单了：...

html5audio标签怎么用？html5自动播放实现代码实例【图】

html5 audio标签怎么用？html5 audio标签自动播放和使用教程,下面开始我们的文章介绍，主要介绍了html5 audio标签的使用，还有关于html5 audio标签自动播放和暂停的教程详解html5 audio标签用法的定义：<audio> 标签定义声音，比如音乐或其他音频流。html5 audio标签实例一段简单的 HTML 5 音频：<audio src="someaudio.wav"> 您的浏览器不支持 audio 标签。 </audio>html5 audio标签的属性：来个html5 audio标签的使用实例教程htm...

php输出压缩HTML页面代码实例程序_PHP教程

压缩页面输入就是把所有没有用的字符转去掉，然后所有代码放到一起，这样对于seo是有帮助，但是对于代码可读性很差，我们经常会看到很多网站这样做了，如果要手动来把html中字符空格删除很麻烦，于是就有了php输出压缩HTML页面实例了。对于服务器输出的 HTML 代码，是否也可以进行压缩呢？下面就是一个对 HTML 进行压缩的函数：代码如下function wpjam_minify_html($html) { $search = array(/>[^S ]+/s, // 删除标签后面空格...

PHP将将XML映射为HTML的代码实例_PHP

以下范例将 XML 文档中的标记符直接映射成 HTML 标记符。在“映射数组”中不存在的元素将被忽略。当然，该范例将只对一个特定的 XML 文档有效。 $file = "data.xml";$map_array = array( "BOLD" => "B", "EMPHASIS" => "I", "LITERAL" => "TT");function startElement($parser, $name, $attrs) { global $map_array; if ($htmltag == $map_array[$name]) { print ""; }}function endElement($parser, $name)...

php用xpath解析html的代码实例讲解

实例1 $xml = simplexml_load_file(https://forums.eveonline.com); $names = $xml->xpath("html/body/p/p/form/p/p/p/p/p[*]/p/p/table//tr/td[@class=topicViews]"); foreach($names as $name) { echo $name . "<br/>"; }实例2 $url = http://www.baidu.com; $ch = curl_init(); curl_setopt($ch, CURLOPT_FILE, fopen(php://stdout, w)); curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE); curl_setopt($ch, CURLOPT_URL, $u...

JavaScript在HTML中的使用代码实例【图】

这篇文章主要介绍了在HTML中使用JavaScript实例代码,需要的朋友可以参考下<script>标签　　在HTML5中script主要有以下几个属性：async，defer，charset，src，type，async（可选）：　　　　关键词：异步脚本，外部文件，立即下载；　　　　当标签中包含这个属性时会立即下载脚本（外部文件），只对外部脚本文件有效，下载的同时可以进行页面的其他操作，下载完成后停止解析并执行，执行后继续进行解析，但不能保证执行顺序。　　 ...

javascript+bootstrap+html实现层级多选框全层全选和多选功能代码实例

想做一个先按层级排序并可以多选的功能，首先倾向于用多层标签式的，直接选定加在文本域里，接下来通过本文给大家介绍html+javascript+bootstrap实现层级多选框全层全选和多选功能，需要的朋友参考下想做一个先按层级排序并可以多选的功能，首先倾向于用多层标签式的，直接选定加在文本域里，查到这文，非常详细，如果大家需要做前面所说的功能，但是，考虑到如果要做一个选项数不确定、可能非常多，用标签会容易视觉疲劳，同...

HTML网页头部代码实例详解

知识点一：头部信息里设置网页的基底网址基底网址的实质是统一设置超级链接的属性，基底网址标签是</base>，它有两个属性，href和_target。href用于设置基底网址的路径，_target用于设置超级链接的打开方式。通过基底网址的添加，页面中所有的相对网站根目录地址可转换成绝对地址。当浏览器浏览页面时，通过<base>标记将相对网站跟目录地址附加在基底网址路径的后面，从而转化成绝对地址。我们首先创建一个base.htm，编写HTML代...

HTML代码实例：详细讲解超级链接【图】

超级链接是网站中使用比较频繁的HTML元素，因为网站的各种页面都是由超级链接串接而成，超级链接完成了页面之间的跳转。超级链接是浏览者和服务器的交互的主要手段，在后面的技术中会逐步深化学习。超级链接超级链接是网站中使用比较频繁的HTML元素，因为网站的各种页面都是由超级链接串接而成，超级链接完成了页面之间的跳转。超级链接是浏览者和服务器的交互的主要手段，在后面的技术中会逐步深化学习。— 注意：图片也可以...

HTML5canvas如何绘制圆形？（代码实例）【图】

canvas能用于绘制各种图形，那么如何使用HTML5 canvas绘制一个圆形呢？本篇文章就来给大家介绍关于HTML5 canvas绘制圆形的方法，下面我们来看具体的内容。我们来直接看示例代码如下<!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><meta charset="utf-8" /><script type="text/javascript">function draw() {var canvas = document.getElementById(SimpleCanv...

html5仿淘宝,京东实现红包雨效果（代码实例）【图】

本篇文章就给大家分享html5仿淘宝,京东实现红包雨效果的实例代码。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。本红包雨项目是基于HTML5的游戏框架Phaser写的,最终形成的是一个canvas,所以性能很好,但是必须要说的是这个框架比较大,压缩后也有700K左右,所以请慎用.代码地址: https://github.com/AmosXu/red-packet-rain1. 效果展示图片依次是倒计时页面,抢红包页面,拆红包页,红包展示页,这些页面都是...

web/html5调用摄像头实现二维码扫描效果（代码实例）【图】

本文给大家介绍如何用web/html5调用摄像头实现二维码扫描的效果，有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。利用html5（navigator.getUserMedia）调用摄像头抓拍图片媒体流，通过php调用java接口解析图片二维码，实现二维码解析，可结合自己的业务！不过目前支持的浏览器不多是个问题。html/js<!DOCTYPE html> <html><head><title>HTML5 code Reader</title><meta http-equiv="Content-Type" content="tex...

首页 / HTML / 分享一个模拟静态网页分页的特效代码实例

分享一个模拟静态网页分页的特效代码实例

内容导读

内容图文

内容总结

内容备注

内容手机端

【分享一个模拟静态网页分页的特效代码实例】教程文章相关的互联网学习教程文章

实例 - 相关标签

HTML - 技术教程分类

HTML - 最新教程

HTML - 最热教程