zoukankan      html  css  js  c++  java
  • js 分页问题

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>页面分页</title>
        <style type="text/css">
            *
            {
                font-size: 10.2pt;
                font-family: tahoma;
                line-height: 150%;
            }
            .divContent
            {
                border: 1px solid red;
                background-color: #FFD2D3;
                width: 500px;
                word-break: break-all;
                margin: 10px 0px 10px;
                padding: 10px;
            }
        </style>
    </head>
    <body>
          
        <h1>标题</h1>
      
        <div id="divContent">
        </div>
        
        <script type="text/javascript">
              // input里面不允许包含:初中、中学、初级中学这三个词语
           
            
             s="<p>女老师竭力向孩子们证明,学习好功课的重要性。 </p><img src='/login/image/password.png' /><p><table border='1'><tr><td>111</td><td>user</td></tr><tr><td>111</td><td>username</td></tr><tr><td>111</td><td>username</td></tr></table>她说:“牛顿坐在树下,眼睛盯着树在思考,这时,<img src='/login/image/password3.png' />有一个苹果落在他的头上,于是他发现了万有引力定律,孩子们,你们想想看,做一位伟大的科学家多么好,多么神气啊,要想做到这一点,就必须好好学习。” </p><p>“班上一个调皮鬼对此并不满意。他说:“兴许是这样,可是,假如他坐在学校里,埋头书本,那他就什么也发现不了啦。” </p><p>女老师竭力向孩子们证明,学习好功课的重要性。 </p><p><table border='1'><tr><td>111</td><td>username</td></tr><tr><td>111</td><td>username</td></tr><tr><td>111</td><td>username</td></tr></table>她说:“牛顿坐在树下,眼睛盯着树在思考,这时,有一个苹果落在他的头上,于是他发现了万有引力定律,孩子们,你们想想看,做一位伟大的科学家多么好,多么神气啊,要想做到这一点,就必须好好学习。” </p><p>“班上一个调皮鬼对此并不满意。他说:“兴许是这样,可是,假如他坐在学校里,埋头书本,那他就什么也发现不了啦。” </p><p>女老师竭力向孩子们证明,学习好功课的重要性。 </p><p>她说:“牛顿坐在树下,眼睛盯着树在思考,这时,有一个苹果落在他的头上,于是他发现了万有引力定律,孩子们,你们想想看,做一位伟大的科学家多么好,多么神气啊,要想做到这一点,就必须好好学习。” </p><p>“班上一个调皮鬼对此并不满意。他说:“兴许是这样,可是,假如他坐在学校里,埋头书本,那他就什么也发现不了啦。” </p><p>女老师竭力向孩子们证明,学习好功课的重要性。 </p><p>她说:“牛顿坐在树下,眼睛盯着树在思考,这时,有一个苹果落在他的头上,于是他发现了万有引力定律,孩子们,你们想想看,做一位伟大的科学家多么好,多么神气啊,要想做到这一点,就必须好好学习。” </p><p>“班上一个调皮鬼对此并不满意。他说:“兴许是这样,可是,假如他坐在学校里,埋头书本,那他就什么也发现不了啦。” </p><p>女老师竭力向孩子们证明,学习好功课的重要性。 </p><p>她说:“牛顿坐在树下,眼睛盯着树在思考,这时,有一个苹果落在他的头上,于是他发现了万有引力定律,孩子们,你们想想看,做一位伟大的科学家多么好,多么神气啊,要想做到这一点,就必须好好学习。” </p><p>“班上一个调皮鬼对此并不满意。他说:“兴许是这样,可是,假如他坐在学校里,埋头书本,那他就什么也发现不了啦。” </p>";
             mainContent = s;
             var tabReg = /(<table[^>]*>((?!table).)*</table>)+/gi;
             var tabMatch = tabReg.test(s);
             var tabMatchContentArray = [];
             tabMatchContentArray = s.match(tabReg);
             
             if(tabMatch)
             {
                
                mainContent = s.replace(tabReg,"#");
             }
              
             //alert(mainContent); 
     
             //对img标签进行匹配
             var imgReg = /(<imgs+src='S+'s*(/)?>)/gi;
             imgMatchContentArray = s.match(imgReg);
             
             if(imgReg.test(s))
             {
                //将img标签替换为*
                mainContent = mainContent.replace(imgReg,"*");
             }
            
            
            var pageIndex = 4;
            var size = 100;
            
            var tableContentArray = mainContent.split("#");
            
            var array = [];
            var arrayIndex = [];
            var len =0;
            for(var i=0;i<tableContentArray.length;i++)
            {
                var con = tableContentArray[i];
                len += con.length;
                arrayIndex[i] = len;
                array[i] = Math.ceil(con.length /size);
            }
            
            
            
            
            var tableIndexArray = [];
            
            var sum = 1;
            
            for(var j=0;j<array.length-1;j++)
            {
                
                sum += array[j];
                tableIndexArray[j] = sum;
            }
            
            //alert(tableIndexArray);
            //alert(tableIndexArray.indexOf(pageIndex) );
            
            var currentPageContent = mainContent.substr((pageIndex-1)*size,size);
            alert(currentPageContent);
            
            if(tableIndexArray.indexOf(pageIndex) >= 0)
            {
                alert(1111);
                currentPageContent = tabMatchContentArray[tableIndexArray.indexOf(pageIndex)];
                //alert(currentPageContent);
            }
            
            
            if(currentPageContent.indexOf("#")!= -1)
            {
                
                alert(222);
                var beginToCurrentPageContent = mainContent.substr(0,pageIndex*size);            
                var tabLastIndex = beginToCurrentPageContent.lastIndexOf("#");
                alert(tabLastIndex);
                currentPageContent = currentPageContent.substr(0,tabLastIndex-(pageIndex-1)*size);
                alert(currentPageContent);
                //当前页是否有 * 获取最后一个 * 的位置 
                var indexOf = currentPageContent.indexOf("*");
                
                if(indexOf >= 0)
                {                  
                      //获取开始到当前页位置的内容 中的 * 的最后的下标 
                      var reCount = beginToCurrentPageContent.split("*").length - 1;
                       
                      var contentArray = currentPageContent.split("*");
                      
                      currentPageContent = replaceImgContent(contentArray,reCount,imgMatchContentArray);
                      
                }
                    
                
                
            }
            else
            {
                alert(22222);
                //当前页是否有 * 获取最后一个 * 的位置 
                var indexOf = currentPageContent.indexOf("*");
                
                if(indexOf >= 0)
                {
                      //获取从开始位置到当前页位置的内容
                      var beginToCurrentPageContent = mainContent.substr(0,pageIndex*size);
                      
                      //获取开始到当前页位置的内容 中的 * 的最后的下标 
                      var reCount = beginToCurrentPageContent.split("*").length - 1;
                       
                      var contentArray = currentPageContent.split("*");
                      
                      currentPageContent = replaceImgContent(contentArray,reCount,imgMatchContentArray);
                      
                }
                
            }
            
           document.getElementById("divContent").innerHTML= currentPageContent;
    
            
            
            /*  currentArray:当前页以 * 分割后的数组
                replaceCount:从开始内容到当前页的内容 * 的个数
                matchArray : img标签的匹配的内容
            */
            function replaceImgContent(currentArray,replaceCount,matchArray)
            {
               
                var result = "";
                for(var i=currentArray.length -1,j = replaceCount-1 ;i>=1; i--)
                {   
                 
                   var temp = (matchArray[j] + currentArray[i]);
    
                   result = temp + result;
                   
                   j--;
                }
                
                result = currentArray[0] + result ;
                
                return result;
            }
    
         
            
            
        </script>
    
       
    
    </body>
    </html>
  • 相关阅读:
    JAVA单例MongoDB工具类
    Docker的安装使用-第1章
    JSON支持什么对象/类型?
    Linux环境源码编译安装SVN
    网站优化总结
    [java]反射1 2017-06-25 21:50 79人阅读 评论(10) 收藏
    记一次问题的解决,web自动化用例的管理
    将GatlingBundle容器化,并通过参数化来执行压测
    基于Fitnesse的接口自动化测试-关键字设计-样例-mysql操作
    基于Fitnesse的接口自动化测试-关键字设计-样例-redis操作
  • 原文地址:https://www.cnblogs.com/zoro-zero/p/4039238.html
Copyright © 2011-2022 走看看