JS实现的打字机效果完整实例

本文实例讲述了JS实现的打字机效果。分享给大家供大家参考，具体如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
    Remove this if you use the .htaccess -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>JS打字机效果</title>
    <meta name="description" content="">
    <meta name="author" content="Administrator">
    <meta name="viewport" content="width=device-width; initial-scale=1.0">
    <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
  <style type = "text/css">
   #main {
    width: 80%;
    height: 750px;
    margin: auto;
    padding: 10px;
    background: #cfe1ca;
    border: 10px outset #f9c6aa;
    line-height: 30px;
    color: #9f3c61;
    font-size: 18px;
   }
   p {
    text-indent: 30px;
   }
  </style>
  <script type = "text/javascript">
   var typeWriter = {
    msg: function(msg){
     return msg;
    },
    len: function(){
     return this.msg.length;
    },
    seq: 0,
    speed: 150,//打字时间(ms)
    type: function(){
     var _this = this;
     document.getElementById("main").innerHTML = _this.msg.substring(0, _this.seq);
     if (_this.seq == _this.len()) {
      _this.seq = 0;
       clearTimeout(t);
     }
     else {
      _this.seq++;
      var t = setTimeout(function(){_this.type()}, this.speed);
     }
    }
   }
   window.onload = function(){
    alert("welcome to http://www.jb51.net")
    var msg = "JS打字机效果 ，原理很简单：每次多获取一个待打出的字符串的值，输出，覆盖原来输出的内容即可";
    function getMsg(){
     return msg;
    }
    typeWriter.msg = getMsg(msg);
    typeWriter.type();
   }
  </script>
 </head>
 <body>
  <div id = "main"> </div>
 </body>
</html>

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • JavaScript模拟实现键盘打字效果

    $(function () { var input_type = { init:function ($obj) { this.name = $obj.html().split("") this.length = this.name.length; this.i = 0; }, pri:function () { var $this = this //在此处只能使用闭包,因为windown.settimeout使函数的this指向object windown,而非原型链的this对象.而

  • JavaScript打字小游戏代码

    JavaScript打字小游戏代码

    功能模块: 程序设计: 1.可选择游戏时间,显示倒计时 1.定义全局变量 2.可选择英文字母出现个数 2.控制游戏时间函数 3.统计得分 3.动画效果 4.菜单选项 4.设定字母图片出现的时间 5.判断函数 6.游戏菜单 7.游戏时间选项 8.显示游戏时间 9.游戏难度选项 10.游戏得分 先上效果图:(PS:美工是硬伤) 主要代码设计: 复制代码 代码如下: //-------全局变量------- var data={ "10":["<img src='images

  • js实现键盘自动打字效果

    最近在网上看到一个字符逐个出现的打字效果,觉得挺有趣的,想一想基本实现思路就是设置一个定时器逐然后逐个向容器中添加字符,于是就基于jQuery写了一个简单版的. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no,

  • JS实现简单的键盘打字的效果

    以代码形式实现过程分析: <html> <head> <title>打字效果</title> <meta http-equiv="Content-Type" Content="text/html;charset=gb2312" /> <style type="text/css"> body{ font-size:14px; font-color:#purple; font-w

  • JS实现在状态栏显示打字效果完整实例

    JS实现在状态栏显示打字效果完整实例

    本文实例讲述了JS实现在状态栏显示打字效果.分享给大家供大家参考,具体如下: 这里演示JS实现带有打字特效的状态栏,在状态栏显示打字效果的文字,注意,此效果存在浏览器兼容性问题,在IE7或更高的浏览器下貌似不显示效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-status-bar-show-txt-print-demo/ 具体代码如下: <html> <head> <script language="J

  • JS模拟键盘打字效果的方法

    JS模拟键盘打字效果的方法

    本文实例讲述了JS模拟键盘打字效果的方法.分享给大家供大家参考.具体如下: 这里使用JS模拟实现软键盘及打字效果,点击软键盘年的字母键,文本框中即可显示文字,像是键盘打字的效果,美工不太好,没怎么美化,CSS高手可美化一下按钮,看上去还挺不错吧,我觉得. 先来看看运行效果图: 具体代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb23

  • JS实现的自动打字效果示例

    JS实现的自动打字效果示例

    本文实例讲述了JS实现的自动打字效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>js typing</title> </head> <body> <div id='divTyping'></div> <script> var str = 'js 实现的 打字效果,感

  • javascript实现自动输出文本（打字特效）

    主要利用了setTimeout(),递归和String.substring(); 做出的效果就像是有一个打字员在打字. <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name=&quo

  • 原生js实现打字动画游戏

    这是昨天用原生的js写的打字动画游戏,主要用的间歇定时器,对象,还有Math方法,感觉还行,主要看消除字母的时间快慢,但是也有bug,就是字母都是一次性生成的,所以一开始,看起来感觉会有种爆炸的感觉,如果能够一次性生成一批,然后分批往下掉就好了,求大神帮忙改改,大家也可以参考参考. <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <ti

  • 仿打字特效的JS逐字出现的信息文字

    逐字出现的信息文字 function makeArray() { this.length = makeArray.arguments.length for (var i = 0; i 3) y=0; document.form1.news2.value=' '; msg1 = fArray[y]; x=0; } document.form1.news2.value=msg1.substring(0,x); x+=1; setTimeout("newsFeed() ",200); } [

  • Js 打字效果 逐一出现的文字

    第一种:打印多个文字 逐个出现的文字 var layers =document.layers,style=document.all,both=layers||style,idme=908601; if(layers){layerRef='document.layers';styleRef ='';}if(style){layerRef='document.all';styleRef = '.style';} function writeOnText(obj,str){ if(layers)wit

  • javascript 打字效果的文字特效

    本节代码主要使用了 onMousedown 事件和 event.button 属性,主要功能和用法如下. • setTimeout 方法,在执行时是在载入后延迟指定时间后,去执行一次表达式,仅执行一次. • charAt 方法返回一个字符值,该字符位于指定索引位置.字符串中的第一个字符的索引为0,第二个的索引为1,等等.超出有效范围的索引值返回空字符串. 打字效果的文字特效 var layers = document.layers; var style = document.all; var b

  • JavaScript实现打字效果的方法

    本文实例讲述了JavaScript实现打字效果的方法.分享给大家供大家参考.具体实现方法如下: <input type="button" onclick='start("高考了")' value="start"/> <input type="text" id="here" /> <script type="text/javascript"> funct

随机推荐