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

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 ads仿真结果在圆图上是怎么读数的
  • ¥20 Cotex M3的调试和程序执行方式是什么样的?
  • ¥20 java项目连接sqlserver时报ssl相关错误
  • ¥15 一道python难题3
  • ¥15 用matlab 设计一个不动点迭代法求解非线性方程组的代码
  • ¥15 牛顿斯科特系数表表示
  • ¥15 arduino 步进电机
  • ¥20 程序进入HardFault_Handler
  • ¥15 oracle集群安装出bug
  • ¥15 关于#python#的问题:自动化测试