使用javascript让文本按字符显示

Using javascript to let text appear per character

本文关键字：字符 显示 文本 javascript 使用      更新时间：2023-09-26

好的，所以对于学校的一个项目，我们想制作一个简单的基于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>

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);
});

您可以尝试使用setInterval而不是setTimeout。脚本看起来像这样：

            $(document).ready(function() {
               var text = "example text";
               var duration = text.length;
               var counter = 0;
               var intervalId = null;
               var interval = 500;
               intervalId = setInterval(function(){$("#text").text(text.substr(0, counter+1));counter++;}, interval);
               setTimeout(function(){clearInterval(intervalId);}, duration * interval);                 
            });

编辑：

你的问题在这篇文章中有详细的解释：循环中的setTimeout不会打印连续的值

这样，您也可以尝试setTimeout的方法。

相关文章：