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 相关文章推荐
JS获取dom 对象 ajax操作 读写cookie函数
Nov 18 Javascript
JS按回车键实现登录的方法
Aug 25 Javascript
Javascript基础知识(三)BOM,DOM总结
Sep 29 Javascript
快速使用Bootstrap搭建传送带
May 06 Javascript
JavaScript:Array类型全面解析
May 19 Javascript
原生js实现淘宝购物车功能
Jun 23 Javascript
微信小程序中的swiper组件详解
Apr 14 Javascript
Django+Vue跨域环境配置详解
Jul 06 Javascript
浅谈webpack性能榨汁机(打包速度优化)
Jan 09 Javascript
JavaScript使用面向对象实现的拖拽功能详解
Jun 12 Javascript
vue.js 实现a标签href里添加参数
Nov 12 Javascript
ES6 async、await的基本使用方法示例
Jun 06 Javascript
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处理数据库数据如何将数据返回客户端并显示当前状态
2016/02/16 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
2009/10/24 Javascript
不一样的文字闪烁 轮番闪烁
2009/11/11 Javascript
jQuery入门问答 整理的几个常见的初学者问题
2010/02/22 Javascript
浅谈JavaScript编程语言的编码规范
2011/10/21 Javascript
文本框获得焦点和失去焦点的判断代码
2012/03/18 Javascript
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
2013/01/29 Javascript
判断一个对象是否为jquery对象的方法
2014/03/12 Javascript
jQuery取得设置清空select选择的文本与值
2014/07/08 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
2015/06/04 Javascript
简单总结JavaScript中的String字符串类型
2016/05/26 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
2017/02/14 Javascript
JS仿Base.js实现的继承示例
2017/04/07 Javascript
JS设计模式之访问者模式定义与用法分析
2018/02/05 Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
2018/02/11 Javascript
js中的 || 与 &amp;&amp; 运算符详解
2018/05/24 Javascript
详解vue-element Tree树形控件填坑路
2019/03/26 Javascript
python模拟登录百度贴吧(百度贴吧登录)实例
2013/12/18 Python
Python import用法以及与from...import的区别
2015/05/28 Python
详解Django中的权限和组以及消息
2015/07/23 Python
python中zip()方法应用实例分析
2016/04/16 Python
Python  pip安装lxml出错的问题解决办法
2017/02/10 Python
python机器学习之随机森林(七)
2018/03/26 Python
python如何求解两数的最大公约数
2018/09/27 Python
Pandas DataFrame数据的更改、插入新增的列和行的方法
2019/06/25 Python
pytorch实现从本地加载 .pth 格式模型
2020/02/14 Python
Tensorflow tf.nn.atrous_conv2d如何实现空洞卷积的
2020/04/20 Python
tensorflow从ckpt和从.pb文件读取变量的值方式
2020/05/26 Python
HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍
2013/01/31 HTML / CSS
Blank NYC官网:夹克、牛仔裤等
2020/12/16 全球购物
经典而简洁的婚礼主持词
2014/03/13 职场文书
电大毕业生自我鉴定
2014/04/10 职场文书
带香烟到学校抽的检讨书
2014/09/25 职场文书
国庆节标语大全
2014/10/08 职场文书
python实现求纯色彩图像的边框
2021/04/08 Python