Question

我想在一个段落上创建一个类型编写器效果，然后每隔10秒重复一次，但是我不希望屏幕尺寸小于768px时重复一次吗？

我创建了一个打字机函数，该函数使用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>

Answer 1

您忘记启动typeWriter（）函数。在JS代码的最后一行，添加

typeWriter();

，此开始有效。与添加onload相比，这是启动代码的更好方法。另外，您可以在body元素上添加onload。

https://codepen.io/KamilNaja/pen/rZBwge?editors=1010

Answer 2

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

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

通过这种方式，您应该不再在html中使用onload。混合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>

使用javascript键入效果不起作用

2 个答案: