http://xhslink.com/a/4qcff7XhYAd1
因为很有趣，就让Ai写个差不多来用了，代码如下……！
效果就👉这个页面展示的这样
2025-07-03
♾️ html 代码:<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>设备资产列表</title>
<style>
table {
width: 100%;
text-align: center;
border-collapse: collapse;
}
th, td {
border: 1px solid #aaa;
padding: 8px;
}
</style>
</head>
<body>
<div class="container">
<table>
<thead>
<tr>
<th>设备</th>
<th>购入价格</th>
<th>购入时间</th>
<th>设备规格</th>
<th>持有天数</th>
<th>每日成本</th>
<th>回本？</th>
</tr>
</thead>
<tbody id="deviceTableBody"></tbody>
</table>
</div>
<script>
const devices = [
{ "name": "⌚️荣耀手环3 NFC 二手", "price": 80, "purchaseDate": "2019-05-27", "spec": "-" },
{ "name": "📱iPhone 7s 日版二手", "price": 1699, "purchaseDate": "2019-09-01", "spec": "亮黑色128GB" },
{ "name": "💻科腾游戏方向盘 二手", "price": 168.56, "purchaseDate": "2020-01-03", "spec": "-" },
{ "name": "💿金士顿A400（假货）二手", "price": 168, "purchaseDate": "2020-07-08", "spec": "240GB（应急用）" },
{ "name": "💻铭瑄GT710重锤显卡 二手", "price": 130, "purchaseDate": "2021-06-07", "spec": "亮机卡" },
{ "name": "💻蓝宝石RX460显卡 二手", "price": 430, "purchaseDate": "2021-06-18", "spec": "2GB（失踪中）" },
{ "name": "💻华硕Z370M-Plus主板 二手", "price": 288, "purchaseDate": "2022-09-25", "spec": "-" },
{ "name": "⌚️红米Watch2 二手", "price": 128, "purchaseDate": "2023-01-13", "spec": "-" },
{ "name": "⌚️iWatch S3 二手", "price": 350, "purchaseDate": "2023-01-29", "spec": "38mm" },
{ "name": "📱iPhone XR 国行二手", "price": 1888, "purchaseDate": "2023-05-16", "spec": "黑色128GB" },
{ "name": "🏍九号M85C", "price": 5399, "purchaseDate": "2023-09-13", "spec": "银灰色" },
{ "name": "📱华为Mate 30 5G 二手", "price": 630, "purchaseDate": "2023-12-11", "spec": "8G 128GB" },
{ "name": "💻Macmini M2 国行二手", "price": 2790, "purchaseDate": "2023-12-19", "spec": "8G 256GB" },
{ "name": "📱华为Mate 30 5G 修理屏幕", "price": 650, "purchaseDate": "2023-12-24", "spec": "（换原装屏）" },
{ "name": "💿东芝512GB SSD 二手", "price": 178, "purchaseDate": "2024-04-25", "spec": "512GB（DIY移动SSD）" },
{ "name": "💿西数1TB紫盘 二手", "price": 135, "purchaseDate": "2024-05-09", "spec": "1TB（NAS用）" },
{ "name": "💿西数4TB紫盘 二手", "price": 370, "purchaseDate": "2024-05-11", "spec": "4TB（NAS用）" },
{ "name": "📱iPhone XR 美版二手", "price": 650, "purchaseDate": "2024-05-31", "spec": "64GB" },
{ "name": "⌚️华为Fit New 二手", "price": 166, "purchaseDate": "2024-07-23", "spec": "-" },
{ "name": "📱LG v30 二手", "price": 180, "purchaseDate": "2024-08-24", "spec": "4G 64GB" },
{ "name": "⌚️华为Watch D 二手", "price": 600, "purchaseDate": "2024-12-01", "spec": "-" },
{ "name": "🔋iPhone XR", "price": 120, "purchaseDate": "2024-12-11", "spec": "-" },
{ "name": "🔋M85C", "price": 700, "purchaseDate": "2024-12-20", "spec": "2W4公里，九号专用铅酸电池" },
{ "name": "🏍碟刹皮", "price": 30, "purchaseDate": "2024-12-24", "spec": "M85C（含手工费）" }
];
function calculateDays(dateString) {
const today = new Date();
const purchase = new Date(dateString);
const diff = Math.floor((today - purchase) / (1000 * 60 * 60 * 24));
return diff;
}
function renderTable() {
const tbody = document.getElementById("deviceTableBody");
devices.forEach(device => {
const tr = document.createElement("tr");
const days = calculateDays(device.purchaseDate);
const costPerDay = days > 0 ? (device.price / days).toFixed(2) : "日期无效";
const status = days > 0 && costPerDay < 1 ? "✓" : days <= 0 ? "日期无效" : "✕";
tr.innerHTML = `
<td>${device.name}</td>
<td>${device.price}</td>
<td>${device.purchaseDate}</td>
<td>${device.spec}</td>
<td>${days > 0 ? days : '0'}</td>
<td>${costPerDay}</td>
<td>${status}</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>
</tr>
</thead>
<tbody id="deviceTableBody">
<!-- 初始设备记录（示例） -->
<tr>
<td>1</td>
<td class="price">2000</td>
<td class="purchaseDate">2023-01-01</td>
<td class="daysUsed">0</td>
<td class="costPerDay">0.00</td>
</tr>
<tr>
<td>2</td>
<td class="price">1500</td>
<td class="purchaseDate">2023-03-15</td>
<td class="daysUsed">0</td>
<td class="costPerDay">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 purchaseDate = new Date(row.querySelector('.purchaseDate').textContent);
var currentDate = new Date();
if (isNaN(price) || isNaN(purchaseDate.getTime())) {
return; // 如果数据无效，不进行计算
}
// 计算从购买日期到现在的天数
var timeDifference = currentDate - purchaseDate;
var daysUsed = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
// 更新已使用天数
row.querySelector('.daysUsed').textContent = daysUsed;
// 如果天数为负，显示错误信息
if (daysUsed <= 0) {
row.querySelector('.costPerDay').textContent = "购买日期无效";
return;
}
// 计算每天的成本
var costPerDay = (price / daysUsed).toFixed(2);
// 更新平均每日成本
row.querySelector('.costPerDay').textContent = costPerDay;
}
// 获取所有的设备行并进行计算
function calculateAll() {
var rows = document.querySelectorAll('#deviceTableBody tr');
rows.forEach(function(row) {
updateRow(row);
});
}
// 初始化计算
window.onload = function() {
calculateAll();
}
</script>
