命令行界面自动敲击显示

十月 24, 2023 / Mr.x / 3阅读 / 0评论/ 分类: 创意
命令行界面自动敲击显示 — 荣小站
前端 JavaScript 动画

命令行界面自动敲击显示

使用 jQuery 实现的终端打字机效果，模拟命令行自动输入命令并显示执行结果。

这是一个模拟终端界面的特效——像是有个人在实时敲击命令行一样，逐字输入命令、显示输出结果。光标会闪烁，等待时会有延迟，非常逼真！

效果演示

$  |

Found 1 feature
----------------------------------------------
Feature: Bottles # ./features/bottles.feature

  Scenario: A bottle falls from the wall
    ✓ Given 100 green bottles are standing
    ✓ when 1 green bottle accidentally falls
    ✓ then there are 99 green bottles standing

 ---------- ----------- ------- -------- --------
  Features   Scenarios   Steps   Passed   Failed
 ---------- ----------- ------- -------- --------
  1          1           4       ✓ 4      0

  Completed 1 feature in 0.01s

HTML 结构

<div class="terminal-window">
    <header>
        <div class="button green"></div>
        <div class="button yellow"></div>
        <div class="button red"></div>
    </header>
    <section class="terminal">
        <div class="history"></div>
        $ <span class="prompt"></span>
        <span class="typed-cursor">|</span>
    </section>
</div>

<!-- 输出结果 -->
<div class="terminal-data mimik-run-output">
    ...输出内容...
</div>

CSS 样式

终端窗口

.terminal-window {
    width: 600px;
    height: 360px;
    border-radius: 10px;
}

.terminal-window header {
    background: #E0E8F0;
    height: 30px;
    border-radius: 8px 8px 0 0;
}

.terminal-window header .button {
    width: 12px;
    height: 12px;
    display: inline-block;
    border-radius: 50%;
}

.button.green { background: #3BB662; }
.button.yellow { background: #E5C30F; }
.button.red { background: #E75448; }

终端内容区

.terminal-window section.terminal {
    color: white;
    font-family: 'JetBrains Mono', Menlo, Monaco, monospace;
    font-size: 11pt;
    background: #30353A;
    padding: 10px;
    position: absolute;
    width: 100%;
    top: 30px;
    bottom: 0;
    border-radius: 0 0 8px 8px;
}

光标闪烁

.typed-cursor {
    opacity: 1;
    animation: blink 0.7s infinite;
}

@keyframes blink {
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}

JavaScript 逻辑

命令数据配置

var data = [
    {
        action: 'type',
        strings: ["npm install -g mimik^400"],
        output: '<span class="gray">+mimik@0.10.2 installed</span><br> ',
        postDelay: 1000
    },
    {
        action: 'type',
        strings: ["cd tests^400"],
        output: ' ',
        postDelay: 1000
    },
    {
        action: 'type',
        strings: ['mimik run^400'],
        output: $('.mimik-run-output').html()
    },
    {
        action: 'type',
        strings: ["that was easy!", ''],
        postDelay: 2000
    }
];

运行脚本函数

function runScripts(data, pos) {
    var prompt = $('.prompt'),
        script = data[pos];
    
    switch(script.action) {
        case 'type':
            prompt.typed({
                strings: script.strings,
                typeSpeed: 30,
                callback: function() {
                    // 保存历史记录
                    var history = $('.history').html();
                    history = history ? [history] : [];
                    history.push('$ ' + prompt.text());
                    
                    if(script.output) {
                        history.push(script.output);
                        prompt.html('');
                        $('.history').html(history.join('<br>'));
                    }
                    
                    // 滚动到底部
                    $('section.terminal').scrollTop($('section.terminal').height());
                    
                    // 执行下一个脚本
                    pos++;
                    if(pos < data.length) {
                        setTimeout(function() {
                            runScripts(data, pos);
                        }, script.postDelay || 1000);
                    }
                }
            });
            break;
    }
}

核心配置项

属性说明示例值
action操作类型'type'
strings要输入的字符串数组["npm install^400"]
output执行后的输出内容'输出文本'
postDelay执行后的延迟(毫秒)1000
typeSpeed打字速度(毫秒)30
clear是否清空历史true/false

使用注意

  • 需要引入 jQuery 库
  • 需要引入 jquery.typed.js 插件
  • 可修改 data 数组自定义命令序列
  • ^400 表示该位置暂停 400 毫秒
  • output 支持 HTML 内容

#命令行界面自动敲击显示(1)

评论