suchen

Heim  >  Fragen und Antworten  >  Hauptteil

javascript - Verwenden Sie eine JS-Schleife, um den Schreibmaschineneffekt zu erzielen. Nach mehreren Schleifen wird der Ausgabeinhalt allmählich kleiner?

Die ersten Male sind normal. Nach ein paar Malen ist der gesamte Ausgabeinhalt ein Wort weniger. Der Code lautet wie folgt: 

<!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>
滿天的星座滿天的星座2809 Tage vor595

Antworte allen(1)Ich werde antworten

  • 仅有的幸福

    仅有的幸福2017-05-18 11:00:45

    问题出在这里，以后每次的innerHTML都会少一个字，所以再次调用 show 方法时句子已经不是完整的了。

    if (**i <= code.length**) {
    //......
}

    Antwort
    0
  • StornierenAntwort