时间戳

首页 > 解决方案 > 使用javascript的打字效果不起作用

javascript - 使用javascript的打字效果不起作用

问题描述

我想在段落上创建一个打字机效果并在每 10 秒后重复一次，但如果屏幕尺寸小于 768 像素，我不希望它重复？

我创建了一个打字机函数，它使用 setTimeout() 函数缓慢地打印单词，当整个段落被打印时，它会等待 5 秒再次从头开始打印。

我写了这段代码，但它不起作用。

<!DOCTYPE html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style type="text/css">
        .about p{
            color: #000;
            font-size: 22px;
        }
    </style>
</head>
<body>
    <div class="about"  onload="typeWriter();">
        <p id="text"></p>
    </div>
    <script>
        var i = 0;
        var w = window.matchMedia("(min-width: 768px)");
        var txt = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ';
        var speed = 50;
        function typeWriter() {
            if (i < txt.length) {
                document.getElementById("text").innerHTML += txt.charAt(i);
                i++;
                setTimeout(typeWriter, speed);
            }
            else{
                rep(w);
                w.addListener(rep);
            }
        }
        function rep(w) {
            if (w.matches) {
                setTimeout(function(){
                    i = 0;
                    speed = 50; 
                    document.getElementById("text").innerHTML = '';
                    setTimeout(typeWriter, speed);
                }, 5000);
            }
        }
    </script>
</body>
</html>

标签： javascriptjquery

解决方案

onload不适用于流动元件。如W3中所述，只有以下元素有效。

<body>, <frame>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>

顺便说一句，你不应该再onload在 html 中使用。混合 HTML 和 javascript 不是一个好习惯。有时，网页中已经存在一个window.onload功能并覆盖您的onload（这很常见。）

因此，

var i = 0;
var w = window.matchMedia("(min-width: 768px)");
var txt = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ';
var speed = 50;
function typeWriter() {
    if (i < txt.length) {
        document.getElementById("text").innerHTML += txt.charAt(i);
        i++;
        setTimeout(typeWriter, speed);
    }
    else{
        rep(w);
        w.addListener(rep);
    }
}
function rep(w) {
    if (w.matches) {
        setTimeout(function(){
            i = 0;
            speed = 50; 
            document.getElementById("text").innerHTML = '';
            setTimeout(typeWriter, speed);
        }, 5000);
    }
}
var x = document.getElementById("about");
x.addEventListener("load", typeWriter); //This is not working as div has no sign of loading

window.addEventListener("load", typeWriter); //But window has. Try comment this, it will no longer work.)
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style type="text/css">
        .about p{
            color: #000;
            font-size: 22px;
        }
    </style>
</head>
<body>
    <div id="about">
        <p id="text"></p>
    </div>
</body>

推荐阅读