"인기투표"는 사람들이 특정 주제나 대상에 대해 선호도를 나타내기 위해 여러 명 중에서 투표하는 방식입니다. 주로 정치인, 연예인, 스포츠 선수, 음악, TV 프로그램 등 다양한 분야에서 사용되며, 대중의 의견을 반영하는 수단으로 활용됩니다. 온라인 플랫폼이나 모바일 앱을 통해 쉽게 진행되며, 투표 결과는 대중의 의견을 반영하는 중요한 자료로 사용됩니다.
다음 대동령 인기투표?
블로그에서 인기 투표를 구현하려면, 기본적으로 HTML과 JavaScript를 조합하여 사용자에게 투표를 받고 결과를 표시할 수 있는 폼을 만들 수 있습니다. 간단한 예로 HTML, CSS, JavaScript를 이용한 인기 투표 시스템을 소개하겠습니다.
1. HTML (투표 폼)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>인기 투표</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.poll-container {
width: 300px;
margin: auto;
border: 1px solid #ccc;
padding: 20px;
border-radius: 10px;
}
.poll-title {
font-size: 1.5em;
margin-bottom: 15px;
}
.option {
margin: 10px 0;
}
.results {
margin-top: 20px;
}
</style>
</head>
<body>
<div class="poll-container">
<div class="poll-title">가장 좋아하는 과일은?</div>
<form id="pollForm">
<div class="option">
<input type="radio" id="apple" name="fruit" value="apple">
<label for="apple">사과</label>
</div>
<div class="option">
<input type="radio" id="banana" name="fruit" value="banana">
<label for="banana">바나나</label>
</div>
<div class="option">
<input type="radio" id="grape" name="fruit" value="grape">
<label for="grape">포도</label>
</div>
<button type="button" onclick="submitVote()">투표하기</button>
</form>
<div class="results" id="pollResults"></div>
</div>
<script>
let votes = {
apple: 0,
banana: 0,
grape: 0
};
function submitVote() {
const form = document.getElementById('pollForm');
const selectedOption = form.fruit.value;
if (selectedOption) {
votes[selectedOption]++;
displayResults();
} else {
alert('투표할 항목을 선택해주세요!');
}
}
function displayResults() {
const resultsDiv = document.getElementById('pollResults');
resultsDiv.innerHTML = `
<p>사과: ${votes.apple}표</p>
<p>바나나: ${votes.banana}표</p>
<p>포도: ${votes.grape}표</p>
`;
}
</script>
</body>
</html>2. 코드 설명
- HTML: 투표 폼을 구성하며, 사용자는 사과, 바나나, 포도 중 하나를 선택할 수 있습니다.
- CSS: 폼 스타일링을 통해 깔끔하게 보이도록 설정했습니다.
- JavaScript: 사용자가 투표를 하면 해당 항목에 대한 표 수를 증가시키고 결과를 화면에 보여줍니다.
3. 추가 기능
- 투표 결과를 서버에 저장하고 싶다면, AJAX를 사용해 서버로 데이터를 전송하거나 Firebase 같은 외부 DB를 이용할 수 있습니다.
- 한 사용자가 여러 번 투표하지 못하게 하려면, 쿠키나 로컬 스토리지를 사용해 사용자의 투표 여부를 기록할 수 있습니다.
이 코드를 블로그에 삽입하면 간단한 인기 투표 기능을 구현할 수 있습니다.
'자유게시판' 카테고리의 다른 글
| 블로그에 간단한 게임 추가할수 있는 html 소스 (1) | 2024.09.06 |
|---|---|
| 블로그에서 사용할 수 있는 HTML 소스 (글꼴 및 스타일링,이미지 삽입 및 설명, 표 (Table), 유튜브 비디오 삽입, 버튼 삽입) (5) | 2024.09.06 |
| 2024년 최신 기술 분야 정리 (인공지능 (AI) 및 기계 학습,양자 컴퓨팅,메타버스,블록체인 및 Web3,에너지 기술,생명공학,로봇공학,5G/ 6G 및 통신 기술) (8) | 2024.08.31 |
| 2024년 무료로 사용하는 웹호스팅, 도메인, 가상전화번호 사이트 모음 (4) | 2024.08.22 |
| 태풍이 일본 태평양 연안을 강타, 교통 중단 및 정전 발생 (0) | 2024.08.16 |
댓글