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代码
Jan 28 Javascript
jQuery遍历DOM节点操作之filter()方法详解
Apr 14 Javascript
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
Jun 02 Javascript
jQuery实现的自定义滚动条实例详解
Sep 20 Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 jQuery
AngularJS之ionic 框架下实现 Localstorage本地存储
Apr 22 Javascript
vue中的event bus非父子组件通信解析
Oct 27 Javascript
JavaScript数据结构之双向链表定义与使用方法示例
Oct 27 Javascript
微信小程序实现tab切换效果
Nov 21 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
Feb 25 Javascript
vue自定义指令directive的使用方法
Apr 07 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
Jul 07 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开发工具
2015/11/09 PHP
PHP面向对象自动加载机制原理与用法分析
2016/10/14 PHP
JavaScript的document对象和window对象详解
2010/12/30 Javascript
Jquery插件easyUi表单验证提交(示例代码)
2013/12/30 Javascript
jquery toolbar与网页浮动工具条具体实现代码
2014/01/12 Javascript
jQuery的$.proxy()应用示例介绍
2014/04/03 Javascript
jquery实现的鼠标下拉滚动置顶效果
2014/07/24 Javascript
关于js里的this关键字的理解
2015/08/17 Javascript
js实现复选框的全选和取消全选效果
2017/01/03 Javascript
微信小程序 点击控件后选中其它反选实例详解
2017/02/21 Javascript
vue-cli构建项目下使用微信分享功能
2018/05/28 Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
2018/09/05 Javascript
详解webpack2异步加载套路
2018/09/14 Javascript
原来JS还可以这样拆箱转换详解
2019/02/01 Javascript
vue 单页应用和多页应用的优劣
2020/10/22 Javascript
基于JavaScript实现简单扫雷游戏
2021/01/02 Javascript
Python正则表达式经典入门教程
2017/05/22 Python
python join方法使用详解
2019/07/30 Python
Python计算两个矩形重合面积代码实例
2019/09/16 Python
开启Django博客的RSS功能的实现方法
2020/02/17 Python
Python: tkinter窗口屏幕居中,设置窗口最大,最小尺寸实例
2020/03/04 Python
python 解决pycharm运行py文件只有unittest选项的问题
2020/09/01 Python
Farfetch美国:奢侈品牌时尚购物平台
2019/05/02 全球购物
介绍一下HTTP、HTTPS和SSL
2012/12/16 面试题
药剂学专业应届生自荐信
2013/09/29 职场文书
委托证明的格式
2014/01/10 职场文书
征婚广告词
2014/03/17 职场文书
学校安全防火方案
2014/06/07 职场文书
世界读书日的活动方案
2014/08/20 职场文书
新郎新娘答谢词
2015/01/04 职场文书
巴黎圣母院读书笔记
2015/06/26 职场文书
优秀家长事迹材料(2016推荐版)
2016/02/29 职场文书
Python实现列表拼接和去重的三种方式
2021/07/02 Python
Redis三种集群模式详解
2021/10/05 Redis
python套接字socket通信
2022/04/01 Python
《帝国时代4》赛季预告 新增内容编译器可创造地图
2022/04/03 其他游戏