Javascript 在标题中插入和删除字符/单词

我对JavaScript非常陌生，希望能得到一些帮助。提前感谢你们所有人

下面是一个JSFIDLE：

我试图使代码更加优雅，并且在（browser true，inherit 2）中有效

非常感谢您的帮助

HTML:

JavaScript:

var TxtRotate = function (el, toRotate, period) {
  "use strict";
  this.toRotate = toRotate;
  this.el = el;
  this.loopNum = 0;
  this.period = parseInt(period, 10) || 2000;
  this.txt = '';
  this.tick();
  this.isDeleting = false;
};

TxtRotate.prototype.tick = function () {
  "use strict";
  var i = this.loopNum % this.toRotate.length;
  var fullTxt = this.toRotate[i];

  if (this.isDeleting) {
    this.txt = fullTxt.substring(0, this.txt.length - 1);
  } else {
    this.txt = fullTxt.substring(0, this.txt.length + 1);
  }

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

  var delta = 300 - Math.random() * 100;

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

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

  setTimeout(this.tick.bind(this), delta);
};

// captions and interval
var data = {
  'caption': {
    'rotate': '["communications", "design", "graphic design", "typography", "photography", "postproduction"]',
    'period': "3000"
  }
};

window.onload = function () {
  "use strict";
  var elements = document.getElementsByClassName('caption');
  for (var i=0; i<elements.length; i++) {
    var toRotate = data.caption.rotate;
    var period = data.caption.period;
    //var toRotate = elements[i].getAttribute('data-rotate');
    //var period = elements[i].getAttribute('data-period');
    if (toRotate) {
      new TxtRotate(elements[i], JSON.parse(toRotate), period);
    }
  }
};

$(function () {
  var onClass = "on";
  var showClass = "show";

  $("input").bind("checkval",function () {
    var label = $(this).prev("label");
    if(this.value !== "") {
      label.addClass(showClass);
    } else {
      label.removeClass(showClass);
    }
  }).on("keyup",function () {
    $(this).trigger("checkval");
  }).on("focus",function () {
    $(this).prev("label").addClass(onClass);
  }).on("blur",function () {
      $(this).prev("label").removeClass(onClass);
  }).trigger("checkval");
});

var TxtRotate=函数（el、旋转、周期）{
“严格使用”；
this.toRotate=toRotate；
this.el=el；
this.loopNum=0；
this.period=parseInt（period，10）| 2000；
this.txt=“”；
这个。勾选（）；
this.isDeleting=false；
};
TxtRotate.prototype.tick=函数（）{
“严格使用”；
var i=this.loopNum%this.toRotate.length；
var fullTxt=this.toRotate[i]；
如果（这是删除）{
this.txt=fullTxt.substring（0，this.txt.length-1）；
}否则{
this.txt=fullTxt.substring（0，this.txt.length+1）；
}
this.el.innerHTML=''+this.txt+''；
var delta=300-Math.random（）*100；
如果（this.isDeleting）{delta/=2；}
如果（！this.isDeleting&&this.txt===fullTxt）{
delta=这个周期；
this.isDeleting=true；
}else if（this.isDeleting&&this.txt==''）{
this.isDeleting=false；
这个.loopNum++；
δ=500；
}
setTimeout（this.tick.bind（this），delta）；
};
//字幕和间隔
风险值数据={
“说明”：{
“旋转”：“[“通信”、“设计”、“平面设计”、“排版”、“摄影”、“后期制作”]，
“期间”：“3000”
}
};
window.onload=函数（）{
“严格使用”；
var elements=document.getElementsByClassName（'caption'）；
对于（var i=0；i
以下是
that
变量的唯一用法。请去掉它：

setTimeout(this.tick.bind(this), delta);

你的JSFIDLE不起作用，你需要选择一个jquery库，然后从下拉列表中选择onDomready抱歉，我更新了链接！我想这个问题应该回答谢谢，我也会试试！
var TxtRotate = function (el, toRotate, period) {
  "use strict";
  this.toRotate = toRotate;
  this.el = el;
  this.loopNum = 0;
  this.period = parseInt(period, 10) || 2000;
  this.txt = '';
  this.tick();
  this.isDeleting = false;
};

TxtRotate.prototype.tick = function () {
  "use strict";
  var i = this.loopNum % this.toRotate.length;
  var fullTxt = this.toRotate[i];

  if (this.isDeleting) {
    this.txt = fullTxt.substring(0, this.txt.length - 1);
  } else {
    this.txt = fullTxt.substring(0, this.txt.length + 1);
  }

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

  var delta = 300 - Math.random() * 100;

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

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

  setTimeout(this.tick.bind(this), delta);
};

// captions and interval
var data = {
  'caption': {
    'rotate': '["communications", "design", "graphic design", "typography", "photography", "postproduction"]',
    'period': "3000"
  }
};

window.onload = function () {
  "use strict";
  var elements = document.getElementsByClassName('caption');
  for (var i=0; i<elements.length; i++) {
    var toRotate = data.caption.rotate;
    var period = data.caption.period;
    //var toRotate = elements[i].getAttribute('data-rotate');
    //var period = elements[i].getAttribute('data-period');
    if (toRotate) {
      new TxtRotate(elements[i], JSON.parse(toRotate), period);
    }
  }
};

$(function () {
  var onClass = "on";
  var showClass = "show";

  $("input").bind("checkval",function () {
    var label = $(this).prev("label");
    if(this.value !== "") {
      label.addClass(showClass);
    } else {
      label.removeClass(showClass);
    }
  }).on("keyup",function () {
    $(this).trigger("checkval");
  }).on("focus",function () {
    $(this).prev("label").addClass(onClass);
  }).on("blur",function () {
      $(this).prev("label").removeClass(onClass);
  }).trigger("checkval");
});

var that = this;

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

setTimeout(this.tick.bind(this), delta);