1

我正在使用 JQuery 终端示例中的代码在控制台窗口中模拟键入的动画。我可以让动画按预期工作，但在动画过程中，直到动画完成后才会显示特殊的 HTML 字符。例如，在动画运行时，控制台会渲染 ' \' 而不是 ''

此问题也适用于分配给正在动画的任何 div 的类的样式。直到动画完成后样式才会显示。

下面是用于动画的代码（改编自 JQuery 终端示例页面）：

var anim = false;
    function typed(finish_typing) {
        return function(term, message, delay, finished, classname) {
            anim = true;
            var prompt = term.get_prompt();
            var c = 0;
            if (message.length > 0) {
                term.set_prompt('');
                var interval = setInterval(function() {
                    term.insert(message[c++]);
                    if (c == message.length) {
                        clearInterval(interval);
                        // execute in next interval
                        setTimeout(function() {
                            // swap command with prompt
                            finish_typing(term, message, prompt, classname);
                            anim = false
                            finish && finish();
                        }, delay);
                    }
                }, delay);
            }
        };
    }

var typed_message = typed(function(term, message, prompt, classname) {
    if (typeof classname === "undefined") { classname = "default"; }
    term.set_command('');
    term.echo(message, {
        finalize: function(div) { div.addClass(classname); }});
    term.set_prompt(prompt);
});

以及如何调用它的示例：

E.match(/^\s*ping\s*$/i)?
    typed_message(N, "PONG", 10, function(){finished = true;}, "pong"):

在这种情况下，应用于分配给 div 输出的“pong”类的样式typed_message在文本输入完成之前不会显示。

有没有办法在动画运行时显示样式或特殊字符？

4

1 回答 1

0

稍微修改了typed动画，使用set_prompt而不是insert，也$.terminal.substring和length（最后一个需要转到 $.terminal.length）。

var anim = false;
function typed(finish_typing) {
    return function(term, message, delay, finish) {
        anim = true;
        var prompt = term.get_prompt();
        var c = 0;
        if (message.length > 0) {
            term.set_prompt('');
            var new_prompt = '';
            var interval = setInterval(function() {
                // handle html entities like &
                var chr = $.terminal.substring(message, c, c+1);
                new_prompt += chr;
                term.set_prompt(new_prompt);
                c++;
                if (c == length(message)) {
                    clearInterval(interval);
                    // execute in next interval
                    setTimeout(function() {
                        // swap command with prompt
                        finish_typing(term, message, prompt);
                        anim = false
                        finish && finish();
                    }, delay);
                }
            }, delay);
        }
    };
}

function length(string) {
   return $('<span>' + $.terminal.strip(string) + '</span>').text().length;
}

var typed_message = typed(function(term, message, prompt) {
    term.set_command('');
    term.echo(message);
    term.set_prompt(prompt);
});
$('body').terminal(function(command, term) {
  typed_message(term, '[[;#fff;;class_name]hello]', 400);
});
body {
  min-height: 100vh;
  margin: 0;
}
.class_name {
  text-decoration: underline;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.terminal/1.8.0/js/jquery.terminal.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.terminal/1.8.0/css/jquery.terminal.min.css" rel="stylesheet"/>

网站上的示例已相应更新。

于 2017-09-25T07:18:17.550 回答