动态实现＜li＞标签

最新推荐文章于 2022-11-19 22:24:25 发布

瓜月半

最新推荐文章于 2022-11-19 22:24:25 发布

阅读量777

点赞数

文章标签： html javascript 前端

本文链接：https://blog.csdn.net/py1233210/article/details/126218231

版权

给定两个值，(itemNum, pageTotal) 分别表示列表个数与总页数，要求在页面中根据pageTotal动态的渲染出itemNum个<li>标签，例如给定(10,3),则在页面中需要显示三页列表，第一、二页各4个<li> 标签，第三页两个<li>标签。

注意事项

1. 根据itemNum和pageTotal两个值计算出每页最多能放多少个<li> 标签，这里可以使用 Math.ceil() 函数。

2. 给定两个按钮——下一页、上一页，进行控制翻页，当页面值为1时，上一页按钮点击事件失效，当页面值为pageTotal时，下一页按钮点击事件失效。

3.当达到最后一页的时候，需要判断最后一页的个数为多少，可以使用 itemNum - 前面几页的总的<li> 条数。

具体实现

// html 部分 以及 css 样式部分
<body>
  <ul id="ul"></ul>
  <div class="container">
    <button id="left">下一页</button>
    <div id="num"></div>
    <button id="right">上一页</button >
  </div>
</body>

<style>
    .container {
      display: flex;
      flex-direction: row;
    }
</style>

<script>
  var ul = document.getElementById('ul')
  var left = document.getElementById('left')
  var num = document.getElementById('num')
  var right = document.getElementById('right')
  var itemNum = 10
  var pageTotal = 3
  var pageNum = 1
  var pageItem = Math.ceil(itemNum / pageTotal)
  function createLi(pageItem, pageNum) {
    var li = ''
    for (let i = 1; i <= pageItem; i++) {
      li += `<li>` + i + `</li>`
    }
    ul.innerHTML = li  // 创建 li 标签
    num.innerText = pageNum
  }
  createLi(pageItem, pageNum)
  left.addEventListener('click', function () {
    if (pageNum < pageTotal) {
      pageNum++
      if (pageNum === pageTotal) {
        pageItem = itemNum - (pageNum - 1) * pageItem  // 剩余 item
      }
      createLi(pageItem, pageNum)
    }
  })
  right.addEventListener('click', function () {
    if (pageNum > 1) {
      pageNum--
      pageItem = Math.ceil(itemNum / pageTotal)
    }
    createLi(pageItem, pageNum)
  })
</script>

具体的样式就不详细写了。

瓜月半

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
动态实现＜li＞标签

给定两个值，(itemNum, pageTotal) 分别表示列表个数与总页数，要求在页面中根据pageTotal动态的渲染出itemNum个标签，例如给定(10,3),则在页面中需要显示三页列表，第一、二页各4个标签，第三页两个标签。...
复制链接

扫一扫