KeleQAQ 2020-05-12 19:13 采纳率: 0%
浏览 7533

JS里出现[Violation] 'click' handler took 1143ms 是什么意思?

详情可以看我的链接:
问题链接


主要内容是用JS实现翻页

图片的警告是怎么回事,这就是我的问题。

图片说明


下面我也把代码再复制一遍。



<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JS实现分页</title>
    </head>
    <body>
        <script>
            var array=[];
            var obj1={
                title:"JAVA入门",
                author:"小红",
                publish:"工业出版社",
                tag:"计算机"
            };
            var obj2={
                title:"C入门",
                author:"小明",
                publish:"工业出版社",
                tag:"计算机"
            };
            var obj3={
                title:"湖北菜大全",
                author:"大强",
                publish:"人民出版社",
                tag:"菜谱"
            };
            var obj4={
                title:"健身舞蹈",
                author:"张小姐",
                publish:"人民出版社",
                tag:"舞蹈"
            };
            var obj5={
                title:"英语口语",
                author:"可乐",
                publish:"湖北出版社",
                tag:"英语"
            };
            array.push(obj1,obj2,obj3,obj4,obj5);
        </script>
        <input type="text" id="inputtext" />
        <input type="button" id="sub" value="提交" onclick="showData()"/>
        <table id="tab">
            <thead id="tabhead">
                <!-- 显示表头 -->
            </thead>

            <tbody id="tabcontext">
                <!-- 开始显示内容 -->
                <!-- 设置每次最多显示2行类容 -->
            </tbody>

            <tfoot id="tabfoot">
                <!-- 显示表尾 -->
            </tfoot>
        </table>

        <script>

            var totalPage=0;//totalPage是总分页数
            var e=2;//e 是每页显示多少行数据
            var totalCount=0;//totalCount是总共有多少行数据
            var currentPage=1;//currentPage是当前页面,初始为1

            var firstDate=0;//每个页面的第1个数据的数组下标
            var lastDate=e-1;//每个页面的最后1个数据的数组下标

            totalCount=array.length;
            totalPage=(totalCount%e==0?totalCount/e:parseInt(totalCount/e+1));//求出总分页数


            function showData(){
                //每次显示前先清空数据,防止重复显示
                document.getElementById("tabhead").innerHTML="";
                document.getElementById("tabfoot").innerHTML="";
                document.getElementById("tabcontext").innerHTML="";
                //显示表头和表尾
                document.getElementById("tabhead").innerHTML="<tr><td>书名</td>"+
                "<td>作者</td>"+
                "<td>出版社</td>"+
                "<td>标签</td></tr>"
                document.getElementById("tabfoot").innerHTML="<tr><td><input type=\"button\" value=\"上一页\" id=\"pre\" onclick=\"showPre()\" /></td>"+
                "<td><input type=\"button\" value=\"第1页\" id=\"current\" /></td>"+
                "<td><input type=\"button\" value=\"下一页\" id=\"next\" onclick=\"showNext()\"/></td>"+
                "<td><input type=\"button\" value=\"共"+totalCount+"条记录\" id=\"sum\" /></td>";

                show(firstDate,lastDate);//显示数据函数

            }


            function showPre(){

                //判断是否是边界
                if(currentPage<=1){
                    alert("没有更多记录!");
                }else{
                    firstDate-=e;
                    lastDate-=e;
                    currentPage--;
                    document.getElementById("current").setAttribute("value","第"+currentPage+"页");
                    show(firstDate,lastDate);
                }

            }

            function showNext(){
                //判断是否是边界
                if(currentPage>=totalPage){
                    alert("没有更多记录!");
                }else{
                    firstDate+=e;
                    lastDate+=e;
                    currentPage++;
                    document.getElementById("current").setAttribute("value","第"+currentPage+"页");
                    show(firstDate,lastDate);
                }

            }
            function show(first,last){
                document.getElementById("tabcontext").innerHTML="";//清空数据
                if(last>array.length-1){
                    last=array.length-1;
                }
                for(;first<=last;first++){
                    var fathernode=document.getElementById("tabcontext");
                    var trele=document.createElement("tr");
                    fathernode.appendChild(trele);
                    var tds="<td>"+array[first].title+"</td>"+
                    "<td>"+array[first].author+"</td>"+
                    "<td>"+array[first].publish+"</td>"+
                    "<td>"+array[first].tag+"</td>";
                    trele.innerHTML=tds;
                }
            }
        </script>

    </body>
</html>

  • 写回答

2条回答

  • 关注
    评论

报告相同问题?

悬赏问题

  • ¥15 执行 virtuoso 命令后,界面没有,cadence 启动不起来
  • ¥50 comfyui下连接animatediff节点生成视频质量非常差的原因
  • ¥20 有关区间dp的问题求解
  • ¥15 多电路系统共用电源的串扰问题
  • ¥15 slam rangenet++配置
  • ¥15 有没有研究水声通信方面的帮我改俩matlab代码
  • ¥15 ubuntu子系统密码忘记
  • ¥15 保护模式-系统加载-段寄存器
  • ¥15 电脑桌面设定一个区域禁止鼠标操作
  • ¥15 求NPF226060磁芯的详细资料