jsp文件：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'page.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<style type="text/css">
#frameContent{
width:500px; /*调整显示区的宽*/
height:200px; /*调整显示区的高*/
font-size:14px;
line-height:20px;
border:1px solid #000000;
overflow-pageINdex:hidden;
overflow-y:hidden;
word-break:break-all;
}
a{
font-size:12px;
color:#000000;
text-decoration:underline;
}
a:hover{
font-size:12px;
color:#CC0000;
text-decoration:underline;
}
</style>
</head>
<body>
<div id="frameContent">
<p>北京奥运会颁奖礼仪服装共十六款。其中男装一款作为升旗手制服。女装十五款分为五个系列，每一系列分别按照嘉宾引导员、运动员引导员和托盘员的不同职能设计了三个不同款式。在奥运会的302场和残奥会的472场颁奖仪式上，这五个系列的礼服将分别出现在不同的场馆及比赛中。</p>
<p> "青花瓷"系列使用在国家游泳中心水立方、顺义水上公园和青岛等所有水上项目的颁奖仪式中。 </p>
<table cellspacing="0" cellpadding="0" align="left" border="0">
<tbody>
<tr>
<td valign="top"></td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
</table>
<p>
设计灵感取自世界闻名的中国青花瓷器。中国传统乱针绣的运用形象逼真地再现了青花瓷的晕染效果。鱼尾裙的廓形设计凸显了中国女性的柔美曲线。
</p>
<p> 宝蓝系列使用在体操、室内球类比赛和击剑等项目的颁奖现场。服装采用温润典雅的宝蓝色作为礼服主色，腰间饰有采用传统盘金绣制作的腰封，图案选用最具中国传统文化审美意趣和美好愿望的吉祥纹样——江山海牙纹、牡丹花纹，凸显了鲜明的中国特色和民族风格。同时也向全世界人民展示了中国最高超的刺绣工艺。中式的立领配以西式的肩部设计尽现中国女性落落大方的高贵气质。</p>
<p> 国槐绿系列丝缎礼服使用在自行车、射击、现代五项等项目的颁奖仪式上。礼服寓意蓬勃朝气的生命和郁郁葱葱的环境，体现了与自然和谐发展的美好愿望及坚守"绿色奥运"的决心。立体银线绣制的吉祥牡丹和契合女性柔美曲线的卷曲花纹，更显身段的婀娜多姿和东方女性的恬静气质。</p>
<p> "玉脂白"系列将出现在国家体育场、所有的室外球类比赛以及香港马术比赛中。它巧妙地呼应了奥运奖牌金镶玉的理念，彩绣腰封和玉佩的设计，既是中国玉文化的完美再现又是对传统旗袍设计的一次创新。层次丰富的绿色与牙白色丝绸面料的质感完美搭配，更突出了中国女性内敛、含蓄的特质。</p>
<p> 粉红色系列主要出现在拳击、举重、摔跤等力量型比赛中，以传统盘金绣工艺制作的宝相花图案腰饰，分割出完美的人体比例。领部的设计突出了颈部的优美线条，同时以粉色的柔美来中和比赛的阳刚之气。</p>
<p> 升旗手服装与青花瓷礼服遥相呼应，在体现中国传统文化的同时又不失阳刚之气，将出现在所有的奥运会和残奥会比赛场馆中。</p>
<p> 所有的奥运礼服和升旗手制服都绣有"Beijing 2008"的字样。</p>
<p> "十分具有中国文化特色"是国际奥委会对这些服装的第一评价。2007年5月23日，由北京奥组委主办、中国服装设计师协会和北京市工业促进局协办的北京奥运会颁奖礼仪服装设计征集活动启动后，共收到有效作品305份，包括服装成衣137套、效果图168份。投稿作品中包括全国"十佳"设计师投稿127份，服装设计专业院校投稿80份。</p>
<p> 2007年8月2日—3日，经过初评和复评。由北京奥组委领导、中国艺术及服装设计界专家、国际奥委会形象景观专家及冠军运动员代表组成的评审小组共选出成衣作品30件，包括托盘员礼服8件、嘉宾引导员礼服7件、运动员引导员礼服10件、升旗手制服5件。2007年8月至2008年2月，北京奥组委组织专家召开了十余次方案修改研讨会。入围设计师在专家组的指导下多次修改方案、制作样衣。并先后于2007年11月8日和08年2月3日两次上报北京奥组委执委会审议。最终方案于2008年2月底通过国际奥委会审批。（张宇）</p>
<!-- ..STYLE1 {color: #000000;font-weight: bold;font-size: 14px;} ..STYLE4 {color: #000000} ..STYLE5 {color: #000000; font-weight: bold;} ..STYLE6 {color: #000000}-->
</div>
<P>
<div id="pages" style="font-size:12px;"></div>
<script language="javascript">
var obj = document.getElementById("frameContent"); //获取内容层
var pages = document.getElementById("pages"); //获取翻页层
var pgindex=1; //当前页
window.onload = function() //重写窗体加载的事件
{
var allpages = Math.ceil(parseInt(obj.scrollHeight)/parseInt(obj. offsetHeight));//获取页面数量
pages.innerHTML = "<b>共"+allpages+"页</b>"; //输出页面数量
for (var i=1;i<=allpages;i++){
pages.innerHTML += "<a href=\"javascript:showPage('"+i+"');\">第"+i+"页</a> ";
//循环输出第几页
}
pages.innerHTML += " <a href=\"javascript:gotopage('-1');\">上一页</a> <a href=\"javascript:gotopage('1');\">下一页</a>"
}
function gotopage(value){
try{
value=="-1"?showPage(pgindex-1):showPage(pgindex+1);
}catch(e){
}
}
function showPage(pageINdex)
{
obj.scrollTop=(pageINdex-1)*parseInt(obj.offsetHeight); //根据高度，输出指定的页
pgindex=pageINdex;
}
</script>
</body>
</html>
相关推荐
前端分页的基本原理是利用JavaScript来处理数据的切片和页面跳转。首先，我们需要获取所有数据，并根据每页显示的数量进行分割。然后，创建一个分页导航栏，通常包括上一页、下一页和页码按钮。当用户点击页码或导航...
总之，纯前端分页是Web开发中不可或缺的一部分，通过JavaScript、DOM操作和CSS，我们可以创建出高效、易用的分页解决方案。在给定的文件中，我们可以看到一个具体的实现案例，这对于学习和理解这一技术是非常有价值...
《jQuery前端分页显示特效代码详解》 在Web开发中，数据展示往往涉及到大量的记录，如果一次性加载所有数据，不仅会消耗大量系统资源，还可能导致页面加载速度变慢，用户体验下降。因此，分页技术应运而生，它能够...
本文将深入探讨“pagination”这一前端分页插件，它可以帮助开发者轻松实现具有CSS样式的分页功能。 分页插件是前端开发中的一个重要组件，它的主要作用是将大量数据分割成若干个较小的部分，每次只加载一部分数据...
**JavaScript在前端分页中的应用** `pagination.js`文件则是分页功能的核心逻辑代码，主要涉及以下方面： 1. **计算总页数**: 根据数据总数和每页显示的数据量，动态计算出总页数。 2. **事件绑定**: 为分页按钮...
【JavaScript前端分页效果实现详解】 在Web开发中，前端分页是常见的一种功能，用于在大量数据中分块展示，提升用户体验。本篇将详细讲解如何使用JavaScript实现前端分页效果，主要涉及HTML结构、CSS样式以及...
要实现jQuery的前端分页，我们需要以下几个主要步骤： 1. **数据准备**：确保所有数据已经加载到前端，并存储在一个数组或者JSON对象中。这可能涉及到使用Ajax请求从服务器获取数据，然后将其储存在JavaScript变量...
JavaScript 实现前端分页功能是网页开发中常见的一种需求，特别是在处理大量数据时，为了提高用户体验，需要将数据分批次加载。在这个例子中，我们看到一个简单的JavaScript分页功能的实现，它涉及到HTML、CSS和...
前端分页主要分为两种方式：纯前端分页和前后端联动分页。 1. 纯前端分页：所有数据一次性从后端获取，然后在前端进行分页处理。这种方式对后端压力较小，但当数据量过大时，会增加页面加载时间。 2. 前后端联动...
在这个场景中，我们讨论的是如何使用纯JavaScript实现前端分页，不依赖任何第三方库或插件。下面将详细解释实现这个功能的关键步骤和涉及的技术。 1. **HTML结构**： 分页组件通常包含“首页”、“上一页”、...
随着互联网技术的不断发展，分页插件层出不穷，而本文介绍的是一种封装良好的纯JavaScript前端分页插件——pagination。它不仅不依赖任何第三方库，而且拥有良好的扩展性，为开发者提供了便利。 ### JavaScript前端...
JavaScript脚本分页代码是网页开发中常见的功能，主要用于处理大量数据时的用户界面优化，使得用户能够逐页浏览信息，而不是一次性加载所有内容。在本文中，我们将深入探讨JavaScript如何实现这一功能，并提供相关...
以下是一个简单的JavaScript前端分页功能的实现方法。 首先，我们有一个模拟的数据集合`strs`，它包含了多个对象，每个对象表示一行数据。在实际应用中，这些数据通常会从服务器端获取。为了简化，我们将数据硬编码...
在网页开发中，前端分页是一种常见的用户界面设计，它能有效地管理大量数据，提高用户体验。本项目聚焦于使用jQuery库实现前端分页显示特效，让网页内容在多个页面间轻松切换，同时保持页面加载速度。jQuery是一个轻...
在网页开发中，前端分页是一个非常常见的功能，特别是在数据量较大的情况下，为了提高用户体验，通常会将数据分批次加载。jQuery作为一个强大的JavaScript库，提供了许多便利的API和插件来实现这一功能。本篇文章将...
在这个问题中，我们讨论的是如何在Vue应用中实现前端分页功能。前端分页意味着在客户端处理分页逻辑，而不是在服务器端。这通常适用于数据量较小或实时更新需求不高的场景。 首先，让我们分析给出的代码片段。这个...
综上所述，前端分页样式是一个多方面考虑的问题，涉及用户体验、性能优化以及代码可维护性等多个维度。开发者在设计分页样式时，需兼顾美观与实用，选择合适的实现方式，以提供最佳的用户体验。通过学习和实践，我们...
用javascript原生写的纯前端控制分页，一定是各位前端人的所爱，代码简洁，附有demo，一看就懂，你也可以自己在此基础上进行扩展～
例如，下面是一个简单的JavaScript分页代码片段： ```javascript let data = [/* your data array */]; let pageSize = 10; let currentPage = 1; function renderPage() { let startIndex = (currentPage - 1) * ...
本文将详细介绍一种优秀的前端JavaScript分页代码及其应用场景、实现原理和优化策略。 首先，我们要理解前端分页的基本需求。在网页上，当数据集过大时，我们不会一次性加载所有数据，而是分批加载，每批数据对应一...