javascript能够回溯的打字机效果代码实例
本章节分享一段代码实例，它实现了打字机效果。
当打字完毕之后，还能够回溯到最初状态。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<script type="text/javascript">
window.onload=function(){
var i = 1, j = 1, html = '';
var timer = setInterval(add, 100);
function add() {
if (i <= 9) {
if (j < i) {
html = '<span>' + j + '*' + i + '=' + j * i + '</span>' + ' ';
}
else if (j === i) {
html = '<span>' + j + '*' + i + '=' + j * i + '</span><br/>';
i++;
j = 0;
}
j++;
document.write(html);
}
else if (i === 10) {
var span = document.getElementsByTagName('span');
if (span.length > 0) {
span[span.length - 1].remove();
}
}
}
}
</script>
</head>
<body>
</body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
从输出的结果可以看到，被乘数是所在的列，乘数是所在的行。
一.代码注释:
（1）.window.onload=function(){}，当文档内容完全加载完毕再去执行函数中的代码。
（2）.var i = 1, j = 1, html = ''，声明变量并赋值，后面会用到。
（3）.var timer = setInterval(add, 100)，使用定时器函数每隔100毫秒执行一次add函数。
（4）.function add() {},此函数是实现的核心代码。
（5）.if (i <= 9) {}，要输出九行。
（6）.if (j < i) {
html = '<span>' + j + '*' + i + '=' + j * i + '</span>' + ' ';
}，j表示列数，i表示行数,如果j小于i，那么说明当前行还要进行打字效果，比如第三行，就要输出3列，也就是说如果当前是第n行，那么此行就具有n列。
（7）.else if (j === i) {
html = '<span>' + j + '*' + i + '=' + j * i + '</span><br/>';
i++;
j = 0;
},如果j等于i，那么就说明当前行已经输出完毕，那么j就要重置为0，因为每一行的输出都是从第一列开始。
（8）.j++，列数自增。
（9）.document.write(html)，输出html字符串，也就是显示打印效果。
（10）.else if (i === 10) {
var span = document.getElementsByTagName('span');
if (span.length > 0) {
span[span.length - 1].remove();
}
}，这个就很简答了，删除span元素，也就是回溯效果。
二.相关阅读:
（1）.setInterval()可以参阅setInterval()一章节。
（2）.getElementsByTagName()可以参阅document.getElementsByTagName()一章节。
javascript能够回溯的打字机效果代码实例，这样的场景在实际项目中还是用的比较多的，关于javascript能够回溯的打字机效果代码实例就介绍到这了。
javascript能够回溯的打字机效果代码实例属于前端实例代码，有关更多实例代码大家可以查看。