JavaScript 文本未显示

Question

I am having trouble with this html loading javascript animation - from https://codepen.io/atunnecliffe/pen/siqjd

The script is not printing the text inside the javascript but the screen is fading out at the end, like in the codepen example. Here is the JS right now:

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 = [

One error that has occurred is the VAR speed is defined but not used anywhere in the JS code however I am at a loss of as to where it could be used. Any help would be appreciated, Thanks, Oliver.

Answer 1

Make sure to embed jQuery, works fine for me.

 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>