js实现逐行打字，逐段打字效果(最全)

1、以下是实现逐行打字的效果

index.html。这里span之间不能有空格

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>打字机</title><script type="text/javascript" src="text.js"></script><script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div id="myContent"></div>
<div id="contentToWrite" style="display: none"><span class="player-name">来到蜀门</span><br>成为一名<span class="player-school"></span><br>历经千锤百炼到了<span class="player-level"></span>级<br>战力达到了<span class="player-battle"></span></div>
<script type="text/javascript"> writeContent(true); </script></body>
</html>

text.js.

var charIndex = -1;
var stringLength = 0;
var inputText;function writeContent(init) {if (init) {inputText = document.getElementById('contentToWrite').innerText;console.log(inputText)}if (charIndex == -1) {charIndex = 0;stringLength = inputText.length;}var initString = document.getElementById('myContent').innerHTML;console.log(initString)initString = initString.replace(/\s+/g, "<br>");var theChar = inputText.charAt(charIndex);var nextFourChars = inputText.substr(charIndex, 4);if (nextFourChars == '<BR>' || nextFourChars == '<br>') {theChar = '<BR>';charIndex += 3;}// initString = initString + theChar + "<SPAN id='blink'>_</SPAN>";initString = initString + theChar;// console.log(initString)document.getElementById('myContent').innerHTML = initString;charIndex = charIndex / 1 + 1;// if (charIndex % 2 == 1) {//   document.getElementById('blink').style.display = 'none';// } else {//   document.getElementById('blink').style.display = 'inline';// }// if (charIndex <= stringLength) {//   setTimeout('writeContent(false)', 140);// } else {//   blinkSpan();// }if (charIndex <= stringLength) {setTimeout('writeContent(false)', 140);}
}// var currentStyle = 'inline';
//
// function blinkSpan() {
//   if (currentStyle == 'inline') {
//     currentStyle = 'none';
//   } else {
//     currentStyle = 'inline';
//   }
//   document.getElementById('blink').style.display = currentStyle;
//   setTimeout('blinkSpan()', 100);
// }

2、另一种逐行打字效果。通过匹配<br>

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>打字机</title><script type="text/javascript" src="text.js"></script>
</head>
<body>
<div id="myContent"></div>
<div id="contentToWrite" style="display:none;"> 春江花月夜<br>张若虚 唐<br> 春江潮水连海平，海上明月共潮生。<br>滟滟随波千万里，何处春江无月明！<br>江流宛转绕芳甸，月照花林皆似霰；<br>空里流霜不觉飞，汀上白沙看不见。<br> 江天一色无纤尘，皎皎空中孤月轮。<br>江畔何人初见月？江月何年初照人？<br> 人生代代无穷已，江月年年只相似。<br>不知江月待何人，但见长江送流水。<br>白云一片去悠悠，青枫浦上不胜愁。<br>谁家今夜扁舟子？何处相思明月楼？<br> 可怜楼上月徘徊，应照离人妆镜台。<br>玉户帘中卷不去，捣衣砧上拂还来。<br> 此时相望不相闻，愿逐月华流照君。<br>鸿雁长飞光不度，鱼龙潜跃水成文。<br>昨夜闲潭梦落花，可怜春半不还家。<br>江水流春去欲尽，江潭落月复西斜。<br> 斜月沉沉藏海雾，碣石潇湘无限路。<br>不知乘月几人归，落月摇情满江树。<br></div>
<script type="text/javascript"> writeContent(true); </script>
</body>
</html>

text.js

var charIndex = -1;
var stringLength = 0;
var inputText;function writeContent(init) {if (init) {inputText = document.getElementById('contentToWrite').innerHTML;}if (charIndex == -1) {charIndex = 0;stringLength = inputText.length;}var initString = document.getElementById('myContent').innerHTML;initString = initString.replace(/<SPAN.*$/gi, "");var theChar = inputText.charAt(charIndex);var nextFourChars = inputText.substr(charIndex, 4);if (nextFourChars == '<BR>' || nextFourChars == '<br>') {theChar = '<BR>';charIndex += 3;}initString = initString + theChar + "<SPAN id='blink'>_</SPAN>";document.getElementById('myContent').innerHTML = initString;charIndex = charIndex / 1 + 1;if (charIndex % 2 == 1) {document.getElementById('blink').style.display = 'none';} else {document.getElementById('blink').style.display = 'inline';}if (charIndex <= stringLength) {setTimeout('writeContent(false)', 140);} else {blinkSpan();}
}var currentStyle = 'inline';function blinkSpan() {if (currentStyle == 'inline') {currentStyle = 'none';} else {currentStyle = 'inline';}document.getElementById('blink').style.display = currentStyle;setTimeout('blinkSpan()', 100);
}

3、逐段打印（一长段）

index.html

<script src="js/l-by-l.min.js"></script>
<p class="word1"></p>
<p class="word2"></p>
<script>jQuery(document).ready(function($){$(".word1").lbyl({content: "朦胧的月色正浓，星光与静夜默言无声，一个人的夜，一个人的惆怅心思。隐约着怎样面对一份不确定的爱感情的抉择，陷入爱里的不能自拔的人，没有了智商，低的可怜，痴痴的，一个人一旦遇上且喜欢的人，就会痴心，傻傻的，乱了方寸，无所适从，做什么都手足无措。爱上你，总是盼望你出现，一旦有你的身影，却又胆怯不敢打扰，所以越是想接近，却想逃离，越是想逃离，越想接近，转身背过脸去，却越清晰的看见，你的影子，从各个角度，从镜子反射过来你的身影，一个人活在一个人的影子里。如果，时间可以证明一切，是不是如我想象的你，是不是爱着我，给我勇气，告诉我，让我有信心不再闪躲，好敢于面对你，和你在一起，默默的相伴，默默的欢喜。红尘陌上，花开几许，你可以选择爱或不爱我，而我只能选择爱或更爱你！",speed: 100,type: 'show',finished: function(){ $('.word2').lbyl({content:"生命的开始到结束就是一个由绽放到凋谢的花季，而心态却永如盛开摇曳的花朵般娇艳，只要心花不败，爱情的花自开，暗香飘来。一颗年轻的心是本色的心，不论成，不论败，顺境与逆境，晴朗时，碧心一片望朗月当空，淡雅观云水沸腾，有策马扬鞭的勇气，登高怀远的志向，阴霾时，请记得水穿会石开，避开那寒风，一物见佛，听水寂静，关云霁而忘我，前念后念，是否该随缘，爱抚被歧视的伤痛，温润浸透泪水的心灵。生命短短数十年，不论成败，百年后都成过眼烟云，让内心宽远，就不会坠入痛苦的深渊，在人生的任何阶段，如履平地，总会安然的度过。",speed: 150,type: 'fade',fadeSpeed: 500})} // Finished Callback});});</script>

l-by-l.min.js


/*
Copyright © 2015 HTML5andBeyond.com
Licensed Under MIT
*/(function ( $ ) {$.fn.lbyl = function( options ) {var s = $.extend({content: '',speed: 10,type: 'fade',fadeSpeed: 500,finished: function(){}}, options );var elem = $(this),letterArray = [],lbylContent = s.content,count = $(this).length;elem.empty();elem.attr('data-time', lbylContent.length * s.speed)for (var i = 0; i < lbylContent.length; i++) {letterArray.push(lbylContent[i]);}$.each(letterArray, function(index, value) {elem.append('<span style="display: none;">' + value + '</span>');setTimeout(function(){if (s.type == 'show') {elem.find('span:eq(' + index + ')').show();} else if (s.type == 'fade') {elem.find('span:eq(' + index + ')').fadeIn(s.fadeSpeed); }}, index * s.speed);});setTimeout(function(){s.finished();}, lbylContent.length * s.speed);};}( jQuery ));

js实现逐行打字，逐段打字效果(最全)相关推荐

html js 3d图片轮播,js实现3D图片逐张轮播幻灯片特效代码分享
本文实例讲述了javascript实现3D图片逐张轮播幻灯片特效.分享给大家供大家参考.具体如下: 这是一款基于javascript实现3D图片逐张轮播幻灯片特效代码,实现过程很简单. 运行效果图:- ...
AI大神李沐B站走红！连博导们都在追更，还亲自带你逐段读懂论文，网友：带B站研究生吧...
明敏梦晨发自凹非寺量子位报道 | 公众号 QbitAI 什么样的B站Up主,让AI专业的导师们纷纷推荐给学生看,甚至导师自己也追更? 又是什么样的Up主,让网友直呼"简直是做慈善& ...
js原生带缩略图的图片切换效果
js原生带缩略图的图片切换效果本例中用到的 moveElement(elementID,final_x,final_y,interval)是来自<JavaScript DOM编程艺术(中文第二 ...
BERT 论文逐段精读【论文精读】-跟李沐学AI
视频链接:BERT 论文逐段精读[论文精读]_哔哩哔哩_bilibili BERT: 近 3 年 NLP 最火 CV: 大数据集上的训练好的 NN 模型,提升 CV 任务的性能 -- ImageNet ...
ViT论文逐段精读【论文精读】-跟李沐学AI
视频链接:ViT论文逐段精读[论文精读]_哔哩哔哩_bilibili ViT:过去一年,CV 最有影响力的工作推翻了 2012 Alexnet 提出的 CNN 在 CV 的统治地位有足够多的预训练 ...
Midnight.js – 实现奇妙的固定头部切换效果
Midnight.js 是一款 jQuery 插件,在页面滚动的时候实现多个头设计之间的切换,所以你总是有一个头与它下面的内容层叠,看起来效果很不错. Midnight.js 可以让你轻松实现这种切换 ...
html5 coverflow,使用CSS+JS帮你实现苹果cover flow效果
原标题:使用CSS+JS帮你实现苹果cover flow效果 coverflow-demo222 <> ;(function(parent){ var cards = parent.que ...
html自动切换文字,JS实现自动切换文字的导航效果代码
本文实例讲述了JS实现自动切换文字的导航效果代码.分享给大家供大家参考.具体如下: 这里介绍支持自动切换文字的导航菜单效果,实际上看上去并不像菜单,猛一看倒像是一个Select下拉框,两侧带有箭头控制 ...
Fort.js – 时尚、现代的进度提示效果
Fort.js 是表单填写进度提示效果的 JavaScript 库,使用非常简单. 提供了Default.Gradient.Sections 以及 Flash 四种效果用Fort.js很简单,很简单 ...
html多图轮播淡入淡出js,原生JS实现图片轮播与淡入效果的简单实例
最近对css的兴趣提不起来,因为以前对图片轮播一直耿耿于怀苦于学艺不精,所以,花了点时间熟悉了一下js.然后一条道走到黑,用jquery和js写了一下轮播和图片淡入的效果.以后学习的路很长,希望自己在 ...

js实现逐行打字，逐段打字效果(最全)

js实现逐行打字，逐段打字效果(最全)相关推荐

最新文章

热门文章