<!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. MAVEN 搭建APPFUSE

    2010-05-21  利用Maven构建appfuse. 步骤如下: 1)Maven下载,下载apache-maven-2.2.1-bin.zip 下载地址:http://apache.freela ...

  2. CSS特效(弧光效果)

    代码很简单, 根据需要修改标签class和弧光效果的宽高位置就可以了. <!DOCTYPE html> <html lang="en"> <head& ...

  3. 让硬盘灯不再狂闪，调整Win7系统绝技(转)

    让硬盘灯不再狂闪,调整Win7系统绝技! Win7对硬盘的大量读写确实令人头疼,Win7虽然快,但这是以损耗我们的硬件作为代价的,特别是Win7系统中内置的几种系统服务,对普通用户没有多大的用处,但是 ...

  4. Spring4+Hibernate4事务小记

    学习Spring+Hibernate,非常强大的框架,为了追新,就直接从最高版本开始学习了,这要冒很大的风险,因为网上可查到的资料大多是针对旧版本的,比如Spring3,Hibernate3. 根据我 ...

  5. Debug 路漫漫-03

    Debug 路漫漫-03:SVD++的 Matlab 版本 SVD++ 的 pu 这一项: 圈圈中的这一项,它既然要和pu 相加 的话 ,那么,它的维度也应该是 m*K.(就是维度和Pu一致的 . 而 ...

  6. syslog远程日志存储/514端口【转】

    昨天在抓包的时候,发现在514端口,有SYSLOG字段的东西,不知道是用来干啥的,现在来分析一下: 其实他是在电脑间用了syslog远程日志存储,他用udp监控了514端口的数据流,之后收集整理日志: ...

  7. Spring使用内存数据库

    有时候为了做些测试需要创建数据库及相关表,安装MySQL等轻量数据库虽然简单但还是有点麻烦?而且用于自己临时测试的数据库对象一般不会被多次使用,还是浪费?内存数据库结合ORM可以很好解决这个问题. H ...

  8. Android--------从一个包中的Avtivity创建另外另外一个包的Context

    Android中有Context的概念,想必大家都知道.Context可以做很多事情,打开activity.发送广播.打开本包下文件夹和数据库.获取classLoader.获取资源等等.如果我们得到了 ...

  9. Mac 安装任何来源的文件

    1.Mac 安装任何来源的文件 安装软件提示文件损坏怎么处理,打开 DMG 文件提示损坏怎么处理,来自不信任的开发者怎么处理,macOS Sierra 如何安装任何来源的文件. 非常肯定的告诉您不是我 ...

  10. JavaScript日历控件开发 C# 读取 appconfig文件配置数据库连接字符串，和配置文件 List<T>.ForEach 调用异步方法的意外 ef 增加或者更新的习惯思维 asp.net core导入excel 一个二级联动

    JavaScript日历控件开发   概述 在开篇之前,先附上日历的代码地址和演示地址,代码是本文要分析的代码,演示效果是本文要实现的效果代码地址:https://github.com/aspwebc ...