用html5写一个可输入1-100行1-100列的矩阵计算器

矩阵行输入生命支出时间,小时,日,周,月,年为单位,矩阵列输入每生命支出时间获得的资源,金钱,时间,声誉,人口,矩阵总生命支出时间可选择1-100年,计算总资源获得量,剩余资源量,数值精确到小数点两位

<!DOCTYPE html>

<head>

<title>人类生命周期矩阵计算器</title>

<style>

:root{--bg:#0f2027;--panel:#132332;--row:#1b2e42;--accent:#4fc3f7;--hl:#6dd5ed;}

body{margin:0;padding:20px;background:linear-gradient(135deg,var(--bg),#203a43,#2c5364);color:#e0f7fa;font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;min-height:100vh;}

.wrap{max-width:100%;margin:auto;background:rgba(19,35,50,.85);padding:25px;border-radius:15px;box-shadow:0 10px 30px rgba(0,0,0,.5);backdrop-filter:blur(10px);}

h1{text-align:center;color:var(--accent);margin-bottom:10px}

.ctrl{display:flex;flex-wrap:wrap;gap:15px;justify-content:center;margin:20px 0;}

button{padding:10px 20px;border:none;border-radius:25px;background:linear-gradient(to right,var(--accent),var(--hl));color:#0a1929;font-weight:bold;cursor:pointer;transition:.3s;}

button:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(79,195,247,.5)}

.tb{overflow:auto;margin-top:20px;border-radius:10px;box-shadow:0 5px 15px rgba(0,0,0,.3);max-height:70vh}

table{width:100%;border-collapse:collapse;font-size:12px;background:var(--panel);}

th,td{border:1px solid rgba(64,224,208,.15);padding:6px 8px;text-align:center;white-space:nowrap}

th{background:linear-gradient(to bottom,#1a2a3a,var(--bg));color:var(--accent);position:sticky;top:0;z-index:10}

tr:nth-child(even){background:var(--row)}tr:hover{background:rgba(33,147,176,.15)}

input[type=number]{width:70px;padding:6px;background:rgba(13,19,33,.7);border:1px solid rgba(64,224,208,.3);border-radius:5px;color:var(--text);}

label{margin:0 8px;color:#b2ebf2}

.cfg{background:rgba(25,39,61,.7);padding:15px;border-radius:10px;margin-bottom:15px}

</style>

</head>

<body>

<h1>人类生命周期矩阵计算器</h1>

<button onclick="exportCSV()">导出CSV</button>

</div>

</div>

let R,C,totalH,d=[]; // R=行 C=列 totalH=单人总生命(小时)

const $=id=>document.getElementById(id);

const fix=n=>Number(n).toFixed(2);

/* 单位换算基础 */

const base={h:1,d:24,w:24*7,m:24*7*4.33,y:365*24};

/* 生成或重建矩阵 */

function build(){

R=Math.min(100,Math.max(1,+$('rows').value));

C=Math.min(100,Math.max(1,+$('cols').value));

const yrs=+$('lifeY').value;

const dh=+$('dayH').value;

totalH=yrs*365*dh;

d=[...Array(R)].map((_,r)=>({

r,rName:`行${r+1}`,

h:0,d:0,w:0,m:0,y:0,

rg:0,mg:0,te:0,rg2:0,pg:0,

tr:0,tm:0,tt:0,tra:0,tp:0,

rem:fix(totalH*0.1)

}));

render();

}

/* 渲染表格 */

function render(){

const wrap=$('matWrap');

let html='<table id="mat"><thead><tr><th>行名</th>';

for(let c=0;c<C;c++) html+=`<th>列${c+1}<br>资源/时</th><th>金钱/时</th><th>时间/时</th><th>声誉/时</th><th>人口/时</th>`;

html+='</tr></thead><tbody>';

for(let r=0;r<R;r++){

const row=d[r];

html+=`<tr>

<td><input type="text" value=" ${row.rName}" onchange="nameRow($ {r},this)"></td>`;

for(let c=0;c<C;c++){

html+=`

<td><input type="number" id="pg_ ${r}_$ {c}" value=" ${row.pg}" step="0.01" onchange="up($ {r},${c})"></td>`;

}

html+=`</tr>`;

}

html+='</tbody></table>';

html+=`<div class="mt10"><b>生命支出时间输入（行维度）</b></div><table class="mt10"><thead><tr><th>行名</th><th>小时</th><th>日</th><th>周</th><th>月</th><th>年</th><th>总生命量</th><th>总资源</th><th>总金钱</th><th>总时间</th><th>总声誉</th><th>总人口</th><th>剩余资源</th></tr></thead><tbody>`;

for(let r=0;r<R;r++){

const row=d[r];

html+=`<tr>

<td>${row.rName}</td>

<td>${fix(totalH)}</td>

</tr>`;

}

html+='</tbody></table>';

wrap.innerHTML=html;

}

/* 行名修改 */

function nameRow(r,input){

d[r].rName=input.value.trim()||`行${r+1}`;

}

/* 时间单位联动 */

function syncTime(r,srcU){

const val=parseFloat( $(\`$ {srcU}_${r}`).value)||0;

const hours=val*base[srcU];

'h','d','w','m','y'\].forEach(u=\>{ $(\`${u}_${r}\`).value=fix(hours/base\[u\]); }); d\[r\].h=fix(hours); d\[r\].d=fix(hours/base.d); d\[r\].w=fix(hours/base.w); d\[r\].m=fix(hours/base.m); d\[r\].y=fix(hours/base.y); calcRow(r); } /\* 单位收益更新 \*/ function up(r,c){ /\* 简单策略：整行使用同一套单位收益，以第一列为准 \*/ d\[r\].rg=parseFloat($(\`rg_${r}_0\`).value)\|\|0; d\[r\].mg=parseFloat($(\`mg_${r}_0\`).value)\|\|0; d\[r\].te=parseFloat($(\`te_${r}_0\`).value)\|\|0; d\[r\].rg2=parseFloat($(\`rg2_${r}_0\`).value)\|\|0; d\[r\].pg=parseFloat($(\`pg_${r}_0\`).value)\|\|0; calcRow(r); } /\* 计算整行总计 \& 剩余 \*/ function calcRow(r){ const h=parseFloat(d\[r\].h)\|\|0; const rg=d\[r\].rg,mg=d\[r\].mg,te=d\[r\].te,rg2=d\[r\].rg2,pg=d\[r\].pg; d\[r\].tr=fix(rg\*h); d\[r\].tm=fix(mg\*h); d\[r\].tt=fix(te\*h); d\[r\].tra=fix(rg2\*h); d\[r\].tp=fix(pg\*h); d\[r\].rem=fix(totalH\*0.1-h); /\* 刷新显示 \*/ \['tr','tm','tt','tra','tp','rem'\].forEach(k=\>$(\`${k}_${r}\`).textContent=d\[r\]\[k\]); } /\* 导出CSV \*/ function exportCSV(){ const head='行名,小时,日,周,月,年,总生命量,资源/时,金钱/时,时间/时,声誉/时,人口/时,总资源,总金钱,总时间,总声誉,总人口,剩余资源\\n'; const rows=d.map(r=\>\`${r.rName},${r.h},${r.d},${r.w},${r.m},${r.y},${fix(totalH)},${r.rg},${r.mg},${r.te},${r.rg2},${r.pg},${r.tr},${r.tm},${r.tt},${r.tra},${r.tp},${r.rem}\`).join('\\n'); const blob=new Blob(\[head+rows\],{type:'text/csv;charset=utf-8;'}); const url=URL.createObjectURL(blob); const a=document.createElement('a');a.href=url;a.download='生命周期矩阵.csv';a.click(); URL.revokeObjectURL(url); } /\* 初始化 \*/ window.onload=build; \ \ \ ![](https://i-blog.csdnimg.cn/direct/91e81e33a2f9407e921eef672792b6e9.png)