将样式颜色红色添加到附加的li中，但仅每三次添加一次-Javascript

Question

它应该像

<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li> <- Text should be red
...
<li>6</li> <- red
</ul>

我想要这样，当我点击按钮标签时，输入标签的内容值被添加为li标签，但每添加第三次，文本就需要是红色的。如何在JavaScript、中做到这一点

<div>
<input id="text" type="text" />
<button id="add">Add</button>
</div>
<ul id="list"></ul>

(function () {
document.querySelector('#add').addEventListener('click', function () {
let input = document.querySelector('#text');
if (input.value !== '') {
let list = document.querySelector('#list');
let item = document.createElement('li'); // create li node
let itemText = document.createTextNode(input.value); // create text node
item.appendChild(itemText); // append text node to li nod
list.appendChild(item); // append li node to list
input.value = ''; // clear input
} else {
alert('Input text value');
}
});
})();

Answer 1

如果我理解，您希望添加的li在3秒内呈红色。

如果是这样，您可以为新li添加一个样式，并在setTimeout(3秒(中删除它：

item.classList.add("new-added-item");
setTimeout(() => {
item.classList.remove("new-added-item");
}, 3000);

(function () {
document.querySelector('#add').addEventListener('click', function () {
let input = document.querySelector('#text');
if (input.value !== '') {
let list = document.querySelector('#list');
let item = document.createElement('li'); // create li node
let itemText = document.createTextNode(input.value); // create text node
item.appendChild(itemText); // append text node to li nod
list.appendChild(item); // append li node to list

input.value = ''; // clear input

item.classList.add("new-added-item");
setTimeout(() => {
item.classList.remove("new-added-item");
}, 3000);
} else {
alert('Input text value');
}
});
})();

.new-added-item {
color: red;
}

<div>
<input id="text" type="text" />
<button id="add">Add</button>
</div>
<ul id="list"></ul>

Answer 2

您可以使用以下CSS代码选择第3个和第6个<li>以红色显示：

li:nth-of-type(3) {
color: red;
}
li:nth-of-type(6) {
color: red;
}