创建一个在线投票应用是一个有趣的项目,它可以让用户轻松地投票给不同的选项。以下是一个简单的HTML和CSS模板,你可以基于它创建你自己的在线投票应用:
<!DOCTYPE html>
<html lang="en">
<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;
background-color: #f2f2f2;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: white;
text-align: center;
padding: 20px;
}
.container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
background-color: white;
}
.option {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
</style>
</head>
<body>
<header>
<h1>在线投票</h1>
</header>
<div class="container">
<h2>选项</h2>
<div class="option">
<span>选项1</span>
<button onclick="vote(1)">投票</button>
</div>
<div class="option">
<span>选项2</span>
<button onclick="vote(2)">投票</button>
</div>
<div class="option">
<span>选项3</span>
<button onclick="vote(3)">投票</button>
</div>
<h2>结果</h2>
<div id="results">
<!-- 投票结果将在JavaScript中动态添加 -->
</div>
</div>
<script>
let votes = [0, 0, 0];
function vote(option) {
votes[option - 1]++;
updateResults();
}
function updateResults() {
let resultsElement = document.getElementById('results');
resultsElement.innerHTML = '';
for (let i = 0; i < votes.length; i++) {
let resultElement = document.createElement('div');
resultElement.textContent = `选项${i + 1}: ${votes[i]} 票`;
resultsElement.appendChild(resultElement);
}
}
</script>
</body>
</html>
这个模板包括了三个投票选项,用户可以点击“投票”按钮来投票。投票结果会显示在页面上。
要创建你自己的在线投票应用,你需要按照以下步骤进行:
- 复制上面的HTML代码到一个文本编辑器中。
- 编辑选项的文本和数量,你可以添加更多的选项。
- 保存文件并命名为
index.html
。 - 使用浏览器打开这个HTML文件,查看你的在线投票应用。