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

相关文章
|
前端开发
#yyds干货盘点 歌谣学前端之React中渲染列表
#yyds干货盘点 歌谣学前端之React中渲染列表
161 1
#yyds干货盘点 歌谣学前端之React中渲染列表
|
前端开发 API
歌谣学前端之react三个api之一续集
歌谣学前端之react三个api之一续集
189 0
|
前端开发
#yyds干货盘点 歌谣学前端之react笔记之学习日历样式的设置
#yyds干货盘点 歌谣学前端之react笔记之学习日历样式的设置
236 0
#yyds干货盘点 歌谣学前端之react笔记之学习日历样式的设置
|
前端开发
#yyds干货盘点 歌谣学前端之react笔记之第一个react项目
#yyds干货盘点 歌谣学前端之react笔记之第一个react项目
233 0
#yyds干货盘点 歌谣学前端之react笔记之第一个react项目
|
前端开发 JavaScript
#yyds干货盘点 歌谣学前端之React中虚拟dom
#yyds干货盘点 歌谣学前端之React中虚拟dom
197 1
|
前端开发
#yyds干货盘点 歌谣学前端之React中jsx注意事项
#yyds干货盘点 歌谣学前端之React中jsx注意事项
177 0
#yyds干货盘点 歌谣学前端之React中jsx注意事项
|
前端开发 API
#yyds干货盘点 歌谣学前端之react三个api之一续集
#yyds干货盘点 歌谣学前端之react三个api之一续集
168 0
#yyds干货盘点 歌谣学前端之react三个api之一续集
|
前端开发
#yyds干货盘点 歌谣学前端之react笔记之学习之类组件
#yyds干货盘点 歌谣学前端之react笔记之学习之类组件
241 0
|
前端开发
#yyds干货盘点 歌谣学前端之react笔记之学习之函数组件
#yyds干货盘点 歌谣学前端之react笔记之学习之函数组件
140 0
|
前端开发 JavaScript
#yyds干货盘点 歌谣学前端之React中jsx
#yyds干货盘点 歌谣学前端之React中jsx
132 0

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
  • 2
    前端工程化演进之路:从手工作坊到AI驱动的智能化开发
  • 3
    Vue 3 + TypeScript 现代前端开发最佳实践(2025版指南)
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式