欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

黑客式編輯器中歡迎信息消失的問題

CSS
老白2年前8瀏覽0評論

我目前正致力于創(chuàng)建一個類似黑客的編輯器(在GitHub上查看),帶有一條歡迎消息。這個想法是，當(dāng)空格鍵被按下時，歡迎消息應(yīng)該消失，而代碼編輯器應(yīng)該出現(xiàn)。

但是，我遇到了一個問題，歡迎消息沒有正常消失。當(dāng)我按下空格鍵時，歡迎消息并沒有消失，代碼編輯器也沒有顯示出來，看起來好像歡迎消息只是在重復(fù)。這是我的代碼:

<!DOCTYPE html>
<html>
<head>
  <title>Hacker Code Editor</title>
  <style>
    body {
      background-color: black;
      color: lime;
      font-family: "Courier New", monospace;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    #code-area {
      width: 100%;
      height: 100vh;
      display: none;
    }
    #code-input {
      outline: none;
      border: none;
      background-color: black;
      color: lime;
      font-family: "Courier New", monospace;
      font-size: 16px;
      width: 100%;
      height: 100%;
    }
    #code-input:focus {
      outline: none;
    }
    #welcome-message {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      font-size: 16px;
    }
    #continue-message {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      color: #888;
      font-size: 14px;
      opacity: 0;
    }
  </style>
  <script>
    const welcomeText = "Welcome to the Hacker Terminal.";
    const nextText = "Here you enter your HTML/CSS/JS code in this hacker-like editor! You can then preview the output in a new tab.";
    const typingDelay = 50; // Delay between typing each character
    const revealDelay = 3000; // Delay before revealing continue message

    let welcomeMessageElement;
    let continueMessageElement;
    let codeAreaElement;

    function typeWelcomeMessage() {
      welcomeMessageElement = document.getElementById("welcome-message");
      continueMessageElement = document.getElementById("continue-message");
      codeAreaElement = document.getElementById("code-area");

      welcomeMessageElement.style.display = "block";
      welcomeMessageElement.innerHTML = ""; // Clear existing text

      typeText(welcomeText, welcomeMessageElement, 0, function() {
        typeNextText(nextText, welcomeMessageElement, function() {
          setTimeout(revealContinueMessage, revealDelay);
        });
      });
    }

    function typeNextText(text, element, callback) {
      element.innerHTML += "<br><br>"; // Add line breaks
      typeText(text, element, 0, callback);
    }

    function revealContinueMessage() {
      continueMessageElement.style.opacity = 1;
    }

    function handleKeyDown(event) {
      if (event.code === "Space") {
        event.preventDefault();
        if (welcomeMessageElement.style.display === "block") {
          welcomeMessageElement.style.display = "none";
          continueMessageElement.style.display = "none";
          codeAreaElement.style.display = "block";
          codeAreaElement.focus();
        }
      }
    }

    function typeText(text, element, index, callback) {
      if (index < text.length) {
        setTimeout(function() {
          element.innerHTML += text.charAt(index);
          index++;
          typeText(text, element, index, callback);
        }, typingDelay);
      } else {
        callback();
      }
    }

    window.addEventListener("load", function() {
      typeWelcomeMessage();
    });
  </script>
</head>
<body>
  <div id="welcome-message"></div>
  <div id="code-area">
    <pre id="code-input" contenteditable="true" placeholder="Type your HTML/CSS/JS code here..." spellcheck="false" onkeydown="handleKeyDown(event)"></pre>
  </div>
  <div id="continue-message">Press the space bar to continue...</div>
</body>
</html>

我面臨的問題是，當(dāng)我按下空格鍵時，歡迎消息并沒有像預(yù)期的那樣消失，代碼編輯器也沒有顯示。相反，似乎歡迎信息再次顯示。

我已經(jīng)實現(xiàn)了必要的JavaScript代碼來處理空格鍵事件，并在顯示代碼編輯器時隱藏歡迎消息。然而，它并不像預(yù)期的那樣工作。

我將非常感謝任何關(guān)于如何解決這個問題的見解或建議，并在按下空格鍵時顯示代碼編輯器的同時正確隱藏歡迎消息。提前感謝！