如何为文本数组单个字符添加闪烁效果并随用户输入自动跳转

核心修改点 #

• 新增currentIndex变量记录当前待输入的字符下标，初始值为0
• 初始化渲染字符后，自动给第一个字符添加闪烁样式
• 输入事件中仅判断当前待输入字符是否匹配，匹配成功则自动将闪烁效果跳转到下一个字符，支持输入回退时同步回退闪烁位置
• 仅当前待输入字符持有闪烁类，已输入正确的字符可自行扩展样式标识

完整可运行代码 #

HTML #

<p id="me"></p>
<input id="input" type="text" autofocus />

CSS #

.blink-bg {
  text-align: center;
  color: #fff;
  display: inline-block;
  border-radius: 3px;
  animation: blinkingBackground 1s infinite;
}
/* 可选：已输入正确的字符样式，不需要可以删除 */
.correct {
  color: #2ecc71;
}

@keyframes blinkingBackground {
  from { background-color: #f1ebeb; }
  to { background-color: #080808; }
}

JavaScript #

let displayElem = document.getElementById("me");
const inputElem = document.getElementById("input");
const text = "Hey It's bad day, not a bad life,you'll be okay...!"
let currentIndex = 0; // 记录当前待输入的字符下标
const charSpans = []; // 存储所有字符的span元素，方便后续操作

// 初始化渲染所有字符
text.split('').forEach(char => {
  const chrspan = document.createElement('span')
  chrspan.innerText = char;
  charSpans.push(chrspan);
  displayElem.appendChild(chrspan);
});
// 初始给第一个字符加闪烁效果
charSpans[currentIndex].classList.add('blink-bg');

inputElem.addEventListener('input', () => {
  const inputVal = inputElem.value;
  // 处理用户删除输入的情况，回退闪烁位置
  if (inputVal.length < currentIndex) {
    charSpans[currentIndex].classList.remove('blink-bg');
    // 不需要正确样式可以删除下面这行
    charSpans[inputVal.length].classList.remove('correct');
    currentIndex = inputVal.length;
    charSpans[currentIndex].classList.add('blink-bg');
    return;
  }
  // 校验当前待输入的字符是否匹配
  const currentTargetChar = charSpans[currentIndex].innerText;
  const currentInputChar = inputVal[currentIndex];
  if (currentInputChar === currentTargetChar) {
    // 输入正确，跳转下一个
    charSpans[currentIndex].classList.remove('blink-bg');
    // 不需要正确样式可以删除下面这行
    charSpans[currentIndex].classList.add('correct');
    currentIndex++;
    // 还有剩余字符就给下一个加闪烁
    if (currentIndex < charSpans.length) {
      charSpans[currentIndex].classList.add('blink-bg');
    }
  }
})

内容的提问来源于stack exchange，提问作者ronak pradhan