자바스크립트가 다른 숫자를 입력하면 같은 수의 그림이 각각 다른 색상으로 나타납니다.

웹 디자인 및 개발에서는 JavaScript 언어가 자주 사용되며 풍부한 응용 시나리오가 있습니다. 이 기사에서는 JavaScript를 사용하여 서로 다른 입력 숫자에 따라 동일한 수의 그림이 나타나는 기능을 구현하는 방법을 소개하고 두 그림은 각각 다른 색상을 가지며 예제 코드가 함께 제공됩니다.

JavaScript는 웹 페이지에 코드를 삽입하여 동적 웹 페이지 효과와 사용자 상호 작용을 구현할 수 있는 스크립팅 언어입니다. 이 기사에서는 JavaScript를 사용하여 이미지 생성 및 색상을 제어합니다.

먼저 생성된 이미지를 저장하기 위해 HTML로 컨테이너를 만들어야 합니다. 코드는 다음과 같습니다:

<div id="image-container"></div>

다음으로, 이미지의 생성과 색상을 제어하는 ​​JavaScript 코드를 작성해야 합니다. 구현의 기본 아이디어는 다음과 같습니다.

1. 사용자가 입력한 숫자를 가져와서 양의 정수인지 확인합니다.
2. 입력된 수를 기준으로 생성된 사진 수를 계산합니다.
3. 루프에서 이미지를 생성하고 홀수 번 생성된 이미지에 하나의 배경색을 적용하고, 짝수 번 생성된 이미지에 다른 배경색을 적용합니다.
4. 생성된 이미지를 컨테이너에 추가합니다.

코드는 다음과 같습니다.

// 获取输入的数字
var input = prompt("请输入一个正整数：");
var num = parseInt(input);

// 判断输入是否为正整数
if (num <= 0 || isNaN(num)) {
  alert("请输入一个正整数！");
} else {
  // 计算图片数量
  var count = Math.ceil(num / 2);

  // 循环生成图片
  for (var i = 0; i < count; i++) {
    var img = document.createElement("img");
    // 对奇数次生成的图片应用一个背景颜色
    if (i % 2 == 0) {
      img.style.backgroundColor = "red";
    // 对偶数次生成的图片应用另一个背景颜色
    } else {
      img.style.backgroundColor = "blue";
    }
    // 将生成的图片添加到容器中
    document.getElementById("image-container").appendChild(img);
  }
}

코드 설명:

1. 프롬프트 함수를 사용하여 사용자가 입력한 숫자를 가져와서 ParseInt 함수를 사용하여 정수로 변환합니다.
2. Math.ceil 함수를 사용하여 사진 수를 계산하세요. 두 사진은 각각 서로 다른 색상을 사용해야 하기 때문에 생성해야 하는 사진 수는 입력한 수의 절반을 반올림한 것입니다.
3. for 루프를 사용하여 그림을 생성하고, 패리티에 따라 각 그림에 대해 서로 다른 배경색을 설정하고, AppendChild 함수를 사용하여 생성된 그림을 컨테이너에 추가합니다.

위 코드는 동일한 수의 서로 다른 색상의 사진만 생성합니다. 구성적인 사진을 생성해야 하는 경우 img 태그에 해당 src 속성 및 기타 속성 설정을 추가할 수 있습니다.

if (i % 2 == 0) {
    var img = document.createElement("img");
    img.src = "red.png";
    img.alt = "红色图标";
    img.title = "红色图标";
    img.className = "red-icon";
    document.getElementById("image-container").appendChild(img);
} else {
    var img = document.createElement("img");
    img.src = "blue.png";
    img.alt = "蓝色图标";
    img.title = "蓝色图标";
    img.className = "blue-icon";
    document.getElementById("image-container").appendChild(img);
}

코드 설명:

1. document.createElement 함수를 사용하여 img 태그를 생성합니다.
2. img.src 속성을 사용하여 이미지에 해당하는 리소스 경로를 설정하세요.
3. img.alt 및 img.title 속성을 사용하여 해당 프롬프트 정보를 이미지에 추가하세요.
4. img.className 속성을 사용하여 해당 클래스 이름을 이미지에 추가하면 CSS 스타일 제어가 용이해집니다.

이 기능을 구현하는 과정에서 우리는 JavaScript를 사용하여 이미지 생성 및 색상을 제어하는 ​​방법을 배웠을 뿐만 아니라 루프 및 조건부 판단을 통해 실제 문제를 해결하는 방법도 배웠습니다. 실제 프로젝트에서는 더 풍부하고 흥미로운 기능을 달성하기 위해 필요에 따라 해당 수정 및 확장을 수행할 수 있습니다.

위 내용은 자바스크립트가 다른 숫자를 입력하면 같은 수의 그림이 각각 다른 색상으로 나타납니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!