前几次是正常的, 几次后, 每一个完整的输出内容就少一个字, 代码如下: {代码...}

问题出在这里，以后每次的innerHTML都会少一个字，所以再次调用 show 方法时句子已经不是完整的了。 if (**i <= code.length**) { //...... }

javascript - 使用js循环实现打字机效果, 当循环几次后输出的内容逐渐变少?

前几次是正常的, 几次后, 每一个完整的输出内容就少一个字, 代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>打字机效果</title>
    <style>
        .typewriter {
            width: 50rem;
            padding: 1.5rem 3rem;
            border: 1px solid #ccc;
            line-height: 1.5;
            font-size: 1.6rem;
            color: #333;
            margin: 5% auto;
        }
        @@keyframes flash {
            0% {
                visibility: visible;
            }
            100% {
                visibility: hidden;
            }
        }
        .typewriter:after {
            content: "_";
            animation: flash .6s steps(2, start) infinite;
        }
    </style>
</head>

<body>
    <p class="typewriter">
        1. Whatever is worth doing is worth doing well.<br />  任何值得做的，就把它做好。
    </p>
    <script>
    function show() {
        var typewriter = document.querySelector('.typewriter');
        var code = typewriter.innerHTML;
        var i = 0;
        typewriter.innerHTML = "";
        typeWriting();

        function typeWriting() {
            i++;
            if (i < code.length) {
                switch (code.charAt(i)) {
                    case '<':
                        i = code.indexOf(">", i);
                        break;
                    case '&':
                        i = code.indexOf(";", i);
                        break;
                }
                typewriter.innerHTML = code.substr(0, i);
                setTimeout(typeWriting, 150);
            } else {
                setTimeout(show, 2000);
            }
        }
    }
    window.onload = show;
    </script>
</body>

</html>

滿天的星座2755 天前574

javascript - 使用js循环实现打字机效果, 当循环几次后输出的内容逐渐变少?

全部回复(1)我来回复