JavaScript 文字未显示

Question

我在 html 加载 javascript 动画时遇到问题 - 来自 https://codepen.io/atunnecliffe/pen/siqjd

脚本没有在 javascript 中打印文本，但屏幕在最后逐渐淡出，就像在 codepen 示例中一样。这是现在的 JS：

var textarea = $(".term");
var speed = 50; //Writing speed in milliseconds
var text = "sh andrew_website.sh";

var i = 0;

runner();

function runner() {
  textarea.append(text.charAt(i));
  i++;
  setTimeout(function () {
    if (i < text.length) runner();
    else {
      textarea.append("<br>");
      i = 0;
      setTimeout(function () {
        feedbacker();
      }, 1000);
    }
  }, Math.floor(Math.random() * 220) + 50);
}

var count = 0;
var time = 1;
function feedbacker() {
  textarea.append("[    " + count / 1000 + "] " + output[i] + "<br>");
  if (time % 2 == 0) {
    i++;
    textarea.append("[    " + count / 1000 + "] " + output[i] + "<br>");
  }
  if (time == 3) {
    i++;
    textarea.append("[    " + count / 1000 + "] " + output[i] + "<br>");
    i++;
    textarea.append("[    " + count / 1000 + "] " + output[i] + "<br>");
    i++;
    textarea.append("[    " + count / 1000 + "] " + output[i] + "<br>");
  }
  window.scrollTo(0, document.body.scrollHeight);
  i++;
  time = Math.floor(Math.random() * 4) + 1;
  count += time;
  setTimeout(function () {
    if (i < output.length - 2) feedbacker();
    else {
      textarea.append("<br>Initialising...<br>");
      setTimeout(function () {
        $(".load").fadeOut(1000);
      }, 500);
    }
  }, time);
}

var output = [

发生的一个错误是定义了 VAR 速度，但没有在 JS 代码中的任何地方使用，但是我不知道它可以在哪里使用。任何帮助将不胜感激，谢谢，Oliver。

Answer 1

确保嵌入 jQuery，对我来说效果很好。

var textarea = $('.term');
var speed = 50; //Writing speed in milliseconds
var text = 'sh andrew_website.sh';

var i = 0;

runner();

function runner() {
  textarea.append(text.charAt(i));
  i++;
  setTimeout(
    function() {
      if (i < text.length)
        runner();
      else {
        textarea.append("<br>")
        i = 0;
        setTimeout(function() {feedbacker();}, 1000);
      }
    }, Math.floor(Math.random() * 220) + 50);
}

var count = 0;
var time = 1;
function feedbacker() {
  textarea.append("[    " + count / 1000 + "] " + output[i] + "<br>");
  if (time % 2 == 0) {
    i++;
    textarea.append("[    " + count / 1000 + "] " + output[i] + "<br>");
  }
  if (time == 3) {
    i++;
    textarea.append("[    " + count / 1000 + "] " + output[i] + "<br>");
    i++;
    textarea.append("[    " + count / 1000 + "] " + output[i] + "<br>");
    i++;
    textarea.append("[    " + count / 1000 + "] " + output[i] + "<br>");
  }
  window.scrollTo(0, document.body.scrollHeight);  
  i++;
  time = Math.floor(Math.random() * 4) + 1;
  count += time;
  setTimeout(
    function() {
      if (i < output.length - 2)
        feedbacker();
      else {
        textarea.append("<br>Initialising...<br>");
        setTimeout(function() {$(".load").fadeOut(1000);}, 500);
      }
    },time);
}

var output = ["TESTING",
"WORKING",


"fsdfsdfsdfsdf",
"Initialising...", ""];

html,
body {
  margin: 0 auto;
  height: 100%;
}

pre {
  padding: 0;
  margin: 0;
}

.load {
  margin: 0 auto;
  min-height: 100%;
  width: 100%;
  background: black;
}

.term {
  font-family: monospace;
  color: #fff;
  opacity: 0.8;
  font-size: 2em;
  overflow-y: auto;
  overflow-x: hidden;
  padding-top: 10px;
  padding-left: 20px;
}

.term:after {
  content: "_";
  opacity: 1;
  animation: cursor 1s infinite;
}

@keyframes cursor {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<div class="load">
  <pre class="term">andrew@dev:~$ </pre>
</div>

JavaScript 文字未显示

JavaScript text is not showing

html

javascript

loading