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 相关文章推荐
让iframe子窗体取父窗体地址栏参数(querystring)
Oct 13 Javascript
jQuery插件实现屏蔽单个元素使用户无法点击
Apr 12 Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
Nov 04 Javascript
DOM基础教程之事件对象
Jan 20 Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
May 03 Javascript
Bootstrap缩略图的创建方法
Mar 22 Javascript
浅析node应用的timing-attack安全漏洞
Feb 28 Javascript
深入理解JS的事件绑定、事件流模型
May 13 Javascript
浅谈webpack devtool里的7种SourceMap模式
Jan 14 Javascript
详解key在Vue列表渲染时究竟起到了什么作用
Apr 20 Javascript
一文读懂ES7中的javascript修饰器
May 06 Javascript
对TypeScript库进行单元测试的方法
Jul 18 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中文URL编解码(urlencode()rawurlencode()
2010/07/03 PHP
PHP中数组合并的两种方法及区别介绍
2012/09/14 PHP
PHP得到mssql的存储过程的输出参数功能实现
2012/11/23 PHP
phpexcel导入excel数据使用方法实例
2013/12/24 PHP
php中switch与ifelse的效率区别及适用情况分析
2015/02/12 PHP
php获取、检查类名、函数名、方法名的函数方法
2015/06/25 PHP
php类的定义与继承用法实例
2015/07/07 PHP
ThinkPHP中数据操作案例分析
2015/09/27 PHP
[原创]php使用curl判断网页404(不存在)的方法
2016/06/23 PHP
关于PHP定时发送服务的解决办法
2017/04/23 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
Yii 框架使用Forms操作详解
2020/05/18 PHP
PHP var关键字相关原理及使用实例解析
2020/07/11 PHP
JS常用函数使用指南
2014/11/23 Javascript
在Node.js应用中使用Redis的方法简介
2015/06/24 Javascript
2016年最热门的15 款代码语法高亮工具,美化你的代码
2016/01/06 Javascript
原生js实现网易轮播图效果
2020/04/10 Javascript
Bootstrap中data-target 到底是什么
2017/02/14 Javascript
jQuery中$原理实例分析
2018/08/13 jQuery
原生js实现碰撞检测
2020/03/12 Javascript
[00:55]2015国际邀请赛中国区预选赛5月23日——28日约战上海
2015/05/25 DOTA
理解Python中的类与实例
2015/04/27 Python
Python+request+unittest实现接口测试框架集成实例
2018/03/16 Python
Python中if elif else及缩进的使用简述
2018/05/31 Python
python开发游戏的前期准备
2019/05/05 Python
python适合人工智能的理由和优势
2019/06/28 Python
pandas中的数据去重处理的实现方法
2020/02/10 Python
python实现将字符串中的数字提取出来然后求和
2020/04/02 Python
给keras层命名,并提取中间层输出值,保存到文档的实例
2020/05/23 Python
Html5新增标签与样式及让元素水平垂直居中
2019/07/11 HTML / CSS
高校学生干部的自我评价分享
2013/11/04 职场文书
销售顾问岗位职责
2014/02/25 职场文书
论文诚信承诺书
2014/05/23 职场文书
董存瑞观后感
2015/06/11 职场文书
2016年6.5世界环境日宣传活动总结
2016/04/01 职场文书
python元组打包和解包过程详解
2021/08/02 Python