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下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
Oct 22 Javascript
JS 排序输出实现table行号自增前端动态生成的tr
Aug 13 Javascript
jQuery右侧选项卡焦点图片轮播特效代码分享
Sep 05 Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
Oct 28 Javascript
详解JavaScript对象的深浅复制
Mar 30 Javascript
Node.js中看JavaScript的引用
Apr 22 Javascript
node.js中debug模块的简单介绍与使用
Apr 25 Javascript
微信JSSDK调用微信扫一扫功能的方法
Jul 25 Javascript
vue.js使用v-model指令实现的数据双向绑定功能示例
May 22 Javascript
深入理解Antd-Select组件的用法
Feb 25 Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
Sep 24 Javascript
利用JavaScript写一个简单计算器
Nov 27 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学习之 认清变量的作用范围
2010/01/26 PHP
PHP操作mysql函数详解,mysql和php交互函数
2011/05/19 PHP
php实现文件下载更能介绍
2012/11/23 PHP
ECSHOP在PHP5.5及高版本上报错的解决方法
2015/08/31 PHP
深入理解php printf() 输出格式化的字符串
2016/05/23 PHP
定义JavaScript二维数组采用定义数组的数组来实现
2012/12/09 Javascript
了解了这些才能开始发挥jQuery的威力
2013/10/10 Javascript
纯css+js写的一个简单的tab标签页带样式
2014/01/28 Javascript
javascript获取dom的下一个节点方法
2014/09/05 Javascript
VueJS事件处理器v-on的使用方法
2017/09/27 Javascript
vue-cli2.9.3 详细教程
2018/04/23 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
2018/07/10 Javascript
Nodejs封装类似express框架的路由实例详解
2020/01/05 NodeJs
vue3.0 上手体验
2020/09/21 Javascript
[01:52]深扒TI7聊天轮盘语音出处7
2017/05/11 DOTA
python类装饰器用法实例
2015/06/04 Python
Python获取系统所有进程PID及进程名称的方法示例
2018/05/24 Python
使用python实现语音文件的特征提取方法
2019/01/09 Python
python实现控制台打印的方法
2019/01/12 Python
Python静态类型检查新工具之pyright 使用指南
2019/04/26 Python
pytz格式化北京时间多出6分钟问题的解决方法
2019/06/21 Python
Python3 sys.argv[ ]用法详解
2019/10/24 Python
Python元组 tuple的概念与基本操作详解【定义、创建、访问、计数、推导式等】
2019/10/30 Python
Python散点图与折线图绘制过程解析
2019/11/30 Python
django框架中间件原理与用法详解
2019/12/10 Python
python实现opencv+scoket网络实时图传
2020/03/20 Python
css3动画效果抖动解决方法
2018/09/03 HTML / CSS
波兰补充商店:Muscle Power
2018/10/29 全球购物
数控专业推荐信范文
2013/12/02 职场文书
办公室人员先进事迹
2014/01/27 职场文书
2014年国庆标语
2014/06/30 职场文书
社区党务工作总结2015
2015/05/19 职场文书
刑事辩护词范文
2015/05/21 职场文书
世界各国短波电台对东亚播送时间频率表(SW)
2021/06/28 无线电
mysql定时自动备份数据库的方法步骤
2021/07/07 MySQL
MySQL数据库如何查看表占用空间大小
2022/06/10 MySQL