原生html+js学习

小南瓜地

已于 2023-05-12 18:10:57 修改

阅读量133

点赞数

文章标签： html 学习 java

于 2023-05-04 11:05:32 首次发布

本文链接：https://blog.csdn.net/weixin_44996782/article/details/130483050

版权

原代码：
 checkService()
 checkPort()
 getVersion()
 getCheckServiceList()
 getcheckPortList()
 getVersionList()
 
优化后的代码：
 ['Service', 'Port', 'Version'].forEach(function(category) {
	window['getCheck' + category + 'List']();
	window['check' + category]();
  });

pagination.js 分页:
 class Pagination {
    static initial(selector, value, page) {
        $(selector).append(
            `
             <div class="pag">
                    <div class="leftTotal">共<span id="totalCount">0</span>条，每页15条</div>
                    <div class="pageBtn">
                        <i class="xcdata_icon icon-tubiaozhizuomoban-27 goFirst" ></i>
                        <i class="xcdata_icon icon-tubiaozhizuomoban-25 prev"></i>
                        <input value="1" id="inputValue" class="input"/>
                        <span class="totalPage">/</span>
                        <span class="totalPage" id="totalPage"> </span>

                        <i class="xcdata_icon icon-tubiaozhizuomoban-26 next"></i>
                        <i class="xcdata_icon icon-tubiaozhizuomoban-28 goEnd"></i>
                    </div>
                </div>
          `
        );
        // 总共的数据
        const totalCount = document.querySelector(`${ selector } .pag .leftTotal #totalCount`);
        // 第一页
        const goFirst = document.querySelector(`${ selector } .pag .pageBtn .goFirst`);
        // 上一页
        const prev = document.querySelector(`${ selector } .pag .pageBtn .prev`);
        // 下一页
        const next = document.querySelector(`${ selector } .pag .pageBtn .next`);
        // 最后一页
        const goEnd = document.querySelector(`${ selector } .pag .pageBtn .goEnd`);
        // 输入框
        const inputValue = document.querySelector(`${ selector } .pag .pageBtn #inputValue`);
        const totalPage = document.querySelector(`${ selector } .pag .pageBtn #totalPage`);
        // 图标的状态
        iconStatus(`${ selector }`, totalCount, goFirst, prev, next, goEnd, inputValue, totalPage);
        // 第一页
        $(`${ selector } .pag .pageBtn .goFirst`).click(function (e) {
                servicePage = 1;
                inputValue.value = servicePage;
                getServiceList();
            
        });
        // 上一页
        $(`${ selector } .pag .pageBtn .prev`).click(function (e) {
                servicePage = servicePage - 1;
                inputValue.value = servicePage;
                getServiceList();
            
        });
        // 下一页
        $(`${ selector } .pag .pageBtn .next`).click(function (e) {
                servicePage = servicePage + 1;
                inputValue.value = servicePage;
              
                getServiceList();
            

        });
        // 最后一页
        $(`${ selector } .pag .pageBtn .goEnd`).click(function (e) {
            servicePage = totalPage.innerHTML;
            inputValue.value = servicePage;
            // 更新数据
            getServiceList();
        });
        // 输入框失去焦点
        $(`${ selector } .pag .pageBtn .input`).blur(function (e) {
            if (!/^[1-9]\d*$/g.test(inputValue.value) || inputValue.value < 1 || inputValue.value > totalPage.innerHTML) {
                if (selector === ".servicePagination") {
                    servicePage = 1;
                    inputValue.value = servicePage;
                    getServiceList();

                }
            }

        });
        // 键盘被松开
        $(`${ selector } .pag .pageBtn .input`).keyup(function (e) {
            if (e.which === 13) {
                if (!/^[1-9]\d*$/g.test(inputValue.value) || inputValue.value < 1 || inputValue.value > totalPage.innerHTML) {
                    if (selector === ".servicePagination") {
                        servicePage = 1;
                        inputValue.value = servicePage;
                        getServiceList();
                    }
                }
            }
        });

    };

}
index.html:挂载
  <div class="servicePagination pagination" name="服务" id="service"></div>
 <script>
  	Pagination.initial(".servicePagination", "服务", getServiceList());
 <script>