如何将文本删除行为从右向左修改为从左向右？

嘿，我来帮你搞定这个删除方向的调整！其实很简单，只需要修改代码里删除字符时的字符串截取逻辑就行。原代码默认是每次删掉字符串的最后一个字符（从右往左删），咱们改成每次删掉第一个字符就实现从左往右删啦。

修改后的完整代码 #

var TxtType = function(el, toRotate, period) {
  this.toRotate = toRotate;
  this.el = el;
  this.loopNum = 0;
  this.period = parseInt(period, 10) || 2000;
  this.txt = '';
  this.tick();
  this.lastDeletingStatus=0;
  this.isDeleting = 0;
};
var timer;

TxtType.prototype.tick = function() {
  var i = this.loopNum % this.toRotate.length;
  var fullTxt = this.toRotate[i];

  if (this.isDeleting === 1) {
    // 核心修改：从左往右删除，每次截取从第1个字符开始的子串
    this.txt = this.txt.substring(1);
  } else {
    this.txt = fullTxt.substring(0, this.txt.length + 1);
  }

  this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>';

  var that = this;
  var delta = 200 - Math.random() * 100;

  if (this.isDeleting === 1) { delta /= 2; }

  if (!this.isDeleting && this.txt === fullTxt) {
    delta = this.period;
    this.isDeleting = 1;
  } else if (this.isDeleting && this.txt === '') {
    this.isDeleting = 0;
    this.loopNum++;
    delta = 500;
  }

  timer = setTimeout(function() {
    that.tick();
  }, delta);
};

// 初始化示例（如果你的页面需要的话）
window.onload = function() {
  var elements = document.getElementsByClassName('typewrite');
  for (var i=0; i<elements.length; i++) {
    var toRotate = elements[i].getAttribute('data-type');
    var period = elements[i].getAttribute('data-period');
    if (toRotate) {
      new TxtType(elements[i], JSON.parse(toRotate), period);
    }
  }
};

关键修改点说明 #

原代码的删除逻辑是通过截取字符串前n-1个字符实现从右往左删，我把它改成了this.txt = this.txt.substring(1);——这个方法会直接返回从索引1开始到末尾的子串，相当于每次删掉第一个字符，完美实现从左到右的删除效果。

其他逻辑完全保留，所以打字速度、循环周期这些原有特性都不会受影响，只是删除方向变了~

内容的提问来源于stack exchange，提问作者Hedi Herdiana