문자 색상을 문자별로 변경하는 방법은 무엇입니까?
P粉613735289
2023-08-31 13:03:36
<p>텍스트의 각 문자 색상을 하나씩 차례로 변경하고 싶습니다. 예를 들어:
안녕하세요 세계
"H"가 먼저 빨간색으로 변하고, 그 다음 "E", "L" 등으로 변합니다. </p>
<p>각 문자를 범위로 묶고 jquery와 루프를 사용해 보았습니다. 하지만 작동하지 않습니다. </p>
<p>
<pre class="brush:js;toolbar:false;">$("span").ready(function() {
var 문자 = $("span").length;
for (let i = 0; i <= 문자; i++) {
$("span")[i].css("color", "red");
}
})</pre>
<pre class="brush:html;toolbar:false;"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> ;</스크립트>
<span>H</span>
<span>E</span>
<스팬>L
<스팬>L
O
<span>, </span>
W
O
<span>R</span>
<스팬>L
<span>D</span></pre>
</p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
올바른 길을 가고 있지만 변경을 연기해야 합니다
color的时间（比如说100ms），这样效果才能被看到。为了延迟，我们使用了接受2个参数的方法setTimeout:100ms).100ms，我们应该将其乘以当前字母的索引（准确地说是当前的span와 같은 지연 시간을 선택할 때 효과를 볼 수 있도록 현재 문자의 인덱스(정확하게는 현재span)를 곱해야 합니다.실시간 데모입니다:
jQuery에서는
each함수를 사용하여 선택기의 모든 요소를 반복할 수 있습니다.두 가지 색상 변경 사이를 "대기"하려면 CSS 변경 사항을 각 루프의 인덱스에 연결된
setTimeout함수에 포함할 수 있습니다