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 相关文章推荐
分享XmlHttpRequest调用Webservice的一点心得
Jul 20 Javascript
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
Nov 12 Javascript
jquery 构造函数在表单提交过程中修改数据
May 25 Javascript
JS实现可关闭的对联广告效果代码
Sep 14 Javascript
浅析BootStrap栅格系统
Jun 07 Javascript
Bootstrap面板使用方法
Jan 16 Javascript
JS设计模式之惰性模式(二)
Sep 29 Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
Dec 20 Javascript
JavaScript中Object值合并方法详解
Dec 22 Javascript
vuex 的简单使用
Mar 22 Javascript
JS实现模糊查询带下拉匹配效果
Jun 21 Javascript
vue 点击展开显示更多(点击收起部分隐藏)
Apr 09 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
ThinkPHP数据操作方法总结
2015/09/28 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
PHP使用HTML5 FileApi实现Ajax上传文件功能示例
2019/07/01 PHP
Jquery ajax传递复杂参数给WebService的实现代码
2011/08/08 Javascript
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
2014/05/05 Javascript
JQuery中层次选择器用法实例详解
2015/05/18 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
2015/09/16 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
2016/05/18 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
2016/06/14 Javascript
基于JS模仿windows文件按名称排序效果
2016/06/29 Javascript
php 修改密码实现代码
2017/05/24 Javascript
Angular2生命周期钩子函数的详细介绍
2017/07/10 Javascript
微信小程序顶部可滚动导航效果
2017/10/31 Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
2018/08/16 Javascript
vue框架制作购物车小球动画效果实例代码
2019/09/26 Javascript
基于iview-admin实现动态路由的示例代码
2019/10/02 Javascript
通过python下载FTP上的文件夹的实现代码
2013/02/10 Python
python通过socket查询whois的方法
2015/07/18 Python
读取本地json文件,解析json(实例讲解)
2017/12/06 Python
PyCharm代码格式调整方法
2018/05/23 Python
对Python中for复合语句的使用示例讲解
2018/11/01 Python
python 使用 requests 模块发送http请求 的方法
2018/12/09 Python
python3 property装饰器实现原理与用法示例
2019/05/15 Python
Python接口自动化判断元素原理解析
2020/02/24 Python
pycharm解决关闭flask后依旧可以访问服务的问题
2020/04/03 Python
Sperry澳大利亚官网:源自美国帆船鞋创始品牌
2019/07/29 全球购物
军用级手机壳,专为冒险而建:Zizo Wireless
2019/08/07 全球购物
个人自我剖析材料
2014/02/07 职场文书
《社戏》教学反思
2014/04/15 职场文书
关于九一八事变的演讲稿2014
2014/09/17 职场文书
学校政风行风整改方案
2014/10/25 职场文书
2014年纪检部工作总结
2014/11/12 职场文书
工作态度检讨书范文
2015/05/06 职场文书
初中家长意见
2015/06/03 职场文书
用javascript制作qq注册动态页面
2021/04/14 Javascript
python和Appium的移动端多设备自动化测试框架
2022/04/26 Python