js编写一个汽车租赁系统:继承 分析出系统的类:汽车类Vehicle,轿车类Car,客车类Bus,货车类Trucks 分析出类对应的成员: 汽车类:品牌brand,车牌vno,日租金rent,计算租金(天数)calcRent(days) 轿车类:继承至汽车类,型号type 客车类:继承至汽车类,座位数seat 货车类:继承至汽车类,载重量weight 车牌是随机的: 粤B+4位数 汽车租赁系统,UI界面化。 1.界面出现一个按钮,点击消失,进入页面开始加载所有车辆信息,并渲染到页面上 2.每个车辆信息得到鼠标时,下方就显示该车辆的详情信息 3.点击车辆信息时,直接进入租赁业务,弹窗询问租用的天数,告知费用
时间: 2023-11-28 21:51:00 浏览: 31
以下是一个简单的汽车租赁系统的代码实现,包含了上述要求:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>汽车租赁系统</title>
<style>
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin-top: 20px;
}
.vehicle {
margin-right: 20px;
margin-bottom: 20px;
width: 200px;
height: 200px;
border: 1px solid black;
text-align: center;
cursor: pointer;
}
.vehicle:hover {
background-color: lightgray;
}
.details {
margin-top: 10px;
text-align: center;
}
.form {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 200px;
border: 1px solid black;
background-color: white;
text-align: center;
display: none;
}
.form h3 {
margin-top: 20px;
}
.form input {
margin-top: 20px;
}
.form button {
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<button id="loadBtn">加载车辆信息</button>
</div>
<div class="form">
<h3>请输入租用天数</h3>
<input type="number" id="daysInput" placeholder="请输入天数">
<button id="confirmBtn">确定</button>
</div>
<script>
// 定义车辆类
class Vehicle {
constructor(brand, rent) {
this.brand = brand;
this.vno = `粤B${Math.floor(Math.random() * 10000).toString().padStart(4, '0')}`;
this.rent = rent;
}
calcRent(days) {
return days * this.rent;
}
}
// 定义轿车类
class Car extends Vehicle {
constructor(brand, rent, type) {
super(brand, rent);
this.type = type;
}
}
// 定义客车类
class Bus extends Vehicle {
constructor(brand, rent, seat) {
super(brand, rent);
this.seat = seat;
}
}
// 定义货车类
class Truck extends Vehicle {
constructor(brand, rent, weight) {
super(brand, rent);
this.weight = weight;
}
}
// 创建一些示例车辆
const car1 = new Car('Toyota', 200, 'Camry');
const car2 = new Car('Honda', 180, 'Accord');
const bus1 = new Bus('Yutong', 300, 50);
const bus2 = new Bus('Higer', 280, 40);
const truck1 = new Truck('Dongfeng', 400, 10);
const truck2 = new Truck('Foton', 380, 8);
// 将车辆添加到数组中
const vehicles = [car1, car2, bus1, bus2, truck1, truck2];
// 获取DOM元素
const loadBtn = document.getElementById('loadBtn');
const form = document.querySelector('.form');
const daysInput = document.getElementById('daysInput');
const confirmBtn = document.getElementById('confirmBtn');
// 加载车辆信息
loadBtn.addEventListener('click', () => {
const container = document.querySelector('.container');
container.innerHTML = '';
for (let vehicle of vehicles) {
const div = document.createElement('div');
div.classList.add('vehicle');
div.innerHTML = `<h4>${vehicle.brand}</h4><p>${vehicle.vno}</p>`;
div.addEventListener('mouseover', () => {
const details = document.createElement('div');
details.classList.add('details');
details.innerHTML = `<p>日租金:${vehicle.rent}元</p>`;
if (vehicle instanceof Car) {
details.innerHTML += `<p>型号:${vehicle.type}</p>`;
} else if (vehicle instanceof Bus) {
details.innerHTML += `<p>座位数:${vehicle.seat}</p>`;
} else if (vehicle instanceof Truck) {
details.innerHTML += `<p>载重量:${vehicle.weight}吨</p>`;
}
div.appendChild(details);
});
div.addEventListener('mouseout', () => {
const details = div.querySelector('.details');
if (details) {
div.removeChild(details);
}
});
div.addEventListener('click', () => {
form.style.display = 'block';
confirmBtn.addEventListener('click', () => {
const days = Number(daysInput.value);
if (isNaN(days) || days <= 0) {
alert('请输入有效天数');
} else {
const rent = vehicle.calcRent(days);
alert(`租用${vehicle.brand},共${days}天,费用为${rent}元`);
form.style.display = 'none';
daysInput.value = '';
}
});
});
container.appendChild(div);
}
loadBtn.style.display = 'none';
});
</script>
</body>
</html>
```
这个系统通过创建Vehicle、Car、Bus、Truck四个类来实现不同类型的车辆,并在页面上展示它们的品牌、车牌、日租金等基本信息。当鼠标悬停在某个车辆上时,会显示出该车辆的详细信息,包括型号、座位数或载重量。当点击某个车辆时,会弹出一个输入框,询问租用天数,并计算出费用。