javascript
// script.js
const form = document.getElementById('time-form');
const result = document.getElementById('result');form.addEventListener('submit', (e) => {e.preventDefault();const station = document.getElementById('station').value;const line = document.getElementById('line').value;if (!station || !line) {alert('请输入车站和线路');return;}// 这里用占位符表示异步请求获取实时地铁时间const time = '10 分钟';result.innerHTML = `下一趟列车预计在 ${time} 到达 ${station} 站`;
});
css
// style.css
body {font-family: Arial, sans-serif;
}.container {display: flex;justify-content: space-around;gap: 2rem;
}.form-wrapper {max-width: 300px;
}form {display: flex;flex-direction: column;gap: 1rem;
}label {font-weight: bold;
}input[type="text"], select {width: 100%;padding: 0.5rem;border: 1px solid ccc;border-radius: 5px;
}input[type="submit"] {background-color: 007bff;color: fff;padding: 0.5rem 1rem;border: none;border-radius: 5px;cursor: pointer;
}.result-wrapper {max-width: 500px;
}result {background-color: f5f5f5;padding: 1rem;border: 1px solid ccc;border-radius: 5px;text-align: center;
}
