<!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. Linux-非结构化数据同步-Linux下Rsync+Rsync实现非结构化增量差异数据的同步2

    说明: 操作系统:CentOS 5.X 源服务器:192.168.21.129 目标服务器:192.168.21.127,192.168.21.128 目的:把源服务器上/home/www.osyun ...

  2. SaltStack 入门到精通第二篇：Salt-master配置文件详解

    SaltStack 入门到精通第二篇:Salt-master配置文件详解     转自(coocla):http://blog.coocla.org/301.html 原本想要重新翻译salt-mas ...

  3. MachineLearning之Logistic回归

    一.概述 假设现在有一些数据点,我们用一条直线对这些点进行拟合(该线称为最佳拟合直线),这个拟合过程就称为回归: 利用Logistic回归进行分类的主要思想是: 根据现有数据对分类边界线建立回归公式, ...

  4. 【C#】浅析C#中的日期处理

    1.字符串转化为日期 1.1第一种方式 使用 Convert.toDateTime 方法,该方法有很多重载方法,这里笔者就介绍两个常用的重载方法. 第一种: 使用: Convert.ToDateTim ...

  5. logstash向elasticsearch写入数据，如何指定多个数据template

    之前在配置从logstash写数据到elasticsearch时,指定单个数据模板没有问题,但是在配置多个数据模板时候,总是不成功,后来找了很多资料,终于找到解决办法,就是要多加一个配置项: temp ...

  6. Oracle VPD策略示例

    1.未创建前使用oe用户登录查询: SQL> select * from orders; ORDER_ID ORDER_DATE ORDER_MO CUSTOMER_ID ORDER_STATU ...

  7. python -- 装饰器入门

    用例: 统计函数执行需要的时间 假设我们执行的一段代码的运行时间比我们预想的时间要久,而这段代码块有多个函数调用组成,我们有理由相信至少是其中的一个函数调用导致整个代码块产生了瓶颈.我们如何去发现导致 ...

  8. 大批量导入数据的SqlBulkCopy类

     SqlBulkCopy 这个类用于数据库大批量的数据传递,通常用于新旧数据库之间的更新.关键的一点是,即使表结构不同,也可以通过表字段或者字段位置建立映射关系,将所需的数据导入到目标数据库. 下面代 ...

  9. 常用的apache commons工具，直接使用，便于快速开发

    详情 :http://commons.apache.org/ Components Description Latest Version Released Attributes Runtime API ...

  10. oracle 定时任务例子【项目例子】

    说明:请在plsql工具的命令窗口中,依次按步骤执行如下脚本   (1)建立备份表 my_test_log2create table my_test_log2 as select * from my_ ...