<html> <head> <meta charset="UTF-8"> <title>分页测试</title> <style type="text/css"> span { width: 20px; height: 20px; border: 1px solid #ccc; border-radius: 2px; display: block; float: left; margin-left: 5px; cursor: pointer; text-align: center; line-height: 20px; } .result { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } </style> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('.page-btn').on('click', function() { var _html = ''; var _currentNum = parseInt($('#currentNum').val()); var _countNum = parseInt($('#countNum').val()); var _firstNum = _currentNum - 2; var _lastNum = _currentNum + 2; if (_countNum <= 6) { _firstNum = 1; _lastNum = _countNum; } if (_firstNum < 1) { _lastNum = _lastNum + (1 - _firstNum); _firstNum = 1; } if (_lastNum > _countNum) { _firstNum = _firstNum - (_lastNum - _countNum); _lastNum = _countNum; } _html += '<span class="befor-page"><</span>'; if (_firstNum !== 1) { _html += '<span>1</span>'; } if (_firstNum - 1 > 1) { _html += '<span>…</span>'; } for (var i = _firstNum; i <= _lastNum; i++) { if (i === _currentNum) { _html += '<span style="color:red;">' + i + '</span>' } else { _html += '<span>' + i + '</span>' } } if (_countNum - _lastNum > 1) { _html += '<span>…</span>'; } if (_lastNum !== _countNum) { _html += '<span>' + _countNum + '</span>'; } _html += '<span class="after-page">></span>'; $('.result').html(_html); }); $(document).delegate('.result>span', 'click', function() { var _this = this; var _currentNum = parseInt($('#currentNum').val()); var _countNum = parseInt($('#countNum').val()); var _activeNum = parseInt($(_this).html()); if ($(_this).hasClass('befor-page')) { _currentNum -= 1; } else if ($(_this).hasClass('after-page')) { _currentNum += 1; } else if (!_activeNum) { return; } else { _currentNum = _activeNum; } if (_currentNum < 1) { _currentNum = 1; } if (_currentNum > _countNum) { _currentNum = _countNum; } $('#currentNum').val(_currentNum); $('.page-btn').click(); }); }); </script> </head> <body> <label for="currentNum">当前页：</label> <input type="text" id="currentNum" value="7"> <label for="countNum">总页数：</label> <input type="text" id="countNum" value="70"> <input class="page-btn" type="button" value="分页结果"> <div class="result"></div> </body> </html>