我正在用从对象数组中“提取”的数据填充 HTML 表:
let cars = [{
licensee: '23456 NY',
arrival: new Date(2020, 9, 16, 11, 34, 30),
leave: new Date(),
isParked: true
},
{
licensee: '56456 NY',
arrival: new Date(2020, 8, 24, 10, 33, 30),
leave: new Date(2020, 8, 24, 13, 50, 35),
isParked: false
},
{
licensee: '56780 NY',
arrival: new Date(2020, 5, 12, 20, 33, 30),
leave: new Date(2020, 5, 12, 21, 33, 30),
isParked: false
}
];
const formatDate = (date) => {
var hours = date.getHours();
var minutes = date.getMinutes();
var ampm = hours >= 12 ? 'PM' : 'AM';
hours = hours % 12;
hours = hours ? hours : 12;
minutes = minutes < 10 ? '0' + minutes : minutes;
var strTime = hours + ':' + minutes + ' ' + ampm;
return date.getDate() + "/" + (date.getMonth() + 1) + "/" + date.getFullYear() + " " + strTime;
}
const secondsToHours = (d) => {
d = Number(d);
let h = Math.ceil(d / 3600);
return h;
}
const makeBill = (car) => {
let arrivedAt = new Date(car.arrival).getTime();
let leftAt = new Date(car.leave).getTime();
//duration in seconds
let duration = (leftAt - arrivedAt) / 1000;
let hoursBilled = secondsToHours(duration);
let billValue = car.isParked ? "-" : 10 + (hoursBilled - 1) * 5 + " LEI";
return billValue;
}
const renterTable = () => {
// Show new on top
cars.reverse();
let results = '';
for (var i = 0; i < cars.length; i++) {
results += `<tr>
<td>${cars[i].licensee}</td>
<td>${formatDate(cars[i].arrival)}</td>
<td>${formatDate(cars[i].leave)}</td>
<td class="text-center">${showStatus(cars[i])}</td>
<td class="text-right">${makeBill(cars[i])}</td>
<td class="text-right">
<button data-row="${i}" onclick="changeStatus(e)" class="btn btn-sm btn-success">Summary</button>
</td>
</tr>`;
}
document.querySelector("#parking tbody").innerHTML = results;
}
const showStatus = (car) => {
return car.isParked ? "In" : "Out";
}
白猪掌柜的
繁星coding
绝地无双
鸿蒙传说
相关分类