Question

我已经在JS上工作了大约两个星期，而且我正在做一个小项目。目的是能够在按下按钮时更改给定字符串中每个单独字符的颜色。我已经走了。

如您所见，我为每个字符添加了跨度，以便可以单独编辑它们。我正在尝试对跨度应用过渡，以便当我单击按钮时，颜色会淡化为另一种颜色，而不仅仅是立即更改。有可能吗？

这里是codepen：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="CSS/textColorV2.css">
</head>

<body>
<p id="letter">Color</p>
<button>Click ME</button>

<script type="text/javascript" src="JS/textColorV2.js"></script>

</body>
</html>

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 style="color:' + randomColor() + '">' + 
    text.charAt(i) + '</span>';
    letter.innerHTML = newText;
    letter.classList.add("trans");
    };
});

function randomColor() {
  //r
  var r = Math.floor(Math.random() * 256);
  //g
  var g = Math.floor(Math.random() * 256);
  //b
  var b = Math.floor(Math.random() * 256);
  return "rgb(" + r + " ," + g + " ," + b + ")";
}

Answer 1

这是绝对可能的。这里的关键思想是在脚本开始时而不是在每次单击事件期间将字符串分成跨度元素（每个字符）。

采用这种方法将简化您的实现-在按钮单击处理程序中需要做的就是为每个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 style="color:' + randomColor() + '">' + character + '</span>';
}

button.addEventListener("click", function () {
  
  // For each span/character of #letter, assign a new random
  // color. This causes the browser to handle the CSS color 
  // transition for you
  for(var span of document.querySelectorAll('#letter span')) {
    span.style.color = randomColor();
  }
});

function randomColor() {

  var r = Math.floor(Math.random() * 256);
  var g = Math.floor(Math.random() * 256);
  var b = Math.floor(Math.random() * 256);
  
  return "rgb(" + r + " ," + g + " ," + b + ")";
}

span{
transition: all 4s;
}

#letter {
font-size: 9em;
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
color:blue;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="CSS/textColorV2.css">
</head>

<body>
<p id="letter">Color</p>
<button>Click ME</button>
 

</body>
</html>

Answer 2

这是相同版本的更简洁版本...

const letters = document.querySelectorAll('.letters');
const button = document.querySelector('button');

button.addEventListener('click', () => {
  letters.forEach(element => {
    element.style.transition = '1s';
    element.style.color = randomColor();
  });
});

const randomColor = () => {
  const r = Math.floor(Math.random() * 256);
  const g = Math.floor(Math.random() * 256);
  const b = Math.floor(Math.random() * 256);

  return `rgb(${r} ,${g},${b})`;
};

body {
  background-color: #ffe7e0;
}

#wrapper {
  font-size: 4em;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: blue;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="index.css">
  <title>Document</title>
</head>

<body>

  <div id="wrapper">
    <span class="letters">C</span>
    <span class="letters">o</span>
    <span class="letters">l</span>
    <span class="letters">o</span>
    <span class="letters">r</span>
  </div>

  <button>Click ME</button>

  <script src="index.js"></script>
</body>

</html>

在Javascript中将过渡应用于注入的html

2 个答案: