正文

如何用原生JS轻松打造实用的车票购买界面？🚗✨快速上手教程，让你轻松掌握购票技巧！

/0 浏览量
1103

在数字化时代，打造一个实用的车票购买界面不仅能够提升用户体验，还能提高服务效率。今天，就让我们一起用原生JavaScript来打造一个简单的车票购买界面。下面，我将带你一步步完成这个项目。

准备工作

在开始之前，请确保你：

  • 熟悉HTML和CSS的基本语法。
  • 了解JavaScript的基本概念，如变量、函数、事件处理等。

界面设计

首先，我们需要设计一个基本的界面。以下是一个简单的车票购买界面布局：

  • 车票信息展示区域：显示车次、发车时间、票价等信息。
  • 选择购票信息区域：包括选择车次、座位、乘客姓名等。
  • 支付区域：展示票价，并提供支付按钮。

HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>车票购买界面</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="ticket-container">
  <div class="ticket-info">
    <h2>车次信息</h2>
    <p>车次：XX-1234</p>
    <p>发车时间：2023-12-01 08:00</p>
    <p>票价：￥100</p>
  </div>
  <div class="booking-info">
    <h2>购票信息</h2>
    <label for="train-number">车次：</label>
    <input type="text" id="train-number" readonly value="XX-1234">
    <label for="seat">座位：</label>
    <select id="seat">
      <option value="1A">1A</option>
      <option value="1B">1B</option>
      <option value="1C">1C</option>
    </select>
    <label for="passenger">乘客姓名：</label>
    <input type="text" id="passenger" required>
  </div>
  <div class="payment-info">
    <h2>支付信息</h2>
    <p>票价：￥100</p>
    <button id="pay-btn">支付</button>
  </div>
</div>
<script src="script.js"></script>
</body>
</html>

CSS样式

/* styles.css */
body {
  font-family: Arial, sans-serif;
}

.ticket-container {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

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

input, select {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #5cb85c;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #4cae4c;
}

JavaScript实现

接下来，我们将使用JavaScript来增强界面的交互性。

获取元素

// script.js
const trainNumber = document.getElementById('train-number');
const seat = document.getElementById('seat');
const passenger = document.getElementById('passenger');
const payBtn = document.getElementById('pay-btn');

绑定事件

payBtn.addEventListener('click', function() {
  const seatValue = seat.value;
  const passengerValue = passenger.value;

  if (!seatValue || !passengerValue) {
    alert('请填写完整信息！');
    return;
  }

  alert(`车次：${trainNumber.value}\n座位：${seatValue}\n乘客姓名：${passengerValue}\n票价：￥100`);
});

总结

通过以上步骤，我们已经成功打造了一个简单的车票购买界面。这个界面包含了车票信息展示、购票信息选择和支付信息展示等功能。你可以根据自己的需求进一步扩展这个界面，例如添加实时车次查询、座位状态显示、在线支付等功能。

希望这个教程能够帮助你快速上手，祝你编程愉快！🚀🎉

-- 展开阅读全文 --