【腾讯云】云产品限时秒杀，爆款1核2G云服务器，首年99元

简单分页效果 

<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>

 

posted @ 2018-01-19 13:44  happenzh  阅读(136)  评论(0)    收藏  举报