管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

仿豆瓣分页原型(Javascript版)

　　好久没发过帖子了~~。

　　因为工作需要，仿豆瓣式写了个分页的样式。

　　自我感觉，这样的分页前后兼顾，对于用户的体验是蛮好使的。

　　

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="gb2312" > 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=gb2312" /> 
    <meta name="author" content="Smiling Dolphin" /> 
    <meta name="keywords" content="design, css, cascading, style, sheets, xhtml, graphic design, w3c, web standards, visual, display, java, javascript, c++, php, jsp, asp, py, pl" /> 
    <meta name="description" content="my favorites language." /> 
    <meta name="robots" content="all" /> 
    <title>仿豆瓣分页原型（Javascript版）</title>

<style type="text/css" title="currentStyle" media="screen"> 
        /* Paginator */ 
        .paginator { 
            font: 14.8px normal Arial, Helvetica, sans-serif; 
            color: #666666; 
            margin-top: 10px; 
            margin-bottom: 5px; 
            line-height: 150%; 
            background-color: #EEFFEE; 
            text-align: center; 
        } 
        .paginator a, .thispage, .break { 
            padding: 2px 4px; 
        } 
        .paginator .prev { 
            margin-right: 20px; 
        } 
        .paginator .next { 
            margin-left: 20px; 
        } 
        .paginator .count { 
            margin-left: 20px; 
            font-size: 11px; 
        } 
    </style> 
</head> 
<body> 
<div id="pagebar" class="paginator"></div> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20language%3D%22javascript%22%20type%3D%22text%2Fjavascript%22%3E%20%0D%0Afunction%20QueryString(item)%7B%20%0D%0A%20%20%20%20var%20sValue%3Dlocation.search.match(new%20RegExp(%22%5B%5C%3F%5C%26%5D%22%2Bitem%2B%22%3D(%5B%5E%5C%26%5D*)(%5C%26%3F)%22%2C%22i%22))%20%0D%0A%20%20%20%20return%20sValue%3FsValue%5B1%5D%3AsValue%20%0D%0A%7D%20%0D%0Avar%20count%20%3D%20560%3B%20%0D%0Avar%20perpage%20%3D%2020%3B%20%0D%0Avar%20currentpage%20%3D%20QueryString(%22page%22)%3B%20%0D%0Aif%20(currentpage%3D%3Dnull)%7B%20%0D%0A%20%20%20%20currentpage%20%3D%201%3B%20%0D%0A%7Delse%7B%20%0D%0A%20%20%20%20currentpage%20%3D%20parseInt(currentpage)%3B%20%0D%0A%7D%20%0D%0Avar%20pagecount%20%3D%20Math.floor(count%2Fperpage)%3B%20%0D%0Avar%20pagestr%20%3D%20%22%22%3B%20%0D%0A%0D%0Avar%20breakpage%20%3D%209%3B%20%0D%0Avar%20currentposition%20%3D%204%3B%20%0D%0Avar%20breakspace%20%3D%202%3B%20%0D%0Avar%20maxspace%20%3D%204%3B%20%0D%0Avar%20prevnum%20%3D%20currentpage-currentposition%3B%20%0D%0Avar%20nextnum%20%3D%20currentpage%2Bcurrentposition%3B%20%0D%0Aif(prevnum%3C1)%20prevnum%20%3D%201%3B%20%0D%0Aif(nextnum%3Epagecount)%20nextnum%20%3D%20pagecount%3B%20%0D%0A%0D%0Apagestr%20%2B%3D%20(currentpage%3D%3D1)%3F'%3Cspan%20class%3D%22prev%22%3E%26lt%3B%20%26%2321069%3B%26%2339029%3B%3C%2Fspan%3E'%3A'%3Cspan%20class%3D%22prev%22%3E%26lt%3B%20%3Ca%20href%3D%22%3Fpage%3D'%2B(currentpage-1)%2B'%22%3E%26%2321069%3B%26%2339029%3B%3C%2Fa%3E%3C%2Fspan%3E'%3B%20%0D%0Aif(prevnum-breakspace%3Emaxspace)%7B%20%0D%0A%20%20%20%20for(i%3D1%3Bi%3C%3Dbreakspace%3Bi%2B%2B)%20%0D%0A%20%20%20%20%20%20%20%20pagestr%20%2B%3D%20'%3Ca%20href%3D%22%3Fpage%3D'%2Bi%2B'%22%3E'%2Bi%2B'%3C%2Fa%3E'%3B%20%0D%0A%20%20%20%20pagestr%20%2B%3D%20'%3Cspan%20class%3D%22break%22%3E...%3C%2Fspan%3E'%3B%20%0D%0A%20%20%20%20for(i%3Dpagecount-breakpage%2B1%3Bi%3Cprevnum%3Bi%2B%2B)%20%0D%0A%20%20%20%20%20%20%20%20pagestr%20%2B%3D%20'%3Ca%20href%3D%22%3Fpage%3D'%2Bi%2B'%22%3E'%2Bi%2B'%3C%2Fa%3E'%3B%20%0D%0A%7Delse%7B%20%0D%0A%20%20%20%20for(i%3D1%3Bi%3Cprevnum%3Bi%2B%2B)%20%0D%0A%20%20%20%20%20%20%20%20pagestr%20%2B%3D%20'%3Ca%20href%3D%22%3Fpage%3D'%2Bi%2B'%22%3E'%2Bi%2B'%3C%2Fa%3E'%3B%20%0D%0A%7D%20%0D%0Afor(i%3Dprevnum%3Bi%3C%3Dnextnum%3Bi%2B%2B)%7B%20%0D%0A%20%20%20%20pagestr%20%2B%3D%20(currentpage%3D%3Di)%3F'%3Cspan%20class%3D%22thispage%22%3E'%2Bi%2B'%3C%2Fspan%3E'%3A'%3Ca%20href%3D%22%3Fpage%3D'%2Bi%2B'%22%3E'%2Bi%2B'%3C%2Fa%3E'%3B%20%0D%0A%7D%20%0D%0Aif(pagecount-breakspace-nextnum%2B1%3Emaxspace)%7B%20%0D%0A%20%20%20%20for(i%3Dnextnum%2B1%3Bi%3C%3Dbreakpage%3Bi%2B%2B)%20%0D%0A%20%20%20%20%20%20%20%20pagestr%20%2B%3D%20'%3Ca%20href%3D%22%3Fpage%3D'%2Bi%2B'%22%3E'%2Bi%2B'%3C%2Fa%3E'%3B%20%0D%0A%20%20%20%20pagestr%20%2B%3D%20'%3Cspan%20class%3D%22break%22%3E...%3C%2Fspan%3E'%3B%20%0D%0A%20%20%20%20for(i%3Dpagecount-breakspace%2B1%3Bi%3C%3Dpagecount%3Bi%2B%2B)%20%0D%0A%20%20%20%20%20%20%20%20pagestr%20%2B%3D%20'%3Ca%20href%3D%22%3Fpage%3D'%2Bi%2B'%22%3E'%2Bi%2B'%3C%2Fa%3E'%3B%20%0D%0A%7Delse%7B%20%0D%0A%20%20%20%20for(i%3Dnextnum%2B1%3Bi%3C%3Dpagecount%3Bi%2B%2B)%20%0D%0A%20%20%20%20%20%20%20%20pagestr%20%2B%3D%20'%3Ca%20href%3D%22%3Fpage%3D'%2Bi%2B'%22%3E'%2Bi%2B'%3C%2Fa%3E'%3B%20%0D%0A%7D%20%0D%0Apagestr%20%2B%3D%20(currentpage%3D%3Dpagecount)%3F'%3Cspan%20class%3D%22next%22%3E%26%2321518%3B%26%2339029%3B%20%26gt%3B%3C%2Fspan%3E'%3A'%3Cspan%20class%3D%22next%22%3E%3Ca%20href%3D%22%3Fpage%3D'%2B(currentpage%2B1)%2B'%22%3E%26%2321518%3B%26%2339029%3B%3C%2Fa%3E%20%26gt%3B%3C%2Fspan%3E'%3B%20%0D%0Adocument.getElementById(%22pagebar%22).innerHTML%20%3D%20pagestr%3B%20%0D%0A%3C%2Fscript%3E"> 
</body> 
</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程