求助：如何用HTML/CSS/JS实现输入1-40数字跳转站内对应页面

这个表单结合switch语句的方案完全可行，下面是具体的实现步骤和代码示例：

1. 基础HTML表单结构 #

先搭建带输入验证的表单，限制用户只能输入1-40的数字：

<form id="numberForm">
  <label for="numInput">输入1-40之间的数字：</label>
  <input type="number" id="numInput" min="1" max="40" required>
  <button type="submit">跳转</button>
</form>

2. JavaScript关联表单与switch语句 #

监听表单提交事件，获取输入值后用switch匹配对应页面路径，完成跳转：

const form = document.getElementById('numberForm');
const input = document.getElementById('numInput');

form.addEventListener('submit', function(e) {
  e.preventDefault(); // 阻止表单默认刷新行为
  const num = parseInt(input.value);
  
  // 先做合法性校验
  if (isNaN(num) || num < 1 || num > 40) {
    alert('请输入1-40之间的有效数字');
    return;
  }

  // 用switch匹配对应页面路径
  let targetPage = '';
  switch(num) {
    case 1:
      targetPage = '/pages/page1.html';
      break;
    case 2:
      targetPage = '/pages/page2.html';
      break;
    // 依次添加3到39的case分支
    case 40:
      targetPage = '/pages/page40.html';
      break;
    default:
      alert('输入的数字不在范围内');
      return;
  }

  // 跳转至目标页面
  window.location.href = targetPage;
});

3. 优化小技巧 #

如果你的页面路径是有规律的（比如统一为/pages/page[数字].html），其实可以省去switch，直接拼接路径更高效：

// 替代switch的写法
targetPage = `/pages/page${num}.html`;

另外可以加些CSS优化表单样式，提升用户体验：

#numberForm {
  margin: 20px;
  display: flex;
  gap: 10px;
  align-items: center;
}

#numInput {
  padding: 8px;
  width: 80px;
}

button {
  padding: 8px 16px;
  cursor: pointer;
}

内容的提问来源于stack exchange，提问作者Cookie Man