使用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 ...
随机推荐
- 要成为linux网站运维工程师必须要掌握的技能
要成为linux网站运维工程师必须要掌握的技能 2015-07-27 发表 老男孩点评:感谢此文的作者,写的非常到位,值得入门的初学者认真看看 我是一名linux运维工程师,确切的说是网站运维工程师, ...
- Linux 操作MySQL常用命令行(转)
注意:MySQL中每个命令后都要以分号:结尾. 1.显示数据库 mysql> show databases; +----------+ | Database | +----------+ | m ...
- 指尖下的js ——多触式web前端开发之二:处理简单手势(转)
这篇文章将描述多触式网页开发中对手势(Gesture)事件的处理. 水果设备中的Gesture,广义的说包括手指点击(click),轻拂(flick),双击(double-click),两只手 ...
- 【MySQL】MySQL之MySQL常用的函数方法
MySQL常用函数 本篇主要总结了一些在使用MySQL数据库中常用的函数,本篇大部分都是以实例作为讲解,如果有什么建议或者意见欢迎前来打扰. limit Select * from table ord ...
- HTML5无刷新修改URL
HTML5新添加了两个api分别是pushState和replaceState,DOM中的window对象通过window.history方法提供了对浏览器历史记录的读取,可以在用户的访问记录中前进和 ...
- SLA等级那些9的实际意义
1. 重要的系统起码要设计达到99.9%的可靠性吧. 俗称3个9,这是什么意思呢? (1-99.9%)*365*24=8.76小时,表示该软件系统在连续运行1年时间里最多可能的业务中断时间是8.76小 ...
- Spring-MVC配置Gson做为Message Converter解析Json
Spring-MVC配置Gson做为Message Converter解析Json 在学习Spring的时候看到可以使用@RequestBody 和@ResponseBody注解来是的Spring自动 ...
- adb 切换android输入法
自动化测试执行时,使用了appium输入法,再手动使用时,需要进入设置里面进行切换.adb 也提供了一条命令使用命令切换 1.找出android里面有多少输入法:adb shell ime list ...
- js获取checkbox复选框获取选中的选项
js获取checkbox复选框获取选中的选项 分享下javascript获取checkbox 复选框获取选中的选项的方法. 有关javascript 获取checkbox复选框的实例数不胜数.js实现 ...
- 网页与APP中那些优美的登陆表单
我从Dribbble收集了20个漂亮的登陆表单案例.希望你看后能从中受益,并对你以后的登陆表单设计有帮助.设计一个登陆表单是非常容易,但大多设计都很糟糕.毫无亮点.无论如何,这篇Dribbble案例集 ...