jquery は、テキストが逐語的に表示される効果を実現します
最近、フロントエンドとバックエンドが分離されていないプロジェクトがあり、逐語的に表示する必要がある機能があり、行ごと、単語ごとに表示する必要があります。
process_one() メソッドは、各行のデータを処理し、各行のデータを add() メソッドに渡し、完全な処理が完了するまで次の行を処理する時間間隔を設定します。ここでは再帰的に実行しています。
add() メソッドは、表示する各行のテキストを 1 つずつ処理するメソッドです。
// 这是取值的div
<div id="info_one" class="mainText info" style="opacity: 0;height:0;">
{!! $card->brief_html !!}
// 里面的值是从富文本取过来的,都带着P标签 <p>都是这种</p>
</div>
//这是最终渲染的div
<div id="info_show_one" class="mainText info"></div>
$(function() {
var dom_index = 0; // p标签计数index
// 处理每一行
function process_one(arrs, dom) {
let nodeArr = []
nodeArr = $("#info_one p")
if (nodeArr.eq(0).text().length == 0) return;
let wordIndex = 0 // 每个文字的index
let node = nodeArr.eq(dom_index) // 获取P标签
let textItem = nodeArr.eq(dom_index).text() // P标签的文字
let time = nodeArr.eq(0).text().length - 1 //每行完成时间，作为下一行开始时间间隔
// 开始执行逐字加载
add(node, textItem, wordIndex, dom)
let timer2 = null;
// 设置定时器来间隔开每行文字的触发
timer2 = setTimeout(function() {
if (dom_index < nodeArr.length) {
process_one(arrs, dom)
} else {
clearTimeout(timer2)
return;
}
}, time * 500)
}
// 添加文字
function add(node, textItem, wordIndex, dom) {
let newP = ''
let timer = null
timer = setInterval(function() {
if (wordIndex != textItem.length - 1) {
newP += textItem[wordIndex]
wordIndex++;
node.html(newP)
$("#info_show_one").append(node)
} else {
wordIndex = 0;
clearInterval(timer)
}
}, 500)
}
// 调用 把P标签和目标dom的id都穿进去，当然你也可以才用其他方法来获取P标签
process_one($("#info_one p"), 'info_show_one')
});