javascript实现自动输出文本(打字特效)


Posted in Javascript onAugust 27, 2015

主要利用了setTimeout(),递归和String.substring();

做出的效果就像是有一个打字员在打字.

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="Generator" content="EditPlus®">
 <meta name="Author" content="">
 <meta name="Keywords" content="">
 <meta name="Description" content="">
 <title>Document</title>
</head>
<body bgcolor="#ccc" onload="printer();">
  <h2 align="center">文本自动输出</h2>
  <br>
  <br>
  <hr width="400" color="black">
  <br>
 <form align="center">
  <textarea cols="50" rows="30" id="text" style="background-color:#FF99CC; color: #330033; cursor: default; font-family: Arial; font-size: 18px" wrap=virtual></textarea>
 </form>
</body>
<script type="text/javascript">

  //获取textarea对象
  var text=document.getElementById("text");
  //要输出的内容
  var str="  传统的HTML语言不能开发交互式的动态网页,而JavaScript却能很好的做到这一点。JavaScript是一门相当简单易学的网络化编程语言,通过把她和HTML语言相互结合起来,能够实现实时的动态网页特效,这给网页浏览者在浏览网页的同时也提供了某些乐趣。";
  var pos=0;
  //利用递归和setTimeout()实现文字输出
  function printer(){
    text.value=str.substring(0,pos)+"|";
    //判断是否到达结尾.如果是则一秒后再来一遍.
    if(pos++>str.length){
      pos=0;
      setTimeout("printer()",1000);
    }else{
      setTimeout("printer()",50);
    }
  }
</script>
</html>

方法二:JavaScript实现打字电脑打字效果

<span id="demo"></span>
<script defer>
var text="JavaScript实现的打字效果"  //预定文字
var delay=200             //文字出现的时间间隔
var i=0                //初始化变量 i
function scrollit(){
//设置 id 为 demo 的对象内的文字为从变量 text 的 0 开始到 i 间的文字加"_"
demo.innerText=text.slice(0,i++)+"_"  
if(i>text.length){       //当 i 大于 text 的文本长度时
  i=0              //重设 i 为 0,使文字重新从第一个文字出现
//延时执行scrollit()函数,delay*10是为了让显示完整文字的时间长一点
  setTimeout("scrollit()",delay*10) 
}
  //否则在delay毫秒后再次执行scrollit()函数
else setTimeout("scrollit()",delay)       
}
scrollit() //调用scrollit()函数
</script>

方法三:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
  <title>标题页</title>
 <script language=javascript>
