JS实现当前页居中分页效果的方法

本文实例讲述了JS实现当前页居中分页效果的方法。分享给大家供大家参考。具体实现方法如下:

function show_page(cur_pc)
{
  var cp=cur_pc;  //curent page count
  var tp=this.p;  //total page count
  var sp=this.pc;  //show page count
  var bp;      //begin page count
  var ep;      //end page count
  if(sp%2==0) sp=sp+1;   //this process need an odd number
  var dp=Math.floor(sp/2); //each side count to show
  var dif=tp-sp;  //check weather it have enough page to make mid-show
  var f=cp-dp;   //to check weather it has enough page to make mid-show from the begin
  var g=tp-(cp+dp); //to check weather it has enough page to make mid-show from the end
  if(sp && dif>=0)
  {
    if(g>0)
    {
      if(f>0)
      {
        bp=f;
        ep=cp+dp;
      }
      else
      {
        bp=1;
        ep=2*dp+1;
      }
    }
    else
    {
      bp=tp-2*dp;
      ep=tp;
    }
  }
  else
  {
    bp=1;
    ep=tp;
  }
  var buf=[];
  for(var i=bp;i<=ep;i++)
  {
    if(i==cur_pc)
    {
      buf.push("<a href='javascript:;' class='current'>",i,"</a>");
    }
    else
    {
      buf.push("<a href='javascript:;' class='normal'>",i,"</a>");
    }
  }
  document.write(buf);
}

运行效果如下图所示:

希望本文所述对大家的javascript程序设计有所帮助。

时间: 2015-06-16

纯js分页代码(简洁实用)

复制代码 代码如下: //每页显示字数PageSize=5000;//分页模式flag=2;//1:根据字数自动分页 2:根据[NextPage]分页//默认页startpage = 1;//导航显示样式 0:常规 1:直接 3:下拉TopShowStyle = 1;DownShowStyle = 0; var currentSet,CutFlag,TotalByte,PageCount,key,tempText,tempPage; key=""; currentSet=0; var

js写的评论分页(还不错)

复制代码 代码如下: <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServer

JS+CSS实现的拖动分页效果实例

