写一个html页面,顶部导航条只写活动人数。创立一个表单,分别可以输入最少人数最大人数。如果最小人数不为0且小于最大人数,活动自动取消。最大报名人数不超过500.最后有一个中间的确认按钮用vant'
时间: 2023-05-11 21:04:52 浏览: 191
C#写的一个很清新的留言板,有原项目
5星 · 资源好评率100%
非常感谢您的问题!以下是我为您提供的答案:
您可以使用以下代码来创建一个包含顶部导航条和表单的 HTML 页面:
```html
<!DOCTYPE html>
<html>
<head>
<title>活动报名</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/vant/2.12.23/index.css">
</head>
<body>
<div class="nav-bar">
<span>活动人数:</span>
<span id="activity-count">0</span>
</div>
<div class="form">
<form>
<label for="min-count">最少人数:</label>
<input type="number" id="min-count" name="min-count" min="0" max="500" required>
<label for="max-count">最大人数:</label>
<input type="number" id="max-count" name="max-count" min="0" max="500" required>
<button type="submit" id="confirm-btn" class="van-button van-button--primary">确认</button>
</form>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vant/2.12.23/index.js"></script>
<script>
var activityCount = 0;
var activityCountEl = document.getElementById('activity-count');
var minCountEl = document.getElementById('min-count');
var maxCountEl = document.getElementById('max-count');
var confirmBtn = document.getElementById('confirm-btn');
minCountEl.addEventListener('input', function() {
if (minCountEl.value > maxCountEl.value) {
minCountEl.setCustomValidity('最少人数不能大于最大人数');
} else {
minCountEl.setCustomValidity('');
}
});
maxCountEl.addEventListener('input', function() {
if (maxCountEl.value > 500) {
maxCountEl.setCustomValidity('最大人数不能超过500');
} else if (minCountEl.value > maxCountEl.value) {
maxCountEl.setCustomValidity('最大人数不能小于最少人数');
} else {
maxCountEl.setCustomValidity('');
}
});
confirmBtn.addEventListener('click', function(event) {
event.preventDefault();
if (minCountEl.checkValidity() && maxCountEl.checkValidity()) {
activityCount = Math.floor(Math.random() * (parseInt(maxCountEl.value) - parseInt(minCountEl.value) + 1)) + parseInt(minCountEl.value);
activityCountEl.innerText = activityCount;
if (activityCount === 0 || activityCount > 500) {
alert('活动取消');
}
}
});
</script>
</body>
</html>
```
这个页面包含一个顶部导航条和一个表单,表单中包含两个输入框和一个确认按钮。当用户输入最少人数和最大人数后,点击确认按钮,页面会随机生成一个活动人数,并将其显示在顶部导航条中。如果活动人数为0或超过500,页面会弹出一个提示框,告诉用户活动已经取消。
希望这个答案能够帮助到您!如果您有任何其他问题,请随时问我。
阅读全文