🔥HTML+CSS+JS客房预订系统实战教程🔥 | 附源码 - 常规

🔥 想自己动手做一个客房预订系统？这篇教程帮你搞定！🔥

本文将手把手带你使用 HTML、CSS 和 JavaScript 构建一个简易的客房预订系统。别担心，即使你是前端小白也能轻松上手！😉

🚀 项目效果演示 🚀

我们将创建一个网页表单，用户可以填写姓名、入住日期、离店日期、房间类型和其他要求，点击'预定'按钮后，系统会显示预订详情。

🔨 代码实战 🔨

1. HTML 代码 (index.html)

<!DOCTYPE html>
<html>
<head>
  <title>客房预订系统</title>
  <link rel='stylesheet' type='text/css' href='styles.css'>
</head>
<body>
  <h1>客房预订系统</h1>

  <form id='booking-form'>
    <label for='name'>姓名：</label>
    <input type='text' id='name' required><br><br>

    <label for='check-in-date'>入住日期：</label>
    <input type='date' id='check-in-date' required><br><br>

    <label for='check-out-date'>离店日期：</label>
    <input type='date' id='check-out-date' required><br><br>

    <label for='room-type'>房间类型：</label>
    <select id='room-type' required>
      <option value=''>请选择</option>
      <option value='单人间'>单人间</option>
      <option value='双人间'>双人间</option>
      <option value='套房'>套房</option>
    </select><br><br>

    <label for='additional-requests'>其他要求：</label>
    <textarea id='additional-requests'></textarea><br><br>

    <button type='submit'>预定</button>
  </form>

  <div id='booking-details'></div>

  <script src='script.js'></script>
</body>
</html>

2. CSS 代码 (styles.css)

body {
  font-family: Arial, sans-serif;
  margin: 20px;
}

h1 {
  text-align: center;
}

form {
  max-width: 300px;
  margin: 0 auto;
}

label {
  display: block;
  margin-bottom: 5px;
}

input[type='text'],
input[type='date'],
select,
textarea {
  width: 100%;
  padding: 5px;
  margin-bottom: 10px;
}

button {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
}

#booking-details {
  margin-top: 20px;
}

3. JavaScript 代码 (script.js)

document.getElementById('booking-form').addEventListener('submit', function(event) {
  event.preventDefault();

  var name = document.getElementById('name').value;
  var checkInDate = document.getElementById('check-in-date').value;
  var checkOutDate = document.getElementById('check-out-date').value;
  var roomType = document.getElementById('room-type').value;
  var additionalRequests = document.getElementById('additional-requests').value;

  var bookingDetails = '<h2>预定详情</h2>' +
                       '<p><strong>姓名:</strong> ' + name + '</p>' +
                       '<p><strong>入住日期:</strong> ' + checkInDate + '</p>' +
                       '<p><strong>离店日期:</strong> ' + checkOutDate + '</p>' +
                       '<p><strong>房间类型:</strong> ' + roomType + '</p>' +
                       '<p><strong>其他要求:</strong> ' + additionalRequests + '</p>';

  document.getElementById('booking-details').innerHTML = bookingDetails;
});

💡 代码解析 💡

HTML 部分：我们创建了一个表单，包含姓名、入住日期、离店日期、房间类型和额外要求等字段。
CSS 部分：我们为页面元素添加了一些简单的样式，使其更美观。
JavaScript 部分：我们使用 JavaScript 获取表单数据，并在用户提交表单时显示预订详情。

🎉 总结 🎉

本教程提供了一个简易客房预订系统的基础框架，你可以根据实际需求进行扩展和完善。例如，你可以添加房间数量选择、价格计算、用户登录等功能，使其更加实用。

希望这篇教程对你有所帮助！如果你有任何问题或建议，欢迎在下方留言。😊