<p>JS에서 HTML의 img 태그 아래에 forEach를 사용하려고 합니다. </p><p>bobbingPhotos 변수는 다음과 같습니다. </p>
<pre class="brush:php;toolbar:false;">bobbingPhotos.forEach(function(photo) {
var randomDelay = Math.random() * 2; // 0~2초 사이의 무작위 지연
photo.style.animationDelay = randomDelay + 's';
});</pre>
<p>이 문제는 각 이미지에 하드코딩된 클래스 이름 "bobbing-photo"를 할당하면 해결될 수 있지만 내 이미지는 텍스트 입력에서 생성되기 때문에 이 작업을 수행할 수 없습니다. </p>
<pre class="brush:php;toolbar:false;">function generateImages() {
var userInput = document.getElementById('userInput').value;
var imageOutput = document.getElementById('imageOutput');
imageOutput.innerHTML = '';
for (var i = 0; i < userInput.length; i++) {
var 문자 = userInput[i].toUpperCase();
var 요소;
if (문자 === "n") {
element = document.createElement('br');
}
else if (문자 === ' ') {
요소 = document.createElement('img');
element.src = 'FONT/SPACE.png';
}
또 다른 {
var image = document.createElement('img');
image.src = 'FONT/' + 문자 + '.png';
요소 = 이미지;
image.classList.add("bobbing-photo");
}</pre>
<p>image.classList.add("bobbing-photo")를 사용해도 각 이미지가 서로 다른 시점에서 위아래로 떠다니게 만들 수 있는 방법은 없습니다. </p><p>이 문제를 해결할 수 있는 방법이 있나요?
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
이미지 태그를 동적으로 추가했기 때문에 이미지 태그를 추가한 후에는 애니메이션 함수를 다시 호출해야 합니다.
으아아아