如何为以大写字母开头的每个单词添加不同的颜色？
示例：Justin Creative Design Develope
这是我的代码
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) {
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 that = this;
var delta = 200 - Math.random() * 100;
if (this.isDeleting===1) { delta /= 2; }
if (this.isDeleting===0 && this.txt === fullTxt) {
delta = this.period;
this.isDeleting = 1;
} else if (this.isDeleting===1 && this.txt === '') {
this.isDeleting = 0;
this.loopNum++;
delta = 500;
}
if(this.isDeleting!==2){
timer=setTimeout(function() {
that.tick();
}, delta);
}
};
TxtType.prototype.toggleStart=function(){
//start back up
if(this.isDeleting===2){
this.isDeleting=this.lastDeletingStatus;
this.lastDeletingStatus=2;
}
//stop
else{
this.lastDeletingStatus=this.isDeleting;
this.isDeleting=2;
clearTimeout(timer);
}
}
var toggleStart=function(){
txtType.toggleStart();
txtType.tick();
}
var txtType;
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) {
txtType=new TxtType(elements[i], JSON.parse(toRotate), period);
}
}
// INJECT CSS
var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = ".typewrite > .wrap { border-right: 0.08em solid #fff}";
document.body.appendChild(css);
};body {
background-color:#ce3635;
text-align: center;
color:#fff;
padding-top:10em;
font-family:Helvetica;
}
* { color:#fff; text-decoration: none;}<div class="type-wrap">
<h2>
<a href="" class="typewrite" data-period="2000" data-type='[ "Hi, my name is Justin.", "I am Creative.", "I love Design with CSS.", "I love to Develop with javascript." ]'>
<span class="wrap"></span></a>
</h2>
</div>
答案 0 :(得分：1)
将以下内容添加到tick()函数：
var rgx = /\b([A-Z].*?)\b/g;
var rep = `<span class='cap'>$1</span>`;
var fullTxt = fullTxt.replace(rgx, rep);
这样做需要字符串fullTxt并使用replace()和正则表达式替换任何匹配（以大写字母开头的单词）并包含相同的单词：
<span class='cap'>的字 </span>
另外，不要忘记向CSS声明.cap类color属性和值。
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];
var rgx = /\b([A-Z].*?)\b/g;
var rep = `<span class='cap'>$1</span>`;
var fullTxt = fullTxt.replace(rgx, rep);
if (this.isDeleting === 1) {
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 that = this;
var delta = 200 - Math.random() * 100;
if (this.isDeleting === 1) {
delta /= 2;
}
if (this.isDeleting === 0 && this.txt === fullTxt) {
delta = this.period;
this.isDeleting = 1;
} else if (this.isDeleting === 1 && this.txt === '') {
this.isDeleting = 0;
this.loopNum++;
delta = 500;
}
if (this.isDeleting !== 2) {
timer = setTimeout(function() {
that.tick();
}, delta);
}
};
TxtType.prototype.toggleStart = function() {
//start back up
if (this.isDeleting === 2) {
this.isDeleting = this.lastDeletingStatus;
this.lastDeletingStatus = 2;
}
//stop
else {
this.lastDeletingStatus = this.isDeleting;
this.isDeleting = 2;
clearTimeout(timer);
}
}
var toggleStart = function() {
txtType.toggleStart();
txtType.tick();
}
var txtType;
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) {
txtType = new TxtType(elements[i], JSON.parse(toRotate), period);
}
}
// INJECT CSS
var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = ".typewrite > .wrap { border-right: 0.08em solid #fff}";
document.body.appendChild(css);
};body {
background-color: #ce3635;
text-align: center;
color: #fff;
padding-top: 10em;
font-family: Helvetica;
}
* {
color: #fff;
text-decoration: none;
}
.cap {
color: yellow;
}<div class="type-wrap">
<h2>
<a href="" class="typewrite" data-period="2000" data-type='[ "Hi, my name is Justin.", "I am Creative.", "I love Design with CSS.", "I love to Develop with javascript." ]'>
<span class="wrap"></span></a>
</h2>
</div>
答案 1 :(得分：0)
将字符串传递给函数，将其拆分为空格以提供单词，将每个单词的第一个字符与该字符的大写版本进行比较，如果匹配，则应用带有cna颜色的类的span。将字符串返回到显示元素的内部HTML。要应用不同的颜色 - 为大写单词的每个实例选择一个不同的类（每个类具有不同的颜色集），或为跨度设置随机颜色。
请注意，我没有直接使用您的代码 - 而是整合了一些通用函数。
applyStyling('Hi, my name is Justin.')
function applyStyling(str) {
let newStr='';
let colors = ['red','orange', 'yellow', 'green', 'blue', 'indigo' , 'violet'];
let strPortions=str.split(' ');
strPortions.forEach(function(portion) {
let firstLetter = portion.charAt(0);
let randomNumber = Math.floor(Math.random() * colors.length);
firstLetter === firstLetter.toUpperCase()
? newStr += '<span class="' + colors[randomNumber] + '">' + portion + ' </span>'
: newStr += portion + ' ' ;
})
document.getElementById('result').innerHTML = newStr;
}.red { color: red;}
.orange { color: orange;}
.yellow { color: yellow;}
.green { color: green;}
.blue { color: blue;}
.indigo { color: indigo;}
.violet { color: violet;}<p id="result"></p>