当前位置：首页 > 行业动态 > 正文

html投票网站模板

admin
行业动态
2025-05-01
2336

HTML投票网站模板含投票选项、计数等功能，具交互式界面，兼容多设备，可快速

投票网站模板结构设计

模块	功能描述
页面头部	显示网站标题及说明文字
投票表单	包含投票选项（单选/多选）、提交按钮
结果展示区	实时显示投票统计结果
页面底部	版权信息或额外说明

HTML基础结构

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">投票系统</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>请选择您喜欢的选项</h1>
        <form id="voteForm">
            <div class="options">
                <label><input type="radio" name="option" value="A"> 选项A</label>
                <label><input type="radio" name="option" value="B"> 选项B</label>
                <label><input type="radio" name="option" value="C"> 选项C</label>
            </div>
            <button type="submit">提交投票</button>
        </form>
        <div id="result">
            <h2>当前结果</h2>
            <ul id="resultsList"></ul>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS样式设计

属性	作用	示例代码
容器居中	在页面中居中显示	`margin: 0 auto; width: 600px;`
选项布局	垂直排列投票选项，提升可读性	`.options label { display: block; }`
按钮样式	突出提交按钮，引导用户操作	`button { background-color: #4CAF50; }`
结果高亮	区分结果显示区域与投票区域	`#result { border-top: 1px solid #ccc; }`

JavaScript交互逻辑

document.getElementById('voteForm').addEventListener('submit', function(e) {
    e.preventDefault(); // 阻止表单默认提交
    const selected = e.target.elements['option'].value;
    if (!selected) {
        alert('请选择一个选项');
        return;
    }
    // 更新结果统计
    const results = JSON.parse(localStorage.getItem('voteResults')) || {};
    results[selected] = (results[selected] || 0) + 1;
    localStorage.setItem('voteResults', JSON.stringify(results));
    renderResults();
});
function renderResults() {
    const results = JSON.parse(localStorage.getItem('voteResults')) || {};
    const list = document.getElementById('resultsList');
    list.innerHTML = '';
    for (const key in results) {
        const li = document.createElement('li');
        li.textContent = `${key}: ${results[key]}票`;
        list.appendChild(li);
    }
}
// 页面加载时渲染已有结果
renderResults();

功能扩展建议

扩展方向	实现方式
支持多选投票	将`type="radio"`改为`type="checkbox"`
动态添加选项	通过JavaScript生成选项DOM元素
限制重复投票	结合`localStorage`记录用户IP或设备信息
后台数据存储	通过AJAX将投票结果发送至服务器数据库