本文实例讲述了JS+CSS实现拖动分页效果的方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <title>拖动分页</title> <meta http-equiv=Content-Type content="text/html; charset=utf-8"> <style> body{ border:0px; margin:0px; overflow:hidden; backgrou

js前台分页显示后端JAVA数据响应

好久没有写过代码了,手有些痒了,正好底下小弟们某些功能的实现着实影响工程进度,便自己动手给写了一段. 功能:js前台分页显示 + 后台数据响应(JAVA Servlet即可) 框架:jquery1.8.7 此文目的:给那些刚入行软件开发,喜欢这也看看,那也看看,这儿copy一下,那儿copy一下初级小菜鸟们做一个表帅; 1 为程序者需认真踏实坐下来; 2 程序需要有投入才有收获; 3 有收获才有鼓舞,才有动力一步一步往下走! 下面上代码,具体会有小注释 1.web页面的逻辑处理(js代码写到页面

纯js写的分页表格数据为json串

什么也不说了,直接上代码: 复制代码 代码如下: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib prefix="s" uri="/struts-tags" %> <% String path = request.getContextPath(); String ba

js+css实现的简单易用兼容好的分页

效果:  html: 复制代码 代码如下: <div id="page"></div> 用法: 复制代码 代码如下: var total = 310; var pageNo = 1; var pageCount = 31;//共有多少页 var pageSize = 10; var actionName = "list.action"; var otherParam = "&name='www'&order='tim

js分页代码分享

复制代码 代码如下: <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script  type='text/javascript' src='jQuery.js'></script><style type

js对文章内容进行分页示例代码

Thinkphp中文章显示代码: 复制代码 代码如下: <div id="showContent">{$article.content|htmlspecialchars_decode}</div> <div id="articlePages"></div> js实现代码: 复制代码 代码如下: <script type="text/javascript"> var obj = docum

jsp分页显示完整实例

本文实例讲述了jsp分页显示的实现方法.分享给大家供大家参考. 具体实现方法如下: 复制代码 代码如下: <%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage="" %> <%@include file ="../inc/ChkPwd.jsp"%>

js脚本分页代码分享(7种样式)

本文跟大家分享了7种JS脚本分页样式,相信总有一款是适合你的哦 抓紧先上图给大家挑选一下------------------运行效果------------------- 其实小编挺喜欢最后一款的,亲,你呐? 为大家再分享实现JS脚本分页的代码,直接复制代码,运行即可,抓紧试试吧 <html> <head> <title>7种JS脚本分页代码</title> <style> body {font-size: 12px;} /* Pages Mai

js分页工具实例

本文实例讲述了js分页工具的用法.分享给大家供大家参考.具体实现方法如下: js代码部分: 复制代码 代码如下: /**   * 分页js   */  var Page;    (function(){          var Page = {version:"1.0",author:"liuxingmi"};          var showPage = 9;          Page.navigation = function(divId, totalRe

Jquery+Ajax+Json+存储过程实现高效分页

之前在做分页时,很多朋友都是用Jquery分页插件,之前我就用的jquery.paper,有需要的朋友可以联系我,接下来小编给大家分享用Jquery+Ajax+Json+存储过程实现高效分页. 实现此功能用分页存储过程,pagination,js样式,废话不多了,具体请看下面代码  分页存储过程:PAGINATION CREATE PROCEDURE [dbo].[PAGINATION] @FEILDS VARCHAR(),--要显示的字段 @PAGE_INDEX INT,--当前页码 @PAG

javascript分页代码实例分享(js分页)

调用: 复制代码 代码如下: var pageChange = function (index) {            var html = pager("divid", index, 5, 1000, pageChange, { showGoTo: false, showFirst: false });        } 实现: 复制代码 代码如下: pager = function (divPager, pageIndex, pageSize, totalCount, page

js获取url参数代码实例分享(JS操作URL)

代码很简单,主要一个思路是把url参数解析为js对象,再做增.删.改.查操作就很方便了~,这里做笔记. 复制代码 代码如下: var LG=(function(lg){    var objURL=function(url){        this.ourl=url||window.location.href;        this.href="";//?前面部分        this.params={};//url参数对象        this.jing="&quo

通过Java压缩JavaScript代码实例分享

通过移除空行和注释来压缩 JavaScript 代码 /** * This file is part of the Echo Web Application Framework (hereinafter \"Echo\"). * Copyright (C) 2002-2009 NextApp, Inc. * * Compresses a String containing JavaScript by removing comments and whitespace. */ public

JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享

要实现类似功能,用JS就可以,实现方法如下: 一.javascript函数实现:实例1: 复制代码 代码如下: //JavaScript函数:var minute = 1000 * 60;var hour = minute * 60;var day = hour * 24;var halfamonth = day * 15;var month = day * 30;function getDateDiff(dateTimeStamp){var now = new Date().getTime()

学习php分页代码实例

PHP分页有很多方法,今天我们就用一个小例子演示一下这个功能. 复制代码 代码如下: $result = "<div class=\"page-num\"><ul class=\"fn-clear\">"; // 上一页    if ($offset>0) {        $result .= "<li>            <a href=\"".$url.'of

.NET 纯分页代码实例

前台 复制代码 代码如下: <div class="mydiv"   style="width:100%;height:180px;background-color:#f0f7ff">             <div style="margin-left:10px;">                   <div style="background-color:#DAEBFF"><

JavaScript实现单例模式实例分享

传统单例模式 保证一个类仅有一个实例,并提供一个访问它的全局访问点. 实现单例核心思想 无非是用一个变量来标志当前是否已经为某个类创建过对象,如果是,则在下一次获取该类的实例时,直接返回之前创建的对象,接下来我们用JavaScript来强行实现这个思路,请看代码: var Singleton = function( name ){ this.name = name; }; Singleton.prototype.getName = function(){ alert ( this.name );

给WordPress的编辑后台添加提示框的代码实例分享

WordPress 3.5 新添加了一个提示框功能,可以创建一个提示框,然后指向任何元素,比如下边的例子: 本文就来教你怎么创建一个这样的提示框. 首先需要添加提示框的脚本,这样才能使用提示框的 JS 方法. //挂载提示框脚本 function Bing_admin_pointer_enqueue_scripts(){ wp_enqueue_style( 'wp-pointer' ); wp_enqueue_script( 'wp-pointer' ); } add_action( 'admi

Perl遍历目录和使用Linux命令分析日志的代码实例分享

实例代码: 复制代码 代码如下: #! /usr/bin/perl -w$path = '/root/Documents';  # 当前工作目录$dir = "$path/images"; # 要遍历的目录$log_file = "$path/access_201209.log"; # nginx日志0903~0907,  filesize: 5.4G$result_file = 'result.f';  # 放置结果的文件 if(!open $output, &q

c#.net 动态读取 走马灯代码实例分享

前台html及js脚本: [html] 复制代码 代码如下: <div>     <table border="0" cellpadding="0" cellspacing="0">         <tr>             <td bgcolor="#CC66FF"                  style="WIDTH: 990px; HEIGHT: 5px;