html网页中用最简单的JS实现文字逐个显示的效果

您所在的位置:网站首页 情不自禁的拼音的读音怎么读 html网页中用最简单的JS实现文字逐个显示的效果

html网页中用最简单的JS实现文字逐个显示的效果

2023-03-23 09:50| 来源: 网络整理| 查看: 265

关于使得文字能在网页中逐字显示的JS,网友分享的有很多,我从中选了几个试了一下,不是很理想。

第一个:

人生最美的事情就是能和你相遇!     window.onload = type;     var index = 0;     var word = $("#w").html();     function type(){         $("#aa").html(word.substring(0,index++));         if(index > word.length) {             return;         } else {             setTimeout(type,50);         };     }

这个我是真搞不通,我承认自己是小白,试了一下,除了空白,没见到一丁点反应。然后我试着将当中的“display:none”去掉,结果,一刷新,整句话齐刷刷显现出来,呢么,到底是啥意思?

第二个:

   

                var i=0;     var str="爱是一道光,绿到你发慌";                 window.οnlοad=function typing(){                 //获取div         var mydiv=document.getElementById("text1");         mydiv.innerHTML+=str.charAt(i);         i++;         var id=setTimeout(typing,80);         if(i==str.length){             clearTimeout(id);             }         }

这个我试了一下,可以用,能够逐字展现,但美中不足的是,不能分段!我首先试了一下加入实现分段,但是,加入后就一片空白了。

我以为是其中有空内容,于是将所有文字及div 堆到一起,还不行。

然后我又试了一下加入换行符,也不行,它不认为这是个换行符,只是一个文字。

第三个:

                              content = "我对着话筒响响地吻了几下,就听到孩子那边断断续续地声音:“谢谢……爸爸,我好……高兴,好……幸福……”";             i = 0;               function show() {                 str = content.substr(0, i);                 txt.innerHTML = str + "|";                 i++;                 if (i > content.length) i = 0;                 setTimeout("show()", 200);             }         

    

这个我试了一下,可以用,但同样的只能处理一段文字,不能处理一篇文章,加入div 也好,使用li 或者p 等等来分段,都不行。

不过,这个代码中加入换行符“”却可以起作用,而且页面也不会显示错误。

                              content = "蓝色多瑙河之恋多瑙河的浪花和着小提琴的悠扬溅出一朵一朵幽蓝色的蔷薇昏暗的角落一杯cappuccino随着圆舞曲的旋转旋转渐渐温热曼妙的节奏两个人不免荡起心中一阵又一阵憧憬的美好蓝色的风蓝色的风弥漫房间从德国的黑林山吹向乌克兰和着欢快的节奏舞池中央一个女孩和着风在旋转她不知道她在等待着谁她只知他也有着同多瑙河一样明净的心和飘过多瑙河的风一样温柔的眼睛风儿飘飘女孩的嘴角漾起微笑仿若多瑙河的蓝色河水一般清澈 ";             i = 0;               function show() {                 str = content.substr(0, i);                 txt.innerHTML = str + "|";                 i++;                 if (i > content.length) i = 0;                 setTimeout("show()", 200);             }              

效果预览:https://www.ximenfeixue.com/article/1145.html

但是,依然还是有两个瑕疵:

一个是,每段末尾,都会显示一下“”则失去换行的效果。

另一个是,content 当中的文字除了第一行遵守父级css规则外,其他各行都不再遵守。于是,第一段首行可以缩进两字符,第二段开始却不行。

到目前为止,我也没研究出到底该咋办!



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3