Question

好的，对于学校的项目，我们想要制作一个简单的基于Web的应用程序。我正在使用cordova，但我遇到了jquery的一些困难。我们的想法是创建一个类似控制台的动画来显示文本，因此每个角色都会出现文本。

这是我的index.html

<!DOCTYPE html>
<html>
    <head>
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

        <link rel="stylesheet" type="text/css" href"index.css" />
        <link rel="stylesheet" type="text/css" href"css/jquery.mobile-1.4.5.css" />

        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
        <script type="text/javascript" src="js/jquery.mobile-1.4.5.js"></script>

        <script language="javascript">
            $(document).ready(function() {

                var text = "example text";

                for (i = 0; i < text.length; i++) {
                    setTimeout(function(){
                        $("#text").text(text.substr(0, i+1));
                    }, i * 500);
                }
            });
        </script>

        <title>TEST</title>
    </head>
    <body>

        <div data-role="page" data-theme="a" id="Page1">
            <div data-role="content" data-theme="a" id="Page1_Content" >
                <label id="text"></label>
            </div>
        </div>

    </body>
</html>

所以我使用一些javascript代码循环遍历示例文本的每个字符，并将标签中的文本更改为示例文本的子字符串。

但是当我在设备上运行时，文本会立即出现。

编辑：

因此我将其更改为Canvas的代码，但现在文本根本没有出现。我很可能错过了分号或其他东西，现在感觉很愚蠢:(

<!DOCTYPE html>
<html>

    <head>
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">

        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

        <link rel="stylesheet" type="text/css" href="css/index.css">

        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
        <script type="text/javascript" src="js/jquery.mobile-1.4.5.js"></script>

        <script type="text/javascript">
            $(document).ready(function () {

                var text = "example text";
                var i = 0;

                var consoleTyper = setInterval(function () {
                    if (i != text.length) {
                        i += 1;
                        $("#text").text(text.substr(0, i));
                    }
                    else
                    {
                        clearInterval(consoleTyper);   
                    }

                    console.log(i);
                }, 50);
            });
        </script>

        <title>B.O.X.</title>
    </head>

    <body>
        <div id="text"></div>
    </body>

</html>

Answer 1

jsFiddle：https://jsfiddle.net/35j178ho/

javascript

$(document).ready(function () {

    var text = "example text";
    var i = 0;

    var consoleTyper = setInterval(function () {
        if (i != text.length) {
            i += 1;
            $("#text").text(text.substr(0, i));
        }
        else
        {
         clearInterval(consoleTyper);   
        }

        console.log(i);
    }, 50);
});

我确实将你的代码复制到了jsFiddle中并且它对我不起作用，所以我更新了代码并让它工作了:)。我上面提供了一个jsFiddle。基本上我所做的就是创建一个setInterval，我将其存储在一个变量中，这样一旦显示了所有文本，我们就可以清除setInterval以使其停止运行。

纯JavaScript解决方案

jsFiddle：https://jsfiddle.net/7abvrbxu/

$(document).ready(function () {

    var text = "example text";
    var i = 0;

    var consoleTyper = setInterval(function () {
        if (i != text.length) {
            i += 1;
            document.getElementById("text").innerHTML = text.substr(0, i);
        }
        else
        {
         clearInterval(consoleTyper);   
        }

        console.log(i);
    }, 50);
});

Answer 2

您可以尝试使用ClassA代替aClassB。该脚本看起来像这样：

aClassB

修改

您的问题在这篇文章中有详细解释：library(clpb)

这样你也可以尝试使用setInterval。

使用javascript让每个字符出现文本

2 个答案: