衍生出来的想法……👉看这个页面
2025-07-03
♾️ html 代码:<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>设备记录</title>
<style>
table {
text-align: center;
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
}
.profit {
color: green;
}
.loss {
color: red;
}
</style>
</head>
<body>
<div class="container">
<table>
<thead>
<tr>
<th>设备</th>
<th>购入价格</th>
<th>购入时间</th>
<th>卖出时间</th>
<th>卖出价格</th>
<th>持有天数</th>
<th>每日均价</th>
<th>盈利or亏损</th>
<th>回本？</th>
</tr>
</thead>
<tbody id="deviceTableBody"></tbody>
</table>
</div>
<script>
const devices = [
{ name: "💻iPad2 二手", price: 180, purchaseDate: "2019-07-02", sellDate: "2020-08-27", sellPrice: 105 },
{ name: "⌚️荣耀S1 样品二手", price: 200, purchaseDate: "2020-01-27", sellDate: "2020-10-20", sellPrice: 140 },
{ name: "⌚️小米color 二手", price: 349, purchaseDate: "2020-09-30", sellDate: "2021-01-13", sellPrice: 290 },
{ name: "⌚️华为手环6 NFC", price: 319, purchaseDate: "2021-09-07", sellDate: "2023-09-06", sellPrice: 138 },
{ name: "⌚️红米Watch一代 二手", price: 70, purchaseDate: "2023-01-04", sellDate: "2023-01-31", sellPrice: 75 },
{ name: "🔋M85C", price: 700, purchaseDate: "2023-09-13", sellDate: "2024-05-15", sellPrice: 0 },
{ name: "🔋M85C", price: 700, purchaseDate: "2024-05-15", sellDate: "2024-12-20", sellPrice: 0 },
{ name: "🏍碟刹皮", price: 0, purchaseDate: "2023-09-13", sellDate: "2024-12-20", sellPrice: 0 },
];
function calculateDeviceData(device) {
const today = new Date();
const price = parseFloat(device.price);
const sellPrice = parseFloat(device.sellPrice);
const purchaseDate = new Date(device.purchaseDate);
const sellDate = new Date(device.sellDate);
const result = {
days: 0,
averagePrice: '---',
profitLossText: '---',
retirementStatus: '---',
profitLossClass: ''
};
if (isNaN(price) || isNaN(sellPrice) || isNaN(purchaseDate.getTime()) || isNaN(sellDate.getTime())) {
return result;
}
if (sellDate > today) {
result.averagePrice = '未出售';
result.profitLossText = '未出售';
return result;
}
const timeDiff = sellDate - purchaseDate;
const days = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
result.days = days + ' 天';
if (days <= 0) {
result.averagePrice = "日期无效";
result.profitLossText = "日期无效";
return result;
}
if (price === 0) {
result.averagePrice = "免费";
result.profitLossText = "无成本";
result.retirementStatus = "✓";
return result;
}
const average = (price / days).toFixed(2);
result.averagePrice = `${average} 元/天`;
const profit = (sellPrice - price).toFixed(2);
if (profit >= 0) {
result.profitLossText = `盈利 ${profit} 元`;
result.profitLossClass = "profit";
} else {
result.profitLossText = `亏损 ${Math.abs(profit)} 元`;
result.profitLossClass = "loss";
}
result.retirementStatus = average < 1 ? "✓" : "✕";
return result;
}
function renderTable() {
const tbody = document.getElementById("deviceTableBody");
tbody.innerHTML = "";
devices.forEach(device => {
const result = calculateDeviceData(device);
const tr = document.createElement("tr");
tr.innerHTML = `
<td>${device.name}</td>
<td>${device.price}</td>
<td>${device.purchaseDate}</td>
<td>${device.sellDate}</td>
<td>${device.sellPrice}</td>
<td>${result.days}</td>
<td>${result.averagePrice}</td>
<td class="${result.profitLossClass}">${result.profitLossText}</td>
<td>${result.retirementStatus}</td>
`;
tbody.appendChild(tr);
});
}
window.onload = renderTable;
</script>
</body>
</html>2024-12-08
♾️ html 代码: <style>
table {
text-align: center; /* 表格内容居中 */
}
</style>
<div class="container">
<table>
<thead>
<tr>
<th>设备编号</th>
<th>购买价格 (元)</th>
<th>购买时间</th>
<th>卖出时间</th>
<th>卖出价格 (元)</th>
<th>购买到卖出天数</th>
<th>每日均价 (元)</th>
<th>盈利/亏损 (元)</th>
</tr>
</thead>
<tbody id="deviceTableBody">
<!-- 初始设备记录（示例） -->
<tr>
<td>1</td>
<td class="price">2000</td>
<td class="purchaseDate">2023-01-01</td>
<td class="sellDate">2024-01-01</td>
<td class="sellPrice">2500</td>
<td class="days">0</td>
<td class="averagePrice">0.00</td>
<td class="profitLoss">0.00</td>
</tr>
<tr>
<td>2</td>
<td class="price">1500</td>
<td class="purchaseDate">2022-11-01</td>
<td class="sellDate">2023-11-01</td>
<td class="sellPrice">1400</td>
<td class="days">0</td>
<td class="averagePrice">0.00</td>
<td class="profitLoss">0.00</td>
</tr>
</tbody>
</table>
<div class="result" id="result"></div>
</div>
<script>
// 更新每一行的数据
function updateRow(row) {
var price = parseFloat(row.querySelector('.price').textContent);
var sellPrice = parseFloat(row.querySelector('.sellPrice').textContent);
var purchaseDate = new Date(row.querySelector('.purchaseDate').textContent);
var sellDate = new Date(row.querySelector('.sellDate').textContent);
// 检查数据是否有效
if (isNaN(price) || isNaN(sellPrice) || isNaN(purchaseDate.getTime()) || isNaN(sellDate.getTime())) {
return; // 如果数据无效，不进行计算
}
// 计算从购买日期到卖出日期的天数
var timeDifference = sellDate - purchaseDate;
var days = Math.floor(timeDifference / (1000 * 60 * 60 * 24)); // 转换为天数
// 更新购买到卖出天数
row.querySelector('.days').textContent = days;
// 如果天数为负，显示错误信息
if (days <= 0) {
row.querySelector('.averagePrice').textContent = "日期无效";
row.querySelector('.profitLoss').textContent = "日期无效";
return;
}
// 计算每日均价
var averagePrice = (price / days).toFixed(2);
// 更新每日均价
row.querySelector('.averagePrice').textContent = averagePrice;
// 计算盈利/亏损
var profitLoss = (sellPrice - price).toFixed(2);
// 判断盈利或亏损
var profitLossText = profitLoss >= 0 ? `盈利 ${profitLoss}元` : `亏损 ${Math.abs(profitLoss)}元`;
// 更新盈利/亏损
row.querySelector('.profitLoss').textContent = profitLossText;
}
// 获取所有的设备行并进行计算
function calculateAll() {
var rows = document.querySelectorAll('#deviceTableBody tr');
rows.forEach(function(row) {
updateRow(row);
});
}
// 初始化计算
window.onload = function() {
calculateAll();
}
</script>