JavaScript를 사용하여 웹 투표 애플리케이션 개발
- WBOY원래의
- 2023-08-10 09:33:101120검색
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!