JavaScript를 사용하여 웹 투표 애플리케이션 개발-JS 튜토리얼-php.cn

JavaScript를 사용하여 웹 투표 애플리케이션 개발

WBOY

풀어 주다： 2023-08-10 09:33:10

원래의

1114명이 탐색했습니다.

JavaScript를 사용하여 웹 투표 애플리케이션 개발

인터넷이 발달하면서 온라인 투표는 사용자 의견과 피드백을 수집하는 일반적인 방법이 되었습니다. 사용자가 투표 활동에 쉽게 참여할 수 있도록 하려면 간단한 웹 투표 애플리케이션을 개발하는 것이 매우 필요합니다. 이 기사에서는 JavaScript를 사용하여 웹 투표 애플리케이션을 개발하는 방법을 소개하고 해당 코드 예제를 첨부합니다.

준비

먼저 사용자가 선호하는 옵션을 선택하여 투표할 수 있는 웹 페이지에 투표 영역과 몇 가지 옵션 버튼을 추가해야 합니다. 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
  <title>网页投票应用</title>
</head>
<body>
  <h1>请选择你喜欢的颜色：</h1>
  <div>
    <input type="radio" name="vote" value="红色">红色<br>
    <input type="radio" name="vote" value="蓝色">蓝色<br>
    <input type="radio" name="vote" value="绿色">绿色<br>
    <input type="button" value="投票" onclick="vote()">
  </div>
</body>
</html>

로그인 후 복사

JavaScript는 투표 기능을 구현합니다

다음으로 JavaScript를 사용하여 투표 기능을 구현하는 코드를 작성합니다. 먼저, 각 옵션에 대한 투표 수를 저장하기 위한 전역 변수를 정의해야 합니다. 코드는 다음과 같습니다:

// 初始化得票数为0
var redVotes = 0;
var blueVotes = 0;
var greenVotes = 0;

로그인 후 복사

그런 다음 사용자의 투표 동작을 처리하는 함수를 작성해야 합니다. 이 함수는 사용자가 투표 버튼을 클릭할 때 호출됩니다. 먼저, 사용자가 선택한 옵션을 가져와야 합니다. 코드는 다음과 같습니다.

function vote() {
  var selectedOption = document.querySelector('input[name="vote"]:checked').value;
}

로그인 후 복사

다음으로 사용자의 선택에 따라 해당 옵션에 대한 투표 수를 늘려야 합니다. 코드는 다음과 같습니다.

function vote() {
  var selectedOption = document.querySelector('input[name="vote"]:checked').value;

  if (selectedOption === "红色") {
    redVotes++;
  } else if (selectedOption === "蓝色") {
    blueVotes++;
  } else if (selectedOption === "绿色") {
    greenVotes++;
  }
}

로그인 후 복사

마지막으로 참고용으로 각 옵션에 대한 투표 수를 콘솔에 출력할 수 있습니다. 코드는 다음과 같습니다.

function vote() {
  var selectedOption = document.querySelector('input[name="vote"]:checked').value;

  if (selectedOption === "红色") {
    redVotes++;
  } else if (selectedOption === "蓝色") {
    blueVotes++;
  } else if (selectedOption === "绿色") {
    greenVotes++;
  }

  console.log("红色得票数：" + redVotes);
  console.log("蓝色得票数：" + blueVotes);
  console.log("绿色得票数：" + greenVotes);
}

로그인 후 복사

완전한 웹 투표 애플리케이션

마지막으로 위의 코드를 통합하여 완전한 웹 투표 애플리케이션을 구성합니다. 사용자는 투표 버튼을 클릭하여 원하는 색상을 선택하고 콘솔에서 각 옵션에 대한 투표 수를 볼 수 있습니다. 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
  <title>网页投票应用</title>
</head>
<body>
  <h1>请选择你喜欢的颜色：</h1>
  <div>
    <input type="radio" name="vote" value="红色">红色<br>
    <input type="radio" name="vote" value="蓝色">蓝色<br>
    <input type="radio" name="vote" value="绿色">绿色<br>
    <input type="button" value="投票" onclick="vote()">
  </div>

  <script>
    // 初始化得票数为0
    var redVotes = 0;
    var blueVotes = 0;
    var greenVotes = 0;

    function vote() {
      var selectedOption = document.querySelector('input[name="vote"]:checked').value;

      if (selectedOption === "红色") {
        redVotes++;
      } else if (selectedOption === "蓝色") {
        blueVotes++;
      } else if (selectedOption === "绿色") {
        greenVotes++;
      }

      console.log("红色得票数：" + redVotes);
      console.log("蓝色得票数：" + blueVotes);
      console.log("绿色得票数：" + greenVotes);
    }
  </script>
</body>
</html>

로그인 후 복사

위는 JavaScript를 사용하여 웹 투표 애플리케이션을 개발하기 위한 방법 및 샘플 코드입니다. 이 기사를 공부하면 웹 페이지에 투표 옵션을 추가하는 방법과 JavaScript를 사용하여 사용자의 투표 동작을 처리하는 해당 논리를 작성하는 방법을 이해할 수 있습니다. 이 기사가 도움이 되기를 바랍니다!

위 내용은 JavaScript를 사용하여 웹 투표 애플리케이션 개발의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!