<html>
<head>
<title>矩陣計算器 (1.0)</title>
<meta charset="utf-8">
<style>
div#centerDiv {
width:420px;
margin:0 auto;
}
input {
text-align:center;
width:100px;
}
</style>
</head>
<body style="background-color:#999" onload="Start()">
<div id="centerDiv">
<h2>矩陣計算器</h2>
<table border="1" id="matrixA">
<th colspan="4">矩陣A</th>
<tr>
<td><input class="m00" type="text" value="1"></td>
<td><input class="m01" type="text" value="0"></td>
<td><input class="m02" type="text" value="0"></td>
<td><input class="m03" type="text" value="0"></td>
</tr>
<tr>
<td><input class="m10" type="text" value="0"></td>
<td><input class="m11" type="text" value="1"></td>
<td><input class="m12" type="text" value="0"></td>
<td><input class="m13" type="text" value="0"></td>
</tr>
<tr>
<td><input class="m20" type="text" value="0"></td>
<td><input class="m21" type="text" value="0"></td>
<td><input class="m22" type="text" value="1"></td>
<td><input class="m23" type="text" value="0"></td>
</tr>
<tr>
<td><input class="m30" type="text" value="0"></td>
<td><input class="m31" type="text" value="0"></td>
<td><input class="m32" type="text" value="0"></td>
<td><input class="m33" type="text" value="1"></td>
</tr>
</table>
<p style="width:420px; text-align:center;">右乘</p>
<table border="1" id="matrixB">
<th colspan="4">矩陣B</th>
<tr>
<td><input class="m00" type="text" value="1"></td>
<td><input class="m01" type="text" value="0"></td>
<td><input class="m02" type="text" value="0"></td>
<td><input class="m03" type="text" value="0"></td>
</tr>
<tr>
<td><input class="m10" type="text" value="0"></td>
<td><input class="m11" type="text" value="1"></td>
<td><input class="m12" type="text" value="0"></td>
<td><input class="m13" type="text" value="0"></td>
</tr>
<tr>
<td><input class="m20" type="text" value="0"></td>
<td><input class="m21" type="text" value="0"></td>
<td><input class="m22" type="text" value="1"></td>
<td><input class="m23" type="text" value="0"></td>
</tr>
<tr>
<td><input class="m30" type="text" value="0"></td>
<td><input class="m31" type="text" value="0"></td>
<td><input class="m32" type="text" value="0"></td>
<td><input class="m33" type="text" value="1"></td>
</tr>
</table>
<div style="margin:0 auto; width:100%; display:block; text-align: center;">
<div>
<button id="calc" style="margin:16px; border-radius:2px; font-size:18px;" align="center"> 等于 </button>
</div>
</div>
<table border="1" id="matrixResult">
<th colspan="4">結果矩陣</th>
<tr>
<td><input class="m00" type="text" value="1" readonly="readonly"></td>
<td><input class="m01" type="text" value="0" readonly="readonly"></td>
<td><input class="m02" type="text" value="0" readonly="readonly"></td>
<td><input class="m03" type="text" value="0" readonly="readonly"></td>
</tr>
<tr>
<td><input class="m10" type="text" value="0" readonly="readonly"></td>
<td><input class="m11" type="text" value="1" readonly="readonly"></td>
<td><input class="m12" type="text" value="0" readonly="readonly"></td>
<td><input class="m13" type="text" value="0" readonly="readonly"></td>
</tr>
<tr>
<td><input class="m20" type="text" value="0" readonly="readonly"></td>
<td><input class="m21" type="text" value="0" readonly="readonly"></td>
<td><input class="m22" type="text" value="1" readonly="readonly"></td>
<td><input class="m23" type="text" value="0" readonly="readonly"></td>
</tr>
<tr>
<td><input class="m30" type="text" value="0" readonly="readonly"></td>
<td><input class="m31" type="text" value="0" readonly="readonly"></td>
<td><input class="m32" type="text" value="0" readonly="readonly"></td>
<td><input class="m33" type="text" value="1" readonly="readonly"></td>
</tr>
</table>
</div>
<script>
function Assert(e, msg) {
if (!e) {
alert(msg);
}
}
function GetMatrixValue(table, row, col) {
Assert (row <= 4 && row >= 1, "matrix row index invalid.");
Assert (col <= 4 && col >= 1, "matrix col index invalid.");
var className = "m" + (row - 1)
className += (col - 1)
var c = table.getElementsByClassName(className);
if (c.length > 0) {
return c[0].value;
}
return null;
}
function SetMatrixValue(table, row, col, value) {
Assert (row <= 4 && row >= 1, "matrix row index invalid.");
Assert (col <= 4 && col >= 1, "matrix col index invalid.");
var className = "m" + (row - 1)
className += (col - 1)
var c = table.getElementsByClassName(className);
if (c.length > 0) {
c[0].value = value;
}
}
function UnitMatrix(table) {
for (var i = 1; i <= 4; ++i) {
for (var j = 1; j <= 4; ++j) {
if (i === j) {
SetMatrixValue(table, i, j, 1);
}
else {
SetMatrixValue(table, i, j, 0);
}
}
}
}
function ClearMatrix(table) {
for (var i = 1; i <= 4; ++i) {
for (var j = 1; j <= 4; ++j) {
SetMatrixValue(table, i, j, 0);
}
}
}
function MatrixMul(matrixA, matrixB, matrixResult) {
var a, b, r, t;
ClearMatrix(matrixResult);
for (var i = 1; i <= 4; ++i) {
for (var j = 1; j <= 4; ++j) {
for (var k = 1; k <= 4; ++k) {
a = GetMatrixValue(matrixA, i, k);
b = GetMatrixValue(matrixB, j, k);
if (isNaN(a) || isNaN(b)) {
if (b === "0" || a === "0") {
r = 0;
}else {
if (a === "1" || b === "1") {
if (a === "1")
r = b;
else
r = a;
}else {
r = "(" + a + "*" + b + ")";
}
}
}else {
r = Number(a) * Number(b);
}
t = GetMatrixValue(matrixResult, i, j);
if (isNaN(t) || isNaN(r)) {
if (t === "0" || r === 0) {
if (t === "0")
SetMatrixValue(matrixResult, i, j, r);
else
SetMatrixValue(matrixResult, i, j, t);
}
else {
SetMatrixValue(matrixResult, i, j, t + "+" + r);
}
}
else {
SetMatrixValue(matrixResult, i, j, Number(t) + r);
}
}
}
}
}
function Start() {
var matrixA = document.getElementById("matrixA");
var matrixB = document.getElementById("matrixB");
var matrixResult = document.getElementById("matrixResult");
var button = document.getElementById("calc");
if (button) {
button.onclick = function() {
MatrixMul(matrixA, matrixB, matrixResult);
}
}
}
</script>
</body>
</html>