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 相关文章推荐
Jsonp 跨域的原理以及Jquery的解决方案
Jun 27 Javascript
Angular2 环境配置详细介绍
Sep 21 Javascript
探究Vue.js 2.0新增的虚拟DOM
Oct 20 Javascript
jQuery的ready方法实现原理分析
Oct 26 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
Apr 26 Javascript
Vue组件通信之Bus的具体使用
Dec 28 Javascript
vue使用jsonp抓取qq音乐数据的方法
Jun 21 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
浅谈发布订阅模式与观察者模式
Apr 09 Javascript
微信小程序如何实现在线客服功能
Oct 16 Javascript
JavaScript实现通讯录功能
Dec 27 Javascript
如何让vue长列表快速加载
Mar 29 Vue.js
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目录管理函数小结
2008/09/10 PHP
php foreach、while性能比较
2009/10/15 PHP
php中实现可以返回多个值的函数实例
2015/03/21 PHP
PHP对称加密函数实现数据的加密解密
2016/10/27 PHP
PHP实现微信退款的方法示例
2019/03/26 PHP
PHP 并发场景的几种解决方案
2019/06/14 PHP
jQuery.ajax 用户登录验证代码
2010/10/29 Javascript
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
2013/03/22 Javascript
AngularJS基础 ng-src 指令简单示例
2016/08/03 Javascript
ajax异步请求详解
2017/01/06 Javascript
Vue.js学习之过滤器详解
2017/01/22 Javascript
React中ES5与ES6写法的区别总结
2017/04/21 Javascript
vue中简单弹框dialog的实现方法
2018/02/26 Javascript
vue实现循环切换动画
2018/10/17 Javascript
JavaScript定时器设置、使用与倒计时案例详解
2019/07/08 Javascript
javascript简单实现深浅拷贝过程详解
2019/10/08 Javascript
vue项目中监听手机物理返回键的实现
2020/01/18 Javascript
[01:21]DOTA2 新英雄 森海飞霞
2020/12/18 DOTA
Python+django实现文件上传
2016/01/17 Python
关于Python正则表达式 findall函数问题详解
2018/03/22 Python
转换科学计数法的数值字符串为decimal类型的方法
2018/07/16 Python
python交换两个变量的值方法
2019/01/12 Python
Python面向对象之Web静态服务器
2019/09/03 Python
python 实现单通道转3通道
2019/12/03 Python
Tensorflow tf.dynamic_partition矩阵拆分示例(Python3)
2020/02/07 Python
优秀毕业生自我鉴定
2014/02/11 职场文书
继承公证书样本
2014/04/04 职场文书
技能比武方案
2014/05/21 职场文书
小学社团活动总结
2014/06/27 职场文书
社区创先争优承诺书
2014/08/30 职场文书
2014年学校法制宣传日活动总结
2014/11/01 职场文书
走群众路线学习笔记
2014/11/06 职场文书
导游词之包公祠
2019/11/25 职场文书
浅谈Redis主从复制以及主从复制原理
2021/05/29 Redis
MySQL外键约束(FOREIGN KEY)案例讲解
2021/08/23 MySQL
浅谈Redis跟MySQL的双写问题解决方案
2022/02/24 Redis