投票生成工具
快速创建专业的在线投票活动
📖 使用指南 点击查看详细使用说明和功能介绍
收起 展开
📖 使用指南
点击查看详细使用说明和功能介绍
投票生成工具
免费在线投票生成工具，支持多种投票类型，可添加图片选项，生成完整的美观投票页面代码。
主要功能
1. 多种投票类型
- 单选投票：每个投票者只能选择一个选项
- 多选投票：可设置最多选择数量
- 排序投票：对选项进行排序
2. 灵活的选项设置
每个选项都支持：
- 选项文字：输入选项名称
- 选项图片：可添加图片URL
3. 完整的投票信息
- 投票标题：投票活动的名称
- 投票说明：投票活动的背景和规则介绍
- 开始日期：投票开始时间
- 结束日期：投票结束时间
4. 投票设置
- 实时显示结果：投票后可查看实时结果
- 登录要求：可设置是否需要登录才能投票
- 多选数量：设置多选投票的最大选择数
5. 完整HTML代码
生成的投票包含：
- 完整的HTML结构
- 美观的渐变CSS样式
- 响应式设计
- 交互效果
6. 实时预览
填写投票内容时，预览区域实时显示生成的HTML代码。
使用方法
- 填写投票标题和说明
- 选择投票类型
- 设置最多可选数量（多选投票）
- 设置开始和结束日期
- 添加投票选项
- 为选项添加图片（可选）
- 设置投票选项（实时结果、登录要求）
- 查看预览效果
- 点击"复制HTML投票"导出代码
适用场景
- 评选活动：最美员工、最佳项目等评选
- 民意调查：收集意见和看法
- 活动投票：摄影比赛、才艺展示投票
- 团队决策：团队内部决策投票
- 市场调研：消费者偏好调查
常见问题
生成的投票可以直接使用吗？
是的，生成的HTML投票包含完整的结构和样式，可以保存为.html文件直接使用。
支持添加图片吗？
支持，可以为每个选项添加图片URL。
可以限制投票数量吗？
可以，多选投票可以设置最多选择数量。
🗳️ 投票选项
选项 #1
📄 投票预览（HTML代码）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>投票活动</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
max-width: 700px;
margin: 40px auto;
padding: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
}
.vote-container {
background: white;
padding: 40px;
border-radius: 16px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
h1 {
font-size: 32px;
color: #2c3e50;
margin-bottom: 15px;
text-align: center;
}
.description {
color: #7f8c8d;
text-align: center;
margin-bottom: 25px;
font-size: 16px;
}
.meta {
display: flex;
justify-content: center;
gap: 30px;
margin-bottom: 30px;
padding: 20px;
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
border-radius: 12px;
font-size: 14px;
color: white;
}
.meta-item {
display: flex;
align-items: center;
gap: 8px;
}
.vote-type {
text-align: center;
padding: 10px 20px;
background: #ecf0f1;
border-radius: 20px;
margin-bottom: 30px;
font-size: 14px;
color: #7f8c8d;
}
.options-list {
display: flex;
flex-direction: column;
gap: 15px;
margin-bottom: 30px;
}
.option {
display: flex;
align-items: center;
gap: 15px;
padding: 20px;
background: #f8f9fa;
border: 3px solid #e9ecef;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s;
}
.option:hover {
border-color: #f5576c;
transform: translateX(5px);
}
.option.selected {
border-color: #f5576c;
background: linear-gradient(135deg, #fff5f5 0%, #ffe3e3 100%);
}
.option input {
width: 24px;
height: 24px;
cursor: pointer;
}
.option-content {
flex: 1;
}
.option-text {
font-size: 18px;
color: #2c3e50;
font-weight: 500;
margin-bottom: 5px;
}
.option-image {
max-width: 100px;
max-height: 100px;
border-radius: 8px;
margin-top: 10px;
}
.vote-btn {
width: 100%;
padding: 18px;
background: linear-gradient(135deg, #f5576c 0%, #f093fb 100%);
color: white;
border: none;
border-radius: 12px;
font-size: 20px;
font-weight: bold;
cursor: pointer;
transition: transform 0.3s;
}
.vote-btn:hover {
transform: scale(1.02);
}
.vote-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.timer {
text-align: center;
padding: 15px;
background: #fff3cd;
border-radius: 8px;
margin-bottom: 20px;
font-size: 16px;
color: #856404;
}
</style>
</head>
<body>
<div class="vote-container">
<h1>投票活动</h1>
<div class="meta">
<div class="meta-item">
<span>📅 开始: 待定</span>
</div>
<div class="meta-item">
<span>📅 结束: 待定</span>
</div>
</div>
<div class="vote-type">
投票类型: 单选投票
</div>
<p style="text-align: center; color: #999; padding: 40px;">
暂无投票选项
</p>
<button class="vote-btn" disabled>
立即投票
</button>
</div>
</body>
</html>
💡 功能特点
- • 支持3种投票类型：单选、多选、排序
- • 可自定义选项，支持添加图片
- • 生成完整的HTML投票代码，可直接使用
- • 美观的渐变样式和交互效果
- • 实时预览，填写时即可查看效果