首页 > 代码库 > js 分页问题

js 分页问题

2024-07-28 07:26:50   234人阅读

<!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=http://www.mamicode.com/‘/login/image/password.png‘ />
111user
111username
111username
她说：“牛顿坐在树下，眼睛盯着树在思考，这时，有一个苹果落在他的头上，于是他发现了万有引力定律，孩子们，你们想想看，做一位伟大的科学家多么好，多么神气啊，要想做到这一点，就必须好好学习。”%20
“班上一个调皮鬼对此并不满意。他说：“兴许是这样，可是，假如他坐在学校里，埋头书本，那他就什么也发现不了啦。”%20
女老师竭力向孩子们证明，学习好功课的重要性。%20
111username111username111username她说：“牛顿坐在树下，眼睛盯着树在思考，这时，有一个苹果落在他的头上，于是他发现了万有引力定律，孩子们，你们想想看，做一位伟大的科学家多么好，多么神气啊，要想做到这一点，就必须好好学习。”%20
“班上一个调皮鬼对此并不满意。他说：“兴许是这样，可是，假如他坐在学校里，埋头书本，那他就什么也发现不了啦。”%20
女老师竭力向孩子们证明，学习好功课的重要性。%20
她说：“牛顿坐在树下，眼睛盯着树在思考，这时，有一个苹果落在他的头上，于是他发现了万有引力定律，孩子们，你们想想看，做一位伟大的科学家多么好，多么神气啊，要想做到这一点，就必须好好学习。”%20
“班上一个调皮鬼对此并不满意。他说：“兴许是这样，可是，假如他坐在学校里，埋头书本，那他就什么也发现不了啦。”%20
女老师竭力向孩子们证明，学习好功课的重要性。%20
她说：“牛顿坐在树下，眼睛盯着树在思考，这时，有一个苹果落在他的头上，于是他发现了万有引力定律，孩子们，你们想想看，做一位伟大的科学家多么好，多么神气啊，要想做到这一点，就必须好好学习。”%20
“班上一个调皮鬼对此并不满意。他说：“兴许是这样，可是，假如他坐在学校里，埋头书本，那他就什么也发现不了啦。”%20
女老师竭力向孩子们证明，学习好功课的重要性。%20
她说：“牛顿坐在树下，眼睛盯着树在思考，这时，有一个苹果落在他的头上，于是他发现了万有引力定律，孩子们，你们想想看，做一位伟大的科学家多么好，多么神气啊，要想做到这一点，就必须好好学习。”%20
“班上一个调皮鬼对此并不满意。他说：“兴许是这样，可是，假如他坐在学校里，埋头书本，那他就什么也发现不了啦。”%20
";         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 = /(<img\s+src=http://www.mamicode.com/‘/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>

 

js 分页问题


联系
我们