用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;

</script>

</body>

</html>