我对 JavaScript 非常陌生，希望得到一些帮助。预先感谢大家!
这是一个jsfiddle:http://jsfiddle.net/KYjF9/3/
我正在努力使该代码更加优雅，并且在 http://www.jslint.com/ 上也有效。 (浏览器正确，继承2)？
预先非常感谢您的帮助!
HTML:
<html>
<body>
<h1>Test<span class="caption"></span></h1>
</body>
</html>
CSS:
h1 span.caption {
color:rgb(224,224,224); /*#e0e0e0*/
}
h1 span.wrap {
border-right: 2px solid #f0f0f0
}
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 that = this;
setTimeout(function () {
that.tick();
}, delta);
这是 that 变量的唯一用法。摆脱它:
setTimeout(this.tick.bind(this), delta);
关于javascript - 在标题中插入和删除字符/单词，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22681187/