SOURCE

(function($) {

  $.fn.typer = function(options) {

    var $input = this,
    $str = $input.text(),
    dafaultOpt = {
      greetings: ["Hi I'm JoooooLeex", "Think for using J_typer.js"],
      speed: 100
    },
    text = [],
    index = 0,
    num = 0,
    s1;

    var settings = $.extend(dafaultOpt, options);

    // 格式化字符
    text = settings.greetings.map(function(part) {
      return part.split("");
    });

    function addLetter() {
      var timer = Math.round(Math.random() * 200 + settings.speed);

      setTimeout(function() {
        $input.text($str += text[index][num]);

        if (num > text[index].length - 2) {
          num = 0;
          setTimeout(function() {
            deleteLetter();
          },
          3000);
          return false;
        } else {
          num++;
          addLetter();
        }
      },
      timer);
    }

    function deleteLetter() {
      s1 = setInterval(function() {
        $str = $str.substring(0, $str.length - 1);
        $input.text($str);
        if ($input.text() == '') {
          index < (text.length - 1) ? index++:index = 0;
          setTimeout(addLetter, 1000);
          clearInterval(s1);
        }
      },
      40);
    }

    setTimeout(function() {
      addLetter();
    },
    2000);

    return this;
  };

} (jQuery));

// eg: Hi I'm JoooooLeex
$(".txt-input").eq(0).typer({
  greetings: ["Hi I'm JoooooLeex"],
  speed: 60
});

<p class="cmder">
  <span class="txt-input">
  </span>
</p>

@import url("https://fonts.googleapis.com/css?family=Poiret+One");
.cmder {
  font-family: 'Poiret One', cursive;
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 25px;
  padding: 20px;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  background-color: rgb(46, 52, 54);
  &:before {
    content: "$ ";
  }
  &:after {
    content: "";
    display: inline-block;
    height: 24px;
    width: 8px;
    vertical-align: baseline;
    background-color: currentcolor;
    animation: cursor 1s infinite
  }
}

@keyframes cursor {
  0% {
    opacity: 1
  }
  50% {
    opacity: 1
  }
  51% {
    opacity: 0
  }
  to {
    opacity: 0
  }
}