Question

我正在尝试创建一个文本框，其样式类似于终端窗口，在您通常要键入的底部的正上方，我想要一些单词，如果您单击某个单词，它将打印出一个特定的段落进入“终端”窗口。

我将其用于与编码有关的个人网站。我希望能够单击“关于”按钮下方的栏，并使其一次打印一个“关于编码”段落的字母，就像您在90年代的老电影中看到的那样。

我需要一个开始的地方，也许应该在方框中输入什么代码，或者说这种东西是什么。我无法记住我的一生。

搜寻了互联网，试图找到类似的东西，但没有提出任何建议。

暂时没有显示。

Answer 1

有几种方法可以处理此项目。这完全取决于您的最终目标（不仅针对Terminal窗口页面，而且还针对整个网站）。如果这确实很小，并且不需要任何数据保留（例如拥有用户，帖子等），那么您可以像普通的Javascript + HTML一样简单。您也可以非常喜欢它，选择一个前端框架，例如Vue.js，React.js，Angular.js等。您可以使用许多不同的工具（以下是GitHub的列表：{{3 }}。

但是，如果我们要专门解决手头的任务-我建议将普通的旧Javascript与HTML结合使用。

这是您的一个小开始，希望对您有所帮助（请查看/运行摘录）。

function kenobi() {
        const customContent = document.createElement('div');
        customContent.innerHTML = 'Hello there, General Kenobi!';
        customContent.id = 'custom-content';

        const referenceNode = document.querySelector('#you-are-a-bold-one');
        referenceNode.parentNode.insertBefore(customContent, referenceNode.nextSibling);
    }

.terminal {
    max-width: 400px;
    height: 150px;
    padding: 8px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    border: 1px solid;
}

.wrapper {
    display: flex;
}

#custom-content {
    max-width: 250px;
    overflow: hidden; /* Ensures the content is not revealed until the animation */
    border-right: .15em solid orange; /* The typwriter cursor */
    white-space: nowrap; /* Keeps the content on a single line */
    letter-spacing: .15em; /* Adjust as needed */
    animation:
        typing 3.5s steps(40, end),
        blink-caret .75s step-end infinite;
}

/* The typing effect */
@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: grey; }
}

<html>
  <head>
    <meta charset="UTF-8">
    <title>Terminal Window</title>
  </head>
  <body>
    <div class="terminal">
        <div>Last login: Sun May 19 23:31:48 on ttys000</div>
        <div class="wrapper">
            <div class="intro" id="you-are-a-bold-one">~ $&nbsp;</div>
        </div>
    </div>
    <button class="about-button" onclick="kenobi()">About</button>
  </body>
</html>

动态的“终端”样式文本框

1 个答案: