使用typed.js实现页面上的写字功能
<!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实现页面上的写字功能的更多相关文章
- Progress.js – 为页面上的任意对象创建进度条效果
Progress.js 是一个 JavaScript 和 CSS3 的库,它帮助开发人员为网页上的每个对象创建和管理进度条效果.你可以设计自己的模板,进度条或者干脆定制. 您可以使用 Progress ...
- JS 在页面上直接将json数据导出到excel,支持chrome,edge,IE10+,IE9,IE8,Safari,Firefox
JS 在页面上直接将json数据导出到excel,支持chrome,edge,IE10+,IE9,IE8,Safari,Firefox <html> <head> </h ...
- 使用js在页面上新建文件夹
使用js在页面上新建文件夹 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- 如何使用 js 检测页面上全局变量
如何使用 js 检测页面上全局变量 js 检测页面全局变量脚本 <!DOCTYPE html> <html lang="zh-Hans"> <head ...
- js禁用页面上右键菜单、选中和复制
有时候我们不想页面上的内容被人复制走,那么就可以使用js对页面进行设置,禁止右键菜单.禁止选中.禁止复制等功能可以有效的达到这个效果,js代码如下所示: /** * 禁用右键菜单 */ documen ...
- js检查页面上有无重复id的代码分享
用js代码检查一个页面上是否用重复的id. 方法一: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" ...
- 如何用JS获取页面上的所有标签
最近忙的一匹,忙着大保健,都来不及写博客,今天特意抽出点时间来写一写 前两天看到一个题,是问如何从页面上获取所有的标签的并查看他们的数量,感觉还是有点意思的,所以给大家来搞一下子 我们先来捋捋思路,那 ...
- JS 将页面上的表格导出为 Excel 文件
如果在页面上展示了一个表格,想把这个表格导出为Excel文件,那么在要求不高的情况下,可以直接利用 JavaScript 的 Blob 和 Object URL 特性将表格导出.不过,这就是利用了 E ...
- js 在页面上模拟多选,蚂蚁线线框
<html> <head></head> <style> body{padding-top:50px;padding-left:100px;paddin ...
随机推荐
- webview中事件的用法
封装 MBProgressHud ==================================== #import "MBProgressHUD.h" @interface ...
- web安全之渗透测试
本次渗透测试使用工具列表如下: 漏洞扫描器 (主机/Web) 绿盟RAS漏洞扫描器 商用 端口扫描器 NMAP 开源 网络抓包 Fiddler 开源 暴力破解工具 Hydra 开源 数据库注入工具 S ...
- IOS的动态性
IOS的动态性主要来自以下方面的特性:动态类型,动态绑定,动态载入,SEL类型. 1.IOS的动态类型:(强类型)id可以在代码运行时判断对象的类型.使用id类型(又称强类型)可以在运行的时候使用任何 ...
- Jquery 数组操作(转)
在jquery中处理JSON数组的情况中遍历用到的比较多,但是用添加移除这些好像不是太多. 今天试过json[i].remove(),json.remove(i)之后都不行,看网页的DOM对象中好像J ...
- Linux下面安装RabbitMQ Cluster
安装rabbitmq cluster: 设置 Erlang Cookie安装完RabbitMQ之后,在第一台机器上面启动RabbitMQ,然后在停止.复制node1上的/var/lib/rabbitm ...
- Junit 4.x 单元测试,参数化测试,套件测试 实例
对下面三个类进行单元测试 ,组成套件测试. public class Calculate { public int add(int a, int b) { return a + b; } public ...
- 跟我学SharePoint 2013视频培训课程——理解SharePoint网站的体系结构(3)
课程简介 第三天,理解SharePoint 2013 网站的体系结构 视频 SharePoint 2013 交流群 41032413
- Maven for Eclipse 第二章 ——安装 m2eclipse插件
m2eclipse 是一个提供了 Maven 与 Eclipse 整合的插件.它的意图是桥接上 Maven 和 Eclipse 之间的缺口.通过 Maven 原型提供的简单直白的接口创建项目,它使 M ...
- apache apr的编译和引用
各种巧合吧,需要从JAVA转C,经过这一段时间的心理折磨,还是决定先把精力放到C上. 想快速的提高自己,学习相关语言的经典的源码是唯一的“捷径”,从Apache apr开始吧. 一.下载源代码 官网地 ...
- SQL SERVER数据库维护与重建索引
第一步:查看是否需要维护,查看扫描密度/Scan Density是否为100% declare @table_id int set @table_id=object_id('表名') dbcc sho ...