JS让文本以打字效果呈现出来

简单的网页特效：JS让文本以打字效果呈现出来

代码如下：

<!DOCTYPE HTML>
<html lang="en"><head><meta charset="UTF-8"><title>javaScript让文本像打字一样输出</title></head><body><span id="demo"></span></body><script language="JavaScript">//预设的文字var text = '登岳阳楼<br>'+ '唐代：杜甫<br>'+ '昔闻洞庭水，今上岳阳楼。<br>'+ '吴楚东南坼，乾坤日夜浮。<br>'+ '亲朋无一字，老病有孤舟。<br>'+ '戎马关山北，凭轩涕泗流。<br>' ;//文字出现的时间间隔var delay = 80 ;            //初始化变量 ivar i = 0 ;function writeText(){var demo = document.getElementById('demo');//设置 id 为 demo 的对象内的文字为从变量 text 的 0 开始到 i 间的文字加"_"demo.innerHTML = text.slice(0,i++) + "_" ; if ( i > text.length ) { //当 i 大于 text 的文本长度时i = 0 ; //重设 i 为 0，使文字重新从第一个文字出现//延时执行writeText()函数,5秒时候重新执行setTimeout("writeText()",5000) ;} else {//否则在delay毫秒后再次执行writeText()函数setTimeout("writeText()",delay) ;      }}writeText() ;//调用writeText()函数</script>
</html>

转载于:https://www.cnblogs.com/suanshu/p/7346584.html

JS让文本以打字效果呈现出来相关推荐

html打字并自动滚动效果,js实现键盘自动打字效果
content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale= ...
前端详细教学超酷JS实现极客风打字效果
效果贼拉炫酷,写起来也非常简单,非常适合小伙伴们学习话不多说,我直接上代码. html < ...
5行代码带你实现一个js的打字效果
有次看电影, 看到屏幕上一个个的文字蹦出来, 感觉像是有人在打字一样, 觉得挺有意思, 于是这里也用js实现了一个. 效果预览最简单的打字效果只要五行代码, 这里直接贴出来: const dom ...
JS打字效果的动态菜单代码分享
这篇文章主要介绍了JS打字效果的动态菜单,推荐给大家,有需要的小伙伴可以参考下. 这是一款基于javascript实现的打字效果的动态菜单特效代码,分享给大家学习学习. 小提示:浏览器中如果不能正常运 ...
js实现简单的循环打字效果(思路分享)
1.初始化"打字创建"属性代码类似于这样: <div id="demo"></div> <script>var typin ...
js 停顿一秒_JS实用的带停顿的逐行文本循环滚动效果实例
如下所示: JS实用的带停顿的逐行文本循环滚动效果 #scrollBox2{font-size:12px;width:260px;color:#646464;line-height:22px;heig ...
js模仿打字效果的方法
模仿打字效果: function typing(){ var divTyping = $('.txt2'); if (i <= mobile.length) { divTyping.html( ...
php打字文本,怎么做打字效果视频制作文字像打字那样出现并且有打字声音的视频画面文字一个一个出...
看电影或是电视剧的时候,会出现这样的一个字幕效果,就是在视频画面上字幕文字像打字那样画面文字一个一个出现并且有打字声音,有没有人跟我一样好奇的这样的字幕是怎么制作出来的,呵呵呵,我们一定要对身边的所有 ...
html+css+js实现自动敲文字效果
html+css+js实现自动敲文字效果简介:本文是一个前端案例的讲解,关于如何用html+css+js制作出逐渐显示出文字的效果,这个效果可以帮助大家在新人面前装一波. 效果展示效果就是这个样子 ...

JS让文本以打字效果呈现出来

JS让文本以打字效果呈现出来相关推荐

最新文章

热门文章