http://xhslink.com/a/4qcff7XhYAd1
因为很有趣,就让Ai写个差不多来用了,代码如下……!
效果就👉这个页面展示的这样
<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>