问题：
javascript - 前端大佬们帮忙看看js还能不能再省略一下代码？
施永宁
HTML
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <link rel="stylesheet" href="css/bass.css"> <link rel="stylesheet" href="css/index.css"> <script src="js/jquery-1.9.1.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.4/axios.min.js"></script> <script src="js/index.js"></script></head><body> <!-- news数据 --> <div class="container"> </div> <!-- 分页器 --> <div class="pagination"></div></body></html>JS$(function () { axios({ url: 'js/news.json' }).then(result => { const pageSize = 10; // 每页显示的数量 let currentPage = 1; // 当前页码 // 生成分页HTML function newPageHTML(total, pageSize, currentPage) { const totalPages = Math.ceil(total / pageSize); let paginationHTML = '<a href="##" class="a">首页</a><a href="##" class="a">上一页</a>'; const maxList = 10; let startPage = Math.max(currentPage - Math.floor(maxList / 2), 1); let endPage = Math.min(startPage + maxList - 1, totalPages); if (endPage - startPage < maxList - 1) { startPage = Math.max(endPage - maxList + 1, 1); } for (let i = startPage; i <= endPage; i++) { paginationHTML += `<a href='##' class="${i === currentPage ? 'active ' : ''}a">${i}</a>`; } paginationHTML += '<a href="##" class="a">尾页</a><a href="##" class="a">下一页</a>'; return paginationHTML; } // 根据页码显示新闻列表 function newNews(page) { currentPage = page; const startIndex = (currentPage - 1) * pageSize; const endIndex = Math.min(startIndex + pageSize - 1, result.data.length - 1); // 根据索引切片获取当前页的新闻数据 const dataList = result.data.slice(startIndex, endIndex + 1).map(item => ` <div class='box'> <a href="javascript:;"> <div class='aBox'> <img src="${item.images}" alt=""> </div> </a> <div class="right"> <h2>${item.title}</h2> <span>${item.time}</span> <p>${item.paragraph}</p> </div> </div> `).join(""); $(".container").html(dataList); // 生成分页HTML并更新页面 const paginationHTML = newPageHTML(result.data.length, pageSize, currentPage); $(".pagination").html(paginationHTML); } // 初始化分页和新闻列表 newNews(currentPage); // 点击页码链接切换页码 $(".pagination").on("click", ".a", function () { const page = $(this).text(); currentPage = page === "首页" ? 1 : page === "尾页" ? Math.ceil(result.data.length / pageSize) : page === "上一页" ? Math.max(currentPage - 1, 1) : page === "下一页" ? Math.min(currentPage + 1, Math.ceil(result.data.length / pageSize)) : parseInt(page); newNews(currentPage); }); });});共有2个答案
贲俊才
说你不行吧你写得挺复杂，说你牛逼吧你写得挺复杂
皇甫伟彦
$(function () { axios({ url: 'js/news.json' }).then(result => { const pageSize = 10; // 每页显示的数量 let currentPage = 1; // 当前页码 // 生成分页HTML function newPageHTML(total, pageSize, currentPage) { const totalPages = Math.ceil(total / pageSize); let paginationHTML = '<a href="##" class="a">首页</a><a href="##" class="a">上一页</a>'; const maxList = 10; let startPage = Math.max(currentPage - Math.floor(maxList / 2), 1); let endPage = Math.min(startPage + maxList - 1, totalPages); if (endPage - startPage < maxList - 1) { startPage = Math.max(endPage - maxList + 1, 1); } for (let i = startPage; i <= endPage; i++) { paginationHTML += `<a href='##' class="${i === currentPage ? 'active ' : ''}a">${i}</a>`; } paginationHTML += '<a href="##" class="a">尾页</a><a href="##" class="a">下一页</a>'; return paginationHTML; } // 根据页码显示新闻列表 function newNews(page) { currentPage = page; const startIndex = (currentPage - 1) * pageSize; const endIndex = Math.min(startIndex + pageSize - 1, result.data.length - 1); const dataList = result.data.slice(startIndex, endIndex + 1).map(item => ` <div class='box'> <a href="javascript:;"> <div class='aBox'> <img src="${item.images}" alt=""> </div> </a> <div class="right"> <h2>${item.title}</h2> <span>${item.time}</span> <p>${item.paragraph}</p> </div> </div> `).join(""); $(".container").html(dataList); const paginationHTML = newPageHTML(result.data.length, pageSize, currentPage); $(".pagination").html(paginationHTML); } // 初始化分页和新闻列表 newNews(currentPage); // 点击页码链接切换页码 $(".pagination").on("click", ".a", function () { const page = $(this).text(); currentPage = page === "首页" ? 1 : page === "尾页" ? Math.ceil(result.data.length / pageSize) : page === "上一页" ? Math.max(currentPage - 1, 1) : page === "下一页" ? Math.min(currentPage + 1, Math.ceil(result.data.length / pageSize)) : parseInt(page); newNews(currentPage); }); });});
类似资料：
-
帮忙看看 这三句mysql能不能写成一句？ 感觉执行3次影响效率，不知道为什么写成一句，该怎么写？
-
vue.config.js中配置了sourcemap后，热启动会变得非常慢，而且会闪过好几串乱码
-
.net6下使用了SignalR的websocket，postman是可以正常连接的，但是前端连接就报错 前端代码：
-
这串代码后 这个sym的变量我该怎么修改
-
刚刚接触 vue,各位大佬，请问下如果要将这个数据结构中的data数组的数据换成从数据库中请求来的数据该怎么做？我在路由器中写了赋值但好像不起作用，请教一下该怎么做才行 这是我的路由器代码
-
这两天天天让我们写些这种东西，需求也要前端写了，写了两份还被打回来了，这次是用她写的一些，但是还想补充一些，又不知道怎么些，来个比较懂的大哥吧，这是两个套壳软件，考生和考场软件，考生提交到考场。