效果展示如下：
js实现打字特效
这是只用了4行关键JS实现的一个类似于打字的特效，给你一个不一样的思路! 点击这里可以直接去我的博客!
代码块如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js实现打字特效</title>
<!-- 移动设备 -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style type="text/css">
a{
text-decoration: none;
display: inline-block;
color: black;
font-size: 20px;
padding: 10px;
}
div{
width: 330px;
height: auto;
border: 1px solid #CCC;
margin: 10px auto;
padding: 10px;
text-indent: 10px;
border-radius: 10px;
box-shadow: 2px 2px 3px #CCC
}
#title{
display: none;
}
</style>
</head>
<body>
<span id="title">这是只用了4行关键JS实现的一个类似于打字的特效，给你一个不一样的思路! 点击这里可以直接去我的博客!</span>
<div>
<a href="https://blog.fxnws.com" id="text"></a>
</div>
<script type="text/javascript">
// html文字类似于打字特效
function typewriting(){
// 定义数字长度为零
var index=0;
// 获取文字内容，我这里直接在页面上写出来然后隐藏的，也可以动态加载哦
var word=document.getElementById("title").innerHTML;
// 封装任务
function type(){
// 获取打字在哪个位置，substring()方法提取字符串（获取到的word里）中介于两个指定下标之间的字符（起始为0，运行一次自增一次）。
document.getElementById("text").innerText = word.substring(0,index++);
}
setInterval(type, 100);
// 100毫秒调用一次type任务
}
typewriting();
// 执行typewriting
</script>
</body>
</html>
代码块右上角，点击复制，可以直接复制