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. [Bug]由于代码已经过优化或者本机框架位于调用堆栈之上,无法计算表达式的值"的解决方法(转)

    原因 如果使用 Response.End.Response.Redirect 或 Server.Transfer 方法,将出现 ThreadAbortException 异常.您可以使用 try-ca ...

  2. android状态栏总结

    针对状态栏的操作,只针对4.4kitKat(含)以上的机型,部分国产rom会失效,目前发现的有华为的EMUI Activity必须是noActionbar主题 本文基于StatusBarUtils略作 ...

  3. Samp免流软件以及地铁跑酷的自校验分析

    [文章标题]:Samp免流软件以及地铁跑酷的自校验分析 [文章作者]: Ericky [作者博客]: http://blog.csdn.net/hk9259 [下载地址]: 自行百度 [保护方式]: ...

  4. 树状数组求最大值 (RMQ with Shifts)

    代码: #include <iostream> #include <stdio.h> #include <string.h> #include <stdlib ...

  5. Failure [INSTALL_FAILED_ALREADY_EXISTS]

    1.发生原因 做unity开发的同事说apk无法安装,要我帮忙看下,然后我通过命令adb install安装apk,出现此提示 2.解决过程 首先想到的仍然是安装包已存在的问题,结果使用清理类软件清理 ...

  6. VueJS处理逻辑指令:v-if

    HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...

  7. CentOS 7.2 , YUM 方式安装VSC

    1.引入VSC站点key和repo地址 sudo rpm --import https://packages.microsoft.com/keys/microsoft.asc sudo sh -c ' ...

  8. 【Web探索之旅】第三部分第一课:server

    wx_fmt=jpeg" alt="0? wx_fmt=jpeg" style="height:auto"> 内容简单介绍 .第三部分第一课:s ...

  9. ios 使用自定义字体

    本文转载至 http://blog.csdn.net/yesjava/article/details/8447596   1.下载要使用的自定义字体,格式通常为ttf.otf文件.这里假设是nokia ...

  10. 2809: [Apio2012]dispatching

    2809: [Apio2012]dispatching Time Limit: 10 Sec  Memory Limit: 128 MB Submit: 3102  Solved: 1641 [Sub ...