var layers =document.layers;
var style=document.all;
var both=layers||style;
var idme=908601;
if(layers)
{ layerRef='document.layers';styleRef ='';}
if(style)
{ layerRef='document.all';styleRef = '.style';}
//开始参数的定义
function writeOnText(obj,str)
{
if(layers)with(document[obj])
{ document.open();document.write(str);document.close();}
if(style)eval(obj+'.innerHTML=str'); 
}
var dispStr=new Array("证监会称将严查利用内幕信息牟取不当利益行为!"); //要出现的文本
var overMe=0;
//逐字显示的方法
function txtTyper(str,idx,objId,objStyle,color1,color2,delay,plysnd)
{
var mystr='',strchar='';
var skip=200;
if (both && idx<=str.length) {
if (str.charAt(idx)=='<'){ while(str.charAt(idx)!='>') idx++;}
if (str.charAt(idx)=='&'&&str.charAt(idx+1)!=' '){ while (str.charAt(idx)!= ';')idx++;}
mystr = str.slice(0,idx);  //返回数组从开始到指定位置的字符串
strchar = str.charAt(idx++);//当前地址的字符
if (overMe==0 && plysnd==1)
{
//针对浏览器的不同,调用不同的显示方法
if (navigator.plugins[0]){
if(navigator.plugins["LiveAudio"][0].type=="audio/basic" && navigator.javaEnabled())
{document.embeds[0].stop();
setTimeout("document.embeds[0].play(false)",100);}
} else if (document.all){
ding.Stop();
setTimeout("ding.Run()",100);}
overMe=1;}else overMe=0;
writeOnText(objId, "<span class="+objStyle+"><font color='"+color1+"'>"+mystr+"</font><font color='"+color2
+"'>"+strchar+"</font></span>");
setTimeout("txtTyper('"+str+"', "+idx+", '"+objId+"', '"+objStyle+"', '"+color1+"', '"+color2+"', "+delay+" ,"+plysnd+")",delay);}}
function init()
{txtTyper(dispStr[0], 0, 'div1', 'style1', '#66CCBB', '#000000', 400, 0);}
</script>
<BODY onload=init()>
<DIV class=style1 id=div1></DIV>
</BODY>
</html>
Javascript 相关文章推荐
JQuery的自定义事件代码,触发,绑定简单实例
Aug 01 Javascript
jQuery实现tab标签自动切换的方法
Feb 28 Javascript
JS实现简易图片轮播效果的方法
Mar 25 Javascript
Angularjs全局变量被作用域监听的正确姿势
Feb 06 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
Apr 19 Javascript
第二章之Bootstrap 页面排版样式
Apr 25 Javascript
AngularJS入门教程之更多模板详解
Aug 19 Javascript
JavaScript实现经典排序算法之选择排序
Dec 28 Javascript
详解Vue 方法与事件处理器
Jun 20 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
Sep 11 Javascript
React Router v4 入坑指南(小结)
Apr 08 Javascript
详解jQuery设置内容和属性
Apr 11 jQuery
jquery+php随机生成红包金额数量代码分享
Aug 27 #Javascript
javascript模拟C#格式化字符串
Aug 26 #Javascript
jQuery实现滚动切换的tab选项卡效果代码
Aug 26 #Javascript
基于jquery实现一个滚动的分步注册向导-附源码
Aug 26 #Javascript
jQuery带时间的日期控件代码分享
Aug 26 #Javascript
js仿苹果iwatch外观的计时器代码分享
Aug 26 #Javascript
jQuery下拉友情链接美化效果代码分享
Aug 26 #Javascript
You might like
PHP中使用xmlreader读取xml数据示例
2014/12/29 PHP
WordPress的主题编写中获取头部模板和底部模板
2015/12/28 PHP
PHP+iframe图片上传实现即时刷新效果
2016/11/18 PHP
javascript中的prototype属性实例分析说明
2010/08/09 Javascript
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
2013/06/28 Javascript
Jquery 复选框取值兼容FF和IE8(测试有效)
2013/10/29 Javascript
javascript字符串函数汇总
2015/12/06 Javascript
JavaScript添加随滚动条滚动窗体的方法
2016/02/23 Javascript
AngularJS的脏检查深入分析
2017/04/22 Javascript
JavaScript通过filereader接口读取文件
2017/05/10 Javascript
jQuery操作css样式
2017/05/15 jQuery
微信小程序获取手机系统信息的方法【附源码下载】
2017/12/07 Javascript
JavaScript中var、let、const区别浅析
2018/06/24 Javascript
JavaScript 性能提升之路(推荐)
2019/04/10 Javascript
JS实现的对象去重功能示例
2019/06/04 Javascript
Vue中常用rules校验规则(实例代码)
2019/11/14 Javascript
Python import用法以及与from...import的区别
2015/05/28 Python
Django使用HttpResponse返回图片并显示的方法
2018/05/22 Python
django使用LDAP验证的方法示例
2018/12/10 Python
python实现公司年会抽奖程序
2019/01/22 Python
pyqt5中QThread在使用时出现重复emit的实例
2019/06/21 Python
python实现图片插入文字
2019/11/26 Python
Python如何进行时间处理
2020/08/06 Python
浅析关于Keras的安装(pycharm)和初步理解
2020/10/23 Python
Python 中Operator模块的使用
2021/01/30 Python
CSS3新增布局之: flex详解
2020/06/18 HTML / CSS
html5自动播放mov格式视频的实例代码
2020/01/14 HTML / CSS
世界上最大的网络主机公司:1&1
2016/10/12 全球购物
寄语十八大感言
2014/02/07 职场文书
人力资源部门的主要职能
2014/02/22 职场文书
党员公开承诺书内容
2014/05/20 职场文书
物理教育专业求职信
2014/06/25 职场文书
北大自主招生自荐信
2015/03/04 职场文书
2015年社会治安综合治理工作总结
2015/04/10 职场文书
普希金诗歌赏析(6首)
2019/08/22 职场文书
MyBatis在注解上使用动态SQL方式(@select使用if)
2022/07/07 Java/Android