去创作
<!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>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
padding: 20px;
}
.container {
width: 100%;
max-width: 500px;
}
.card {
background: white;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
overflow: hidden;
transition: transform 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
}
.card-header {
background: #4a6ee0;
color: white;
padding: 20px;
text-align: center;
}
.card-header h2 {
font-size: 1.5rem;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.card-body {
padding: 30px;
}
.input-group {
margin-bottom: 25px;
}
.input-group label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: #333;
font-size: 1rem;
}
.input-row {
display: flex;
gap: 15px;
margin-bottom: 20px;
}
.gender-input {
flex: 1;
display: flex;
flex-direction: column;
}
.gender-label {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
font-weight: 500;
color: #555;
}
.gender-icon {
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
.male-icon {
background: #4a6ee0;
color: white;
}
.female-icon {
background: #e04a9d;
color: white;
}
input[type="number"] {
width: 100%;
padding: 12px 15px;
border: 2px solid #e1e5ee;
border-radius: 8px;
font-size: 1rem;
transition: all 0.3s;
outline: none;
}
input[type="number"]:focus {
border-color: #4a6ee0;
box-shadow: 0 0 0 3px rgba(74, 110, 224, 0.1);
}
.total-display {
background: #f8f9fa;
border-radius: 8px;
padding: 15px;
margin-top: 10px;
text-align: center;
font-weight: 500;
color: #4a6ee0;
border: 1px dashed #4a6ee0;
}
.button-group {
display: flex;
gap: 15px;
margin-top: 25px;
}
button {
flex: 1;
padding: 14px;
border: none;
border-radius: 8px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
}
.submit-btn {
background: #4a6ee0;
color: white;
}
.submit-btn:hover {
background: #3a5ec0;
transform: translateY(-2px);
}
.cancel-btn {
background: #f1f3f9;
color: #4a6ee0;
}
.cancel-btn:hover {
background: #e4e7f0;
}
.error-message {
color: #e04a4a;
font-size: 0.85rem;
margin-top: 5px;
display: none;
}
@media (max-width: 480px) {
.input-row {
flex-direction: column;
gap: 15px;
}
.card-body {
padding: 20px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="card">
<div class="card-header">
<h2>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 21V19C16 17.9391 15.5786 16.9217 14.8284 16.1716C14.0783 15.4214 13.0609 15 12 15H6C4.93913 15 3.92172 15.4214 3.17157 16.1716C2.42143 16.9217 2 17.9391 2 19V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9 11C11.2091 11 13 9.20914 13 7C13 4.79086 11.2091 3 9 3C6.79086 3 5 4.79086 5 7C5 9.20914 6.79086 11 9 11Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M22 21V19C21.9993 18.1137 21.7044 17.2528 21.1614 16.5523C20.6184 15.8519 19.8581 15.3516 19 15.13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16 3.13C16.8604 3.35031 17.623 3.85071 18.1676 4.55232C18.7122 5.25392 19.0078 6.11683 19.0078 7.005C19.0078 7.89318 18.7122 8.75608 18.1676 9.45769C17.623 10.1593 16.8604 10.6597 16 10.88" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
活动人数上限设置
</h2>
</div>
<div class="card-body">
<div class="input-group">
<label for="totalLimit">活动总人数上限</label>
<input type="number" id="totalLimit" min="1" max="1000" placeholder="请输入总人数上限">
<div class="error-message" id="totalError">请输入有效的总人数上限</div>
</div>
<div class="input-row">
<div class="gender-input">
<div class="gender-label">
<span class="gender-icon male-icon">♂</span>
男性人数上限
</div>
<input type="number" id="maleLimit" min="0" max="500" placeholder="男性人数">
<div class="error-message" id="maleError">请输入有效的男性人数</div>
</div>
<div class="gender-input">
<div class="gender-label">
<span class="gender-icon female-icon">♀</span>
女性人数上限
</div>
<input type="number" id="femaleLimit" min="0" max="500" placeholder="女性人数">
<div class="error-message" id="femaleError">请输入有效的女性人数</div>
</div>
</div>
<div class="total-display" id="totalDisplay">
当前设置：男性 0 人，女性 0 人，总计 0 人
</div>
<div class="button-group">
<button class="cancel-btn">取消</button>
<button class="submit-btn">确认设置</button>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const totalLimitInput = document.getElementById('totalLimit');
const maleLimitInput = document.getElementById('maleLimit');
const femaleLimitInput = document.getElementById('femaleLimit');
const totalDisplay = document.getElementById('totalDisplay');
const totalError = document.getElementById('totalError');
const maleError = document.getElementById('maleError');
const femaleError = document.getElementById('femaleError');
const submitBtn = document.querySelector('.submit-btn');
const cancelBtn = document.querySelector('.cancel-btn');
// 更新总人数显示
function updateTotalDisplay() {
const maleValue = maleLimitInput.value || 0;
const femaleValue = femaleLimitInput.value || 0;
const totalValue = parseInt(maleValue) + parseInt(femaleValue);
totalDisplay.textContent = `当前设置：男性 ${maleValue} 人，女性 ${femaleValue} 人，总计 ${totalValue} 人`;
// 验证总人数是否超过上限
if (totalLimitInput.value && totalValue > parseInt(totalLimitInput.value)) {
totalDisplay.style.color = '#e04a4a';
totalDisplay.style.borderColor = '#e04a4a';
} else {
totalDisplay.style.color = '#4a6ee0';
totalDisplay.style.borderColor = '#4a6ee0';
}
}
// 输入验证
function validateInputs() {
let isValid = true;
// 重置错误状态
totalError.style.display = 'none';
maleError.style.display = 'none';
femaleError.style.display = 'none';
// 验证总人数
if (!totalLimitInput.value || parseInt(totalLimitInput.value) <= 0) {
totalError.style.display = 'block';
isValid = false;
}
// 验证男性人数
if (!maleLimitInput.value || parseInt(maleLimitInput.value) < 0) {
maleError.style.display = 'block';
isValid = false;
}
// 验证女性人数
if (!femaleLimitInput.value || parseInt(femaleLimitInput.value) < 0) {
femaleError.style.display = 'block';
isValid = false;
}
// 验证男女人数总和是否超过总人数上限
if (totalLimitInput.value && maleLimitInput.value && femaleLimitInput.value) {
const totalValue = parseInt(maleLimitInput.value) + parseInt(femaleLimitInput.value);
if (totalValue > parseInt(totalLimitInput.value)) {
alert('男女人数总和不能超过总人数上限！');
isValid = false;
}
}
return isValid;
}
// 事件监听
totalLimitInput.addEventListener('input', updateTotalDisplay);
maleLimitInput.addEventListener('input', updateTotalDisplay);
femaleLimitInput.addEventListener('input', updateTotalDisplay);
submitBtn.addEventListener('click', function() {
if (validateInputs()) {
alert('人数上限设置成功！');
// 在实际应用中，这里可以添加提交数据的代码
}
});
cancelBtn.addEventListener('click', function() {
if (confirm('确定要取消设置吗？所有输入将被清空。')) {
totalLimitInput.value = '';
maleLimitInput.value = '';
femaleLimitInput.value = '';
updateTotalDisplay();
}
});
// 初始化显示
updateTotalDisplay();
});
</script>
</body>
</html>
人数上限弹出输入框
一次购买，永久免费
评论
{{item.path.join('.')}}
{{item.item.name}}