javascript实现简单的分页特效

网页分页导航条的设计

设计网页时，为了优化用户体验，我们经常采用分页显示内容的方式。这里，我们来构建一个生动且吸引人的分页导航条。当用户在浏览网页时，可以通过这个导航条快速跳转到想要查看的页面。

我们假设有一个总页数（tp）、当前页数（cp）、跳转地址（url）以及第一页和一页之间显示的页码数量（pn）。基于这些参数，我们可以构建出一个分页导航条。

下面是一个使用JavaScript和HTML构建的分页导航条函数：

```javascript

function pageBar(tp, cp, url, pn) {

var str = '

'; // 开始构建导航条

// 如果总页数大于1且当前页数大于1，显示上一页链接

if (tp > 1 && cp > 1) {

str += '

• 上一页
';

} else {

str += '

• 上一页
';

}

// 处理第一页的显示

if (cp == 1) {

str += '

• 1
';

} else {

str += '

• 1
';

}

// 当总页数大于2时，计算并显示中间的页码

if (tp > 2) {

var pnh = Math.floor(pn / 2); // 计算页码数量的一半

var s = cp - pnh; // 开始页码的计算

var e = cp + pnh; // 结束页码的计算

// 调整开始和结束的页码，确保它们在一定范围内

if (s <= 1) s = 2;

if (e >= tp) e = tp - 1;

// 根据计算的结果，动态生成页码链接

if (s < (1 + pnh)) {

if (tp > (pn + 2)) {

e = s + (pn - 1);

if (e >= tp) e = tp - 1;

} else {