当前位置：首页 > JavaScript

js实现投票

2026-02-02 01:45:46JavaScript

实现投票功能的基本思路

投票功能通常包括前端界面展示、用户交互、数据提交和后端处理几个部分。以下是一个基于纯前端JavaScript的简单实现示例，实际项目中需结合后端存储数据。

创建投票界面HTML结构

<div id="vote-container">
  <h3>请选择您最喜欢的编程语言：</h3>
  <div class="vote-option">
    <input type="radio" name="language" id="js" value="JavaScript">
    <label for="js">JavaScript</label>
  </div>
  <div class="vote-option">
    <input type="radio" name="language" id="py" value="Python">
    <label for="py">Python</label>
  </div>
  <div class="vote-option">
    <input type="radio" name="language" id="java" value="Java">
    <label for="java">Java</label>
  </div>
  <button id="submit-vote">提交投票</button>
  <div id="results"></div>
</div>

使用JavaScript处理投票逻辑

// 初始化投票数据（实际项目中应从后端获取）
let voteData = {
  "JavaScript": 0,
  "Python": 0,
  "Java": 0
};

// 获取DOM元素
const submitBtn = document.getElementById('submit-vote');
const resultsDiv = document.getElementById('results');

// 提交投票事件处理
submitBtn.addEventListener('click', () => {
  const selectedOption = document.querySelector('input[name="language"]:checked');

  if (!selectedOption) {
    alert('请先选择一个选项！');
    return;
  }

  const selectedValue = selectedOption.value;
  voteData[selectedValue] += 1;

  // 更新结果显示
  displayResults();

  // 实际项目中这里应该发送数据到后端
  console.log('投票已提交:', voteData);
});

// 显示投票结果
function displayResults() {
  let html = '<h4>当前投票结果：</h4><ul>';
  for (const [key, value] of Object.entries(voteData)) {
    html += `<li>${key}: ${value}票</li>`;
  }
  html += '</ul>';
  resultsDiv.innerHTML = html;
}

// 初始化显示结果
displayResults();

添加CSS样式增强用户体验

#vote-container {
  max-width: 400px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.vote-option {
  margin: 10px 0;
}

#submit-vote {
  margin-top: 15px;
  padding: 8px 16px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

#submit-vote:hover {
  background-color: #45a049;
}

#results {
  margin-top: 20px;
}