var s = 'Hello World! Hello World! Hello World!';
var con = $('.container');
var index = 0;
var length = s.length;
var tId = null; function start(){
con.text(''); tId=setInterval(function(){
con.append(s.charAt(index));
if(index++ === length){
clearInterval(tId);
index = 0;
start()
}
},100);
} start();

参考:http://www.cnblogs.com/dolphinX/p/4087817.html

js实现打字机效果的更多相关文章

  1. js打字机效果实现

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>打 ...

  2. 原生js实现简单打字机效果

    快过年了,公司基本没活,闲着也是闲着,就写了一个 打字机效果玩玩,感觉挺有意思的. 具体代码 请参见我的github,请戳这里 预览效果,请戳这里

  3. css3线条围绕跑马+jquery打字机效果

    原文地址:css3线条围绕跑马+jquery打字机效果 有图有真相,今天偶然看到了一种效果,仔细看了下,发现它是用css的clip+css3的动画实现的,简直叼.于是自己拿来了前一阵子写的打字机效果, ...

  4. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  5. 用js实现动画效果核心方式

    为了做好导航菜单,有时候需要在菜单下拉的时候实现动画效果,所以这几天就研究了研究如何用js实现动画效果,实现动画核心要用到两个函数,一个是setTimeOut,另一个是setInterval. 下边我 ...

  6. js拖拽效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 原生JS实现分页效果2.0(新增了上一页和下一页,添加当前元素样式)

    虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang=&qu ...

  8. 原生JS实现分页效果1.0

    不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en">&l ...

  9. 使用JS实现手风琴效果

    想要实现简单的手风琴切换效果,需要使用JS实现,如下是使用javascript源码实现,后续会更新使用jQuery实现. 1. 先进行简单的布局:我们可以再ul下添加几个li实现html的简单布局,再 ...

随机推荐

  1. DTrace Oracle Database

    http://d.hatena.ne.jp/yohei-a/20100515/1273954199 DTrace で Oracle Database のサーバー・プロセスをトレースしてみた Oracl ...

  2. [zlib]_[0基础]_[使用Zlib完整解压zip内容]

    场景: 1. 解压文件一般用在下载了一个zip文件之后解压,或者分析某个文件须要解压的操作上. 2. 解压文件,特别是解压带目录的zip文件往往系统没有提供这类Win32 API,当然C#自带库能解压 ...

  3. GridView数据绑定控件的模版列时设置显示的格式

    形式 语法 结果 数字 {0:N2} 12.36   数字 {0:N0} 13   货币 {0:c2} $12.36   货币 {0:c4} $12.3656   货币 "¥{0:N2}&q ...

  4. jQuery中的:input选择器

    jQuery中的:input选择器 jQuery中的:input选择器包含input, textarea, select 和 button这些标签. <!DOCTYPE html> < ...

  5. 重新认识一遍JavaScript - 2

    1.JavaScript没有Java和C中的int.double,怎么识别这些类型的呢?或者说不支持 问:你认为呢? 答:var 支持所有数据类型(int.double.string),取决于你输入的 ...

  6. centos7+ 安装Docker 17.03.2

    cnetos7 安装 docker17.03.2 升级内核 http://m.blog.csdn.net/article/details?id=52047780 注意切换内核时查看 新内核位置 awk ...

  7. scheme语言编写执行

    scheme是lisp的一种 编辑器能够用emacs.网上有非常多教导怎样编写的 (begin (display "hello") (newline)) 编写完以.scm保存,这里 ...

  8. java性能监控工具jconsole-windows

    jconsole Starts a graphical console that lets you monitor and manage Java applications. Synopsis jco ...

  9. AVOS Cloud 技术支持系统开源了

    非常高兴跟大家说.工单系统(技术支持系统)开源了.代码托管在了Github上. 假设还未见识过工单系统,请移步于 https://ticket.avosapps.com/ 这个系统是用 AVOS Cl ...

  10. 【转载】C#扫盲之:带你掌握C#的扩展方法、以及探讨扩展方法的本质、注意事项

    1.为什么需要扩展方法 .NET3.5给我们提供了扩展方法的概念,它的功能是在不修改要添加类型的原有结构时,允许你为类或结构添加新方法. 思考:那么究竟为什么需要扩展方法呢,为什么不直接修改原有类型呢 ...