html+js 实现打字效果:就像是把一句话里面的每一个字都依次打印出来。我这里是通过切片原字符串,然后覆盖之前内容来实现的,详见代码(可运行)。
<!DOCTYPE html>
<html>
<head>
<title>typing.html</title>
<style type="text/css">
#divTyping {
width: 300px;
height: 25px;
border: 2px solid #dddddd;
margin: 100px auto;
}
</style>
</head>
<!-- js 实现自动打字效果 -->
<body>
<div id="divTyping"></div>
<script type="text/javascript">
var str = "js 实现自动打字效果 的简单实现";
var i = 0;
function typing() {
var divTyping = document.getElementById("divTyping");
if (i <= str.length) {
// str.slice(start, end) 切片函数,切取数组中的从start到end的字符串,不修改原数组
// start 参数必须要有,end 可以没有,默认数组最后一个
divTyping.innerHTML = str.slice(0, i++) + "_";
setTimeout("typing()", 200); // 递归调用
} else {
divTyping.innerHTML = str; // 结束打字,移除光标
}
}
// 该函数实际上不是一个个输出,只是后面的长度多一的字符串覆盖前面的字符串
typing();
//typing1();
</script>
</body>
</html>
2019年9月25日更新: