<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

     <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.9"></script>

 </head>

 <body>

 <div id="dear"></div>

 <script>

     var writeContent = 'DengYanBo I Love You Forver';//要书写的内容

     var  displayContent = $('#dear');//展示书写文字的容器

     var index = 0;//索引

     var length = writeContent.length;//书写内容的长度

     var tiemerName = null;//定时器的名字

     function start(){

         displayContent.text('');//清空展示容器的内容

         tiemerName=setInterval(function(){

             displayContent.append(writeContent.charAt(index));//charAt返回指定所应出的字符；

             if(index++ === length){//如果写道最后一个字符了，清除定时器，从第一个字符重新开始写；

                 clearInterval(tiemerName);//清除定时器

                 index = 0;

                 start()//回调，自己调用自己

             }

         },100);

     }

     start();

 </script>

 </body>

 </html>

使用typed.js实现页面上的写字功能的更多相关文章

  1. Progress.js – 为页面上的任意对象创建进度条效果

    Progress.js 是一个 JavaScript 和 CSS3 的库,它帮助开发人员为网页上的每个对象创建和管理进度条效果.你可以设计自己的模板,进度条或者干脆定制. 您可以使用 Progress ...

  2. JS 在页面上直接将json数据导出到excel，支持chrome,edge,IE10+,IE9,IE8,Safari,Firefox

    JS 在页面上直接将json数据导出到excel,支持chrome,edge,IE10+,IE9,IE8,Safari,Firefox <html> <head> </h ...

  3. 使用js在页面上新建文件夹

    使用js在页面上新建文件夹 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  4. 如何使用 js 检测页面上全局变量

    如何使用 js 检测页面上全局变量 js 检测页面全局变量脚本 <!DOCTYPE html> <html lang="zh-Hans"> <head ...

  5. js禁用页面上右键菜单、选中和复制

    有时候我们不想页面上的内容被人复制走,那么就可以使用js对页面进行设置,禁止右键菜单.禁止选中.禁止复制等功能可以有效的达到这个效果,js代码如下所示: /** * 禁用右键菜单 */ documen ...

  6. js检查页面上有无重复id的代码分享

    用js代码检查一个页面上是否用重复的id. 方法一: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" ...

  7. 如何用JS获取页面上的所有标签

    最近忙的一匹,忙着大保健,都来不及写博客,今天特意抽出点时间来写一写 前两天看到一个题,是问如何从页面上获取所有的标签的并查看他们的数量,感觉还是有点意思的,所以给大家来搞一下子 我们先来捋捋思路,那 ...

  8. JS 将页面上的表格导出为 Excel 文件

    如果在页面上展示了一个表格,想把这个表格导出为Excel文件,那么在要求不高的情况下,可以直接利用 JavaScript 的 Blob 和 Object URL 特性将表格导出.不过,这就是利用了 E ...

  9. js 在页面上模拟多选，蚂蚁线线框

    <html> <head></head> <style> body{padding-top:50px;padding-left:100px;paddin ...

随机推荐

  1. Ubuntu 12.04安装VMware Workstation8.0.3

    2012-06-18 12:52   Ubuntu安装VMware Workstation8.0.3   由于使用Ubuntu的人比较少,网上关于Ubuntu的资料也很少,笔者在安装VMware Wo ...

  2. 【DeepLearning】Exercise:Learning color features with Sparse Autoencoders

    Exercise:Learning color features with Sparse Autoencoders 习题链接:Exercise:Learning color features with ...

  3. HDU 4648 Magic Pen 6 （。。。。。。。。。。）

    Magic Pen 6 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others)Total ...

  4. 雷军：重刷ROM的“自我格式化”

    本文来源于:百度百家 作者:金错刀 2014-03-14 10:33:06 最近,跟一个前金山高管聊起雷军,特别是雷军的变化,她的感觉是:雷总岂止是变化,简直是格式化,甚至是把自己重刷了一遍ROM. ...

  5. MongoDB学习笔记（11）-- Index

    索引通常能够极大的提高查询的效率,如果没有索引,MongoDB在读取数据时必须扫描集合中的每个文件并选取那些符合查询条件的记录. 这种扫描全集合的查询效率是非常低的,特别在处理大量的数据时,查询可以要 ...

  6. API设计原则

    译序 Qt的设计水准在业界很有口碑,一致.易于掌握和强大的API是Qt最著名的优点之一.此文既是Qt官网上的API设计指导准则,也是Qt在API设计上的实践总结.虽然Qt用的是C++,但其中设计原则和 ...

  7. asp.net url址址中中文汉字参数传递乱码解决方法

    中文乱码是网站开发中会常碰到的问题,今天我们来讲一下关于url址址中中文汉字参数传递乱码解决方法,有需要的朋友可以参考下.在cs文件里传参的时候用UrlEncode: Response.Redirec ...

  8. 【蓝桥杯】PREV-21 回文数字

    题目链接:http://lx.lanqiao.org/problem.page? gpid=T113   历届试题 回文数字   时间限制:1.0s   内存限制:256.0MB      问题描写叙 ...

  9. 【转载】linux 测试机器端口连通性方法

    转载原文:http://blog.csdn.net/z1134145881/article/details/54706711 下面一一介绍: 1 telnet方法 2 wget方法 3 ssh方法 4 ...

  10. MySQL复制表结构、表数据

    1.复制表结构及数据到新表 CREATE TABLE 新表SELECT * FROM 旧表 这种方法会将oldtable中所有的内容都拷贝过来,当然我们可以用delete from newtable; ...