html用js给文字自动分页,快速JS分页长文本
我正在尝试使用JavaScript创建分页系统。
基本情况:我有一个数据库,它包含相当长的文本(故事章节,5000字+)。我想在网站上展示这些章节......但不是一次写完整篇文章,因为这样会大大降低可读性,但是会在页面中出现。
我没有问题显示的文字,而是让页面正确。
我一直在环顾四周,并且遇到了一个JQuery代码,这个代码的功能与我想要的一样。但是这个方法有一个重要的警告。完成文本分页大约需要10秒钟,这是等待太久的时间。
代码基本上做了什么:
它将文本分割成单词(用空格分隔)。
然后尝试将一个单词添加到innerHTML中,检查文本现在是否大于它应该适合的容器。
每次它打破边界时,它都会回到前一个字符串并创建一个新页面。 (通过将文本封装到跨度中,然后可以在需要的时候隐藏/显示)。但是这种方法太慢了,因为它必须运行这些检查5000次以上。
我试图创建一个近似系统,它基本上占用了大量的单词,将它除以系数0.5,检查缓冲区是否大于所需的大小,并重复此过程,直到缓冲区小于所需大小这是第一次,从那个位置开始,它会填满缓冲区,直到它满了。
然而,它似乎并没有正确工作(双字,行,这些字不完整,但仍然太慢。)
这是我目前使用的代码,我会很感激任何修复和建议如何使它更容易,尤其是:更快。
哦和:不,分页服务器不是一种选择,因为它应该适合可变浏览器格式......在1280x768分辨率的全屏浏览器中,它将少于1024x768分辨率的小浏览器。
function CreateChild(contentBox, Len, pageText, words) {
var Child = document.createElement("span");
Child.innerHTML = pageText;
contentBox.appendChild(Child);
if(Len == 0) ++Len;
words.splice(0, Len);
return words.length;
}
$(document).ready(function(){
var src = document.getElementById('Source');
var contentBox = document.getElementById('content');
var inner = document.getElementById('inner');
//get the text as an array of word-like things
var words = src.innerHTML.replace(/ +/g, " ").split(' '), wCount = words.length;
//start off with no page text
var pageText = null, cHeight = contentBox.offsetHeight;
while(words.length > 0) {
var Found = false;
pageText = words[0]; //Prevents constant checking for empty
wCount *= 0.5; //Searches, until the words fit in.
for(var i = 1; i < wCount; ++i) pageText += ' ' + words[i];
inner.innerHTML = pageText;
Distance = inner.offsetHeight - cHeight;
if(Distance < 40) { //Less than two lines
wCount = Math.floor(wCount);
if(Distance < 0) { //Already shorter than required. Fill.
for(var i = wCount; i < words.length; ++i) {
//add the next word to the pageText
var betterPageText = pageText + ' ' + words[i];
inner.innerHTML = betterPageText;
//Checks, whether the new words makes the buffer too big.
if(inner.offsetHeight > cHeight) {
wCount = CreateChild(contentBox, i, pageText, words);
Found = true;
break;
} else {
//this longer text still fits
pageText = betterPageText;
}
}
} else {
for(var i = wCount; i >= 0; --i) {
//Removes the last word from the text
var betterPageText = pageText.slice(0, pageText.length - words[i].length - 1);
inner.innerHTML = betterPageText;
//Is the text now short enough?
if(inner.offsetHeight <= cHeight) {
wCount = CreateChild(contentBox, i, pageText, words);
Found = true;
break;
} else {
pageText = betterPageText;
}
}
}
if(!Found) CreateChild(contentBox, i, pageText, words);
}
}
//Creates the final block with the remaining text.
Child = document.createElement("span");
Child.innerHTML = pageText;
contentBox.appendChild(Child);
//Removes the source and the temporary buffer, only the result remains.
contentBox.removeChild(inner);
src.parentNode.removeChild(src);
//The rest is the actual pagination code, but not the issue
});
html用js给文字自动分页,快速JS分页长文本相关推荐
- 如何使用录音文件转换成文字工具快速完成转换
如何使用录音文件转换成文字工具快速完成转换 长时间的音频文件转换成文字相信让很多人头疼过.一句一句的听译浪费时间十分麻烦还很容易跟不上语速需要返回重新听,那么这里就来和大家讲讲如何只需要几分钟就可以将 ...
- php 让字体闪烁,js实现文字闪烁特效的方法
本文实例讲述了基于jquery实现省市联动特效的代码,分享给大家供大家参考,具体如下: 运行效果图: 实现原理:使用style对象来设置css属性,结合定时器就可以实现js实现文字闪烁特效. 具体代码 ...
- 文字转语音+html5,JS实现文字转语音并播放
html: div> audio> div> js: function doTTS() { var ttsDiv = document.getElementById('bdtts_d ...
- 使用JS实现文字搬运工
使用JS实现文字搬运工 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html><head><meta http-equiv=&quo ...
- php实现文字向左跑马灯,js实现文字跑马灯效果
js实现文字超过显示宽度每间隔1s自动向左滚动显示 *{ margin:0; padding:0;} body{font:12px/1 '微软雅黑';} .wrapper{font-size: 0.8 ...
- GMaps.js:让你快速集成 Google Maps 服务的 jQuery 插件
GMaps.js 功能 除了添加指定经纬度的标准地图之外,GMaps.js 还能定义地图放大的级别,添加标注,获取当前用户的地理位置(HTML5 geolocation),定义路线,绘制折线,并且实现 ...
- JS控制文字只显示两行,超出部分显示省略号
JS控制文字只显示两行,超出部分显示省略号 由于使用css控制文字只显示多行,超出部分显示省略号,存在一定的兼容性问题,所以总结了一下网上一些大咖使用js实现控制行数的解决方案. 第一步:依次引入jq ...
- JS实现文字截取(雾)
今天在跳板群那里看到一个神奇的样式,效果: 感觉十分神奇,因为一开始以为他是只有一个P元素包着文字然后最后一个自动截取文字,而且最后一行还可以提前截取???这怎么做到的,然后想了一下css怎么做,好像 ...
- 跑马灯抽奖js php,文字跑马灯效果的完成
文字跑马灯效果的完成 发表于2019-06-09 21:14| 次阅读| 来源网络整理| 作者session 摘要:跑马灯效果在很多页面上也常常出现,本文次要为大家具体引见微信小程序完成文字跑马灯效果 ...
最新文章
- 加密工具和unlocker的使用
- 奔小康赚大钱 hdu 2255( KM )
- 打包镜像并同时压缩多个镜像
- 欧拉公式cos_谈谈欧拉公式与复指数信号
- King of the Ether
- Spring Boot——RabbitMQ
- java开发过程中,报错Dangling meta character '*' near index 0,解决办法
- 使用Linux docker容器中的集成安全性对SQL Server的.Net Core客户端进行身份验证
- python3--迭代器
- Anonymous Shared Memory android 匿名共享内存
- 图像分类数据集(Fashion-MNIST)
- 实现Ajax异步的layui分页
- 8大数据库性能优化方案,YYDS!
- 慧都与数据库厂商Devart进一步提升合作层次
- 【矩阵论笔记】平方根分解
- kasp技术原理_基因型鉴定的多种方法
- 关于python通过pyautocad操作cad的2021-06-10
- 家用路由器设置虚拟服务器,家用路由器设置虚拟服务器
- Latex论文用bibtex实现期刊/会议缩写
- 简洁易懂的配置Go开发环境MacOS