当前位置：首页 > news >正文

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

news 2025/10/14 7:46:12

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>人类生命周期矩阵计算器</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<div class="wrap">
<h1>人类生命周期矩阵计算器</h1>
<div class="cfg ctrl">
<label>行数 (1-100): <input id="rows" type="number" min="1" max="100" value="3"></label>
<label>列数 (1-100): <input id="cols" type="number" min="1" max="100" value="5"></label>
<label>总生命年 (1-100): <input id="lifeY" type="number" min="1" max="100" value="80"></label>
<label>每日小时: <input id="dayH" type="number" min="1" max="24" value="24"></label>
<button onclick="build()">生成矩阵</button>
<button onclick="exportCSV()">导出CSV</button>
</div>

/* 单位换算基础 */
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="rg_${r}_${c}" value="${row.rg}" step="0.01" onchange="up(${r},${c})"></td>
<td><input type="number" id="mg_${r}_${c}" value="${row.mg}" step="0.01" onchange="up(${r},${c})"></td>
<td><input type="number" id="te_${r}_${c}" value="${row.te}" step="0.01" onchange="up(${r},${c})"></td>
<td><input type="number" id="rg2_${r}_${c}" value="${row.rg2}" step="0.01" onchange="up(${r},${c})"></td>
<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><input type="number" id="h_${r}" value="${row.h}" step="0.01" onchange="syncTime(${r},'h')"></td>
<td><input type="number" id="d_${r}" value="${row.d}" step="0.01" onchange="syncTime(${r},'d')"></td>
<td><input type="number" id="w_${r}" value="${row.w}" step="0.01" onchange="syncTime(${r},'w')"></td>
<td><input type="number" id="m_${r}" value="${row.m}" step="0.01" onchange="syncTime(${r},'m')"></td>
<td><input type="number" id="y_${r}" value="${row.y}" step="0.01" onchange="syncTime(${r},'y')"></td>
<td>${fix(totalH)}</td>
<td id="tr_${r}">${row.tr}</td>
<td id="tm_${r}">${row.tm}</td>
<td id="tt_${r}">${row.tt}</td>
<td id="tra_${r}">${row.tra}</td>
<td id="tp_${r}">${row.tp}</td>
<td id="rem_${r}">${row.rem}</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>