为数组中的单个字符添加闪烁效果

Question

我正在尝试实现数组中单个字符的闪烁效果。

例如:if "text"在<p>段内加载标签或容器，则文本的第一个字符应该闪烁，当用户在输入区域键入闪烁字符时，闪烁效果必须移动到下一个字符上闪烁。

我需要帮助来解决这个问题。如有任何指示或帮助，我将不胜感激。

这是我到目前为止尝试的:

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...!"
text.split('').forEach(char => {
const chrspan = document.createElement('span')
chrspan.innerText = char;
displayElem.appendChild(chrspan);
});

inputElem.addEventListener('input', () => {
var vl = document.getElementById("input").value;
const arrayq = displayElem.querySelectorAll('span')
const arrayv = inputElem.value
let correct = true;
arrayq.forEach((chSpan, index) => {
const char = arrayv[index];
if (char == null) {
correct = false;
} else if (char === chSpan.innerText) {
chSpan.classList.add('blink-bg')
} else {
chSpan.classList.remove('blink-bg')
correct = false
}
})
})

.blink-bg {
text-align: center;
color: #fff;
display: inline-block;
border-radius: 3px;
animation: blinkingBackground 1s infinite;
}
@keyframes blinkingBackground {
from { background-color: #f1ebeb; }
to { background-color: #080808; }
}

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

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...!"
text.split('').forEach(char => {
const chrspan = document.createElement('span')
chrspan.innerText = char;
displayElem.appendChild(chrspan);
});
inputElem.addEventListener('input', () => {
var vl = document.getElementById("input").value;
const arrayq = displayElem.querySelectorAll('span')
const arrayv = inputElem.value
let correct = true;
arrayq.forEach((chSpan, index) => {
const char = arrayv[index];
if (char == null) {
correct = false;
} else if (char === chSpan.innerText) {
chSpan.classList.add('blink-bg')
// document.getElementById("p_id").innerHTML = chSpan.innerText;
} else {
chSpan.classList.remove('blink-bg')
correct = false
}
})
})

Answer 1

这可能是一个很好的起点。我改变了一些东西，我做了一个辅助函数$从dom中抓取项目作为个人偏好。

我在文档中创建了一个包含所有span的数组，以便更容易地跟踪哪个元素具有闪烁类。我创建了一个辅助函数来从txtArr中抓取activeText，而不是检查文本内容。这样我就可以避免使用渲染屏幕作为信息的存储区域，而是让屏幕镜像在我的js中发生的事情。

在输入时检查最后输入的字符，如果是闪烁的字符，则递增哪个span在闪烁。

这是一个简单的演示如何完成这个任务，你可能想要有不同的功能，但希望这有助于作为一个起点!

const $ = str => [...document.querySelectorAll(str)];
let displayElem = $("#me")[0];
const inputElem = $("#input")[0];
const text = "Hey! It's a bad day, not a bad life, you'll be okay...!"
const txtArr = [...text];
const txtSpans = txtArr.map(char => {
const span = document.createElement("span");
span.innerText = char;
return span;
});
let activeIndex = -1;
const activeText = () => txtArr[activeIndex];
function renderSpans() {
displayElem.innerHtml = "";
txtSpans.forEach(span => displayElem.appendChild(span));
};
function updateActive() {
const firstRun = activeIndex == -1;
if (!firstRun) 
txtSpans[activeIndex].classList.remove("blink-bg");
activeIndex++;
if (activeIndex == txtSpans.length) return;
txtSpans[activeIndex].classList.add("blink-bg");
}
updateActive();
renderSpans();
inputElem.addEventListener('input', e => {
const val = e.target.value;
if (val == "") return;
const lastChar = val[val.length - 1];
if (lastChar == activeText()) updateActive();
})

.blink-bg {
text-align: center;
color: #fff;
display: inline-block;
border-radius: 3px;
animation: blinkingBackground 1s infinite;
}
@keyframes blinkingBackground {
from { background-color: #f1ebeb; }
to { background-color: #080808; }
}

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