我和JS一起工作了大约两个星期,我正在做一个小项目.目标是在按下按钮时能够更改给定字符串中每个字符的颜色.我已经走得那么远了.
如您所见,我为每个角色添加了跨度,以便我可以单独编辑它们.我正在尝试对跨度应用过渡,这样当我单击按钮时,颜色会淡化为另一种颜色而不是瞬间变化.那可能吗？
这是codepen：
Meta charset="UTF-8">
CSS
bodybody {
background-color: #FFE7E0;
}
span{
transition: all 4s;
}
#letter {
font-size: 9em;
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%,-50%);
color:blue;
}
JS
var letter = document.getElementById("letter");
var text = letter.innerHTML;
var button = document.querySelector("button");
button.addEventListener("click",function () {
var newText = "";
for (var i = 0; i < text.length; i++) {
newText += '最佳答案
这绝对是可能的.这里的关键思想是在脚本开头将字符串分隔为span元素(每个字符),而不是在每次单击事件期间.
采用这种方法将简化您的实现 – 您只需在按钮单击处理程序中为每个span元素分配一个新的“随机颜色”,并将CSS转换留给浏览器来处理：
var letter = document.getElementById("letter");
var text = letter.innerHTML;
var button = document.querySelector("button");
// Convert inner text node to span nodes for each character
// at beginning of script
var text = letter.innerText;
letter.innerText = '';
for(var i = 0; i < text.length; i++) {
var character = text[i];
letter.innerHTML += 'span{
transition: all 4s;
}
#letter {
font-size: 9em;
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%,-50%);
color:blue;
}Meta charset="UTF-8">
