#yyds干货盘点# 前端歌谣的刷题之路-第八十九题-生成页码

简介: #yyds干货盘点# 前端歌谣的刷题之路-第八十九题-生成页码

image.png

编辑

核心代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>生成页码</title>
</head>
<body>
  <!-- 请补全JavaScript代码,要求根据参数动态生成"li"标签页码并插入"ul"标签下。要求如下:
1. "allItem"为总数据项个数,"pageItem"为每页的数据项个数
2. "li"标签内容为当前页码数,页码从1开始
示例1
输入:
_createPage(13,2)
输出:
"li"长度为7,"li"内容依次为"1","2","3","4","5","6","7" -->
  <ul id="ul">
  </ul>
  <script type="text/javascript">const _createPage = (allItem, pageItem) => {
      // 补全代码
      const _createPage = (allItem, pageItem) => {
        let ul = document.querySelector('#ul')
        let pageNumber = Math.ceil(allItem / pageItem)
        for (let i = 1; i <= pageNumber; i++) {
          let li = document.createElement('li')
          li.innerText = i
          ul.appendChild(li)
        }
      }
    }
  </script>
</body>
</html>

总结

获取”ul“标签

计算出总页数,需要向上取整

进入循环,创建”li“节点且”li“.innerText为该循环当前轮次

在循环内将”li“节点插入”ul“

相关文章
|
前端开发 API
歌谣学前端之react三个api之一续集
歌谣学前端之react三个api之一续集
60 0
|
前端开发
#yyds干货盘点 歌谣学前端之React中渲染列表
#yyds干货盘点 歌谣学前端之React中渲染列表
103 1
#yyds干货盘点 歌谣学前端之React中渲染列表
|
前端开发
#yyds干货盘点 歌谣学前端之react笔记之学习日历样式的设置
#yyds干货盘点 歌谣学前端之react笔记之学习日历样式的设置
121 0
#yyds干货盘点 歌谣学前端之react笔记之学习日历样式的设置
|
前端开发
#yyds干货盘点 歌谣学前端之react笔记之第一个react项目
#yyds干货盘点 歌谣学前端之react笔记之第一个react项目
111 0
#yyds干货盘点 歌谣学前端之react笔记之第一个react项目
|
前端开发 JavaScript
#yyds干货盘点 歌谣学前端之React中虚拟dom
#yyds干货盘点 歌谣学前端之React中虚拟dom
149 1
|
前端开发
#yyds干货盘点 歌谣学前端之React中jsx注意事项
#yyds干货盘点 歌谣学前端之React中jsx注意事项
100 0
#yyds干货盘点 歌谣学前端之React中jsx注意事项
|
前端开发 API
#yyds干货盘点 歌谣学前端之react三个api之一续集
#yyds干货盘点 歌谣学前端之react三个api之一续集
102 0
#yyds干货盘点 歌谣学前端之react三个api之一续集
|
前端开发
#yyds干货盘点 歌谣学前端之react笔记之学习之类组件
#yyds干货盘点 歌谣学前端之react笔记之学习之类组件
112 0
|
前端开发
#yyds干货盘点 歌谣学前端之react笔记之学习之函数组件
#yyds干货盘点 歌谣学前端之react笔记之学习之函数组件
69 0
|
前端开发 JavaScript
#yyds干货盘点 歌谣学前端之React中jsx
#yyds干货盘点 歌谣学前端之React中jsx
86 0