From ad4bebed07db41261e394e02ef9b78afcf883626 Mon Sep 17 00:00:00 2001 From: ITLDG Date: Mon, 3 Apr 2023 12:55:55 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E8=B0=83=E6=95=B4=E4=BA=8B=E4=BB=B6?= =?UTF-8?q?=E7=9B=91=E5=90=AC=E4=BD=8D=E7=BD=AE,=E9=81=BF=E5=85=8D?= =?UTF-8?q?=E9=87=8D=E5=A4=8D=E7=9B=91=E5=90=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../js/index.js" | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git "a/08. JS\345\200\222\350\256\241\346\227\266\345\256\236\347\216\260\347\211\271\346\225\210/js/index.js" "b/08. JS\345\200\222\350\256\241\346\227\266\345\256\236\347\216\260\347\211\271\346\225\210/js/index.js" index d64178c..8d413da 100755 --- "a/08. JS\345\200\222\350\256\241\346\227\266\345\256\236\347\216\260\347\211\271\346\225\210/js/index.js" +++ "b/08. JS\345\200\222\350\256\241\346\227\266\345\256\236\347\216\260\347\211\271\346\225\210/js/index.js" @@ -1,20 +1,20 @@ var changeTimeNumber = function (node, timer) { - setInterval(function () { + /* 定义动画执行完成事件 */ + node.addEventListener('transitionend', function () { + /* 改变动画的执行transition属性 为空 */ + node.style.transition = 'none' + /* 定义marginTop值为0 */ + node.style.marginTop = '0px'; /* 获取第一个子节点，准备进行添加操作 */ - /* 规定执行动画时间, */ - /* 调整显示位置 */ const firstChild = node.querySelector('li:first-child') + /* 追加第一个元素准备进行第二次动画 */ + node.appendChild(firstChild) + }) + setInterval(function () { + /* 规定执行动画时间, */ node.style.transition = 'all .5s linear' + /* 调整显示位置 */ node.style.marginTop = '-120px' - /* 定义动画执行完成时间 */ - node.addEventListener('transitionend', function () { - /* 改变动画的执行transition属性 为空 */ - node.style.transition = 'none' - /* 定义marginTop值为0 */ - node.style.marginTop = '0px'; - /* 追加第一个元素准备进行第二次动画 */ - node.appendChild(firstChild) - }) }, timer) } -- Gitee From e19bd7b7d6bc09392be6df8f3d3c7659b7b230a7 Mon Sep 17 00:00:00 2001 From: itldg Date: Mon, 3 Apr 2023 22:39:06 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=88=86=E9=A1=B5?= =?UTF-8?q?=E5=B1=95=E7=A4=BA,=E6=9B=B4=E5=B1=85=E4=B8=AD,=E8=80=83?= =?UTF-8?q?=E8=99=91=E9=A1=B5=E7=A0=81=E9=9D=A0=E8=BF=91=E5=B0=BE=E9=A1=B5?= =?UTF-8?q?=E7=9A=84=E6=83=85=E5=86=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../html/index.html" | 2 +- .../js/index.js" | 169 +++++++++--------- 2 files changed, 86 insertions(+), 85 deletions(-) diff --git "a/11. \345\210\206\351\241\265\346\217\222\344\273\266/\350\257\276\345\240\202\344\273\243\347\240\201/html/index.html" "b/11. \345\210\206\351\241\265\346\217\222\344\273\266/\350\257\276\345\240\202\344\273\243\347\240\201/html/index.html" index 5fa8fcd..cb9d32f 100644 --- "a/11. \345\210\206\351\241\265\346\217\222\344\273\266/\350\257\276\345\240\202\344\273\243\347\240\201/html/index.html" +++ "b/11. \345\210\206\351\241\265\346\217\222\344\273\266/\350\257\276\345\240\202\344\273\243\347\240\201/html/index.html" @@ -18,7 +18,7 @@ \ No newline at end of file diff --git "a/11. \345\210\206\351\241\265\346\217\222\344\273\266/\350\257\276\345\240\202\344\273\243\347\240\201/js/index.js" "b/11. \345\210\206\351\241\265\346\217\222\344\273\266/\350\257\276\345\240\202\344\273\243\347\240\201/js/index.js" index 7767dd0..696bfe7 100644 --- "a/11. \345\210\206\351\241\265\346\217\222\344\273\266/\350\257\276\345\240\202\344\273\243\347\240\201/js/index.js" +++ "b/11. \345\210\206\351\241\265\346\217\222\344\273\266/\350\257\276\345\240\202\344\273\243\347\240\201/js/index.js" @@ -3,97 +3,98 @@ // 1. 当前页码 2. 总页码数 3. 中间多少个数字 4. 分页创建好后放入哪个容器 /* -* page:当前页码 -* pageNumber:总页数 -* mostNumber: 中间多少个数字 -* container: 分页创建好后放入哪个容器 -*/ + * page:当前页码 + * pageNumber:总页数 + * mostNumber: 中间多少个数字 + * container: 分页创建好后放入哪个容器 + */ function createPager(page, pageNumber, mostNumber, container) { - // 在做后续生成 pager 结构之前，我们需要将上一次的内容先清空 - container.innerHTML = "" + // 在做后续生成 pager 结构之前，我们需要将上一次的内容先清空 + container.innerHTML = '' - // 1. 创建 pager 容器，并且挂上 pager 这个样式类 - var divPager = document.createElement('div'); - divPager.className = 'pager'; + // 1. 创建 pager 容器，并且挂上 pager 这个样式类 + var divPager = document.createElement('div') + divPager.className = 'pager' - /* - * className:要挂的样式类 - * text:中间文本 - * newPage: 点击后跳转到哪一页 - */ - function createAnchor(className, text, newPage) { - var a = document.createElement('a'); - a.className = className; // 挂上对应的样式类 - a.innerText = text; // 设置中间的文本 - divPager.appendChild(a); - // 点击这个 a 标签跳转到第几页 - a.onclick = function () { - // 分析：所谓跳转，其实就是重新调用 createPager - // 但是，你要注意，有几种情况是不能够跳转 - if (newPage < 1 || newPage > pageNumber || newPage === page) { - return; - } - // 没有进入到上面的 if，说明是可以跳转的 - createPager(newPage, pageNumber, mostNumber, container); - // 分页跳转之后，还会做其他的事情 - // 发送请求获取数据.... - } - } + /* + * className:要挂的样式类 + * text:中间文本 + * newPage: 点击后跳转到哪一页 + */ + function createAnchor(className, text, newPage) { + var a = document.createElement('a') + a.className = className // 挂上对应的样式类 + a.innerText = text // 设置中间的文本 + divPager.appendChild(a) + // 点击这个 a 标签跳转到第几页 + a.onclick = function () { + // 分析：所谓跳转，其实就是重新调用 createPager + // 但是，你要注意，有几种情况是不能够跳转 + if (newPage < 1 || newPage > pageNumber || newPage === page) { + return + } + // 没有进入到上面的 if，说明是可以跳转的 + createPager(newPage, pageNumber, mostNumber, container) + // 分页跳转之后，还会做其他的事情 + // 发送请求获取数据.... + } + } - // 2. 我们要开始创建分页 - // 通过分析：我们发现创建这个分页可以分为 4 个部分 - // （1）首页和上一页 - if (page === 1) { - // 说明当前是第一页 - // 由于考虑到创建具体分页项目的逻辑要用的地方很多，所以我也将其封装成一个函数 - // 该函数需要知道的信息：1. 要不要挂样式类 2. 中间的文本写什么 3. 点击后跳转到第几页 - createAnchor('disabled', '首页', 1) - createAnchor('disabled', '上一页', page - 1) - } else { - createAnchor('', '首页', 1) - createAnchor('', '上一页', page - 1) - } + // 2. 我们要开始创建分页 + // 通过分析：我们发现创建这个分页可以分为 4 个部分 + // （1）首页和上一页 + if (page === 1) { + // 说明当前是第一页 + // 由于考虑到创建具体分页项目的逻辑要用的地方很多，所以我也将其封装成一个函数 + // 该函数需要知道的信息：1. 要不要挂样式类 2. 中间的文本写什么 3. 点击后跳转到第几页 + createAnchor('disabled', '首页', 1) + createAnchor('disabled', '上一页', page - 1) + } else { + createAnchor('', '首页', 1) + createAnchor('', '上一页', page - 1) + } - // （2）中间的数字 - // 首先我们需要计算一头一尾 - var min = Math.floor(page - mostNumber / 2); - if (min < 1) { - min = 1; - } + // （2）中间的数字 + // 首先我们需要计算一头一尾 + var min = page - Math.floor(mostNumber / 2) + if (min < 1) { + min = 1 + } - var max = min + mostNumber - 1; - if (max > pageNumber) { - max = pageNumber; - } + var max = min + mostNumber - 1 + if (max > pageNumber) { + max = pageNumber + } + //如果当前页靠近尾页,开始页减小 + min = Math.min(min, Math.abs(max - mostNumber + 1)) - // 接下来我们就需要通过循环来生成分页项目 - for (var i = min; i <= max; i++) { - if (i === page) { - // 进入此 if，说明是当前页，需要挂上 active 类 - createAnchor("active", i, i); - } else { - createAnchor("", i, i) - } - } + // 接下来我们就需要通过循环来生成分页项目 + for (var i = min; i <= max; i++) { + if (i === page) { + // 进入此 if，说明是当前页，需要挂上 active 类 + createAnchor('active', i, i) + } else { + createAnchor('', i, i) + } + } + // （3）下一页和尾页 + if (page === pageNumber) { + // 说明当前是第一页 + // 由于考虑到创建具体分页项目的逻辑要用的地方很多，所以我也将其封装成一个函数 + // 该函数需要知道的信息：1. 要不要挂样式类 2. 中间的文本写什么 3. 点击后跳转到第几页 + createAnchor('disabled', '下一页', page + 1) + createAnchor('disabled', '尾页', pageNumber) + } else { + createAnchor('', '下一页', page + 1) + createAnchor('', '尾页', pageNumber) + } + // （4）当前页码 + var span = document.createElement('span') + span.innerText = page + '/' + pageNumber + divPager.appendChild(span) - // （3）下一页和尾页 - if (page === pageNumber) { - // 说明当前是第一页 - // 由于考虑到创建具体分页项目的逻辑要用的地方很多，所以我也将其封装成一个函数 - // 该函数需要知道的信息：1. 要不要挂样式类 2. 中间的文本写什么 3. 点击后跳转到第几页 - createAnchor('disabled', '下一页', page + 1) - createAnchor('disabled', '尾页', pageNumber) - } else { - createAnchor('', '下一页', page + 1) - createAnchor('', '尾页', pageNumber) - } - // （4）当前页码 - var span = document.createElement('span'); - span.innerText = page + "/" + pageNumber; - divPager.appendChild(span); - - // 以后将生成好的整个分页组件挂到容器上面即可 - container.appendChild(divPager); -} \ No newline at end of file + // 以后将生成好的整个分页组件挂到容器上面即可 + container.appendChild(divPager) +} -- Gitee