代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>豎排文字轉(zhuǎn)橫排</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/css.css">
</head>
<body>
<p>
<pre>
出戌大巳巳用喜
行時(shí)吉未時(shí)丑神
五日是時(shí)亦時(shí)東
鬼破日向吉天北
死兇午上出乙方
門酉時(shí)列行貴貴
同時(shí)五各宜人神
在截不方用上西
東路遇迎子吉南
南空申喜丑子方
方亡時(shí)神寅寅炷
勿不月貴卯卯香
向宜破神辰辰宜
</pre>
</p>
<p>轉(zhuǎn)換后</p>
<p id="rotateMatrix"></p>
<script src="js/js.js" async defer></script>
</body>
</html>
js
//計(jì)算一段文本的行數(shù)和最大列數(shù)
function calculateLinesAndMaxLength(text) {
// 使用正則表達(dá)式匹配所有換行符,包括Unix的\n和Windows的\r\n
const newlineRegex = /\r\n|\n/g;
// 使用split方法根據(jù)換行符分割字符串,得到行數(shù)組
const lines = text.split(newlineRegex);
// 初始化行數(shù)和最大列數(shù)
let linesCount = lines.length;
let maxColumnCount = 0;
// 遍歷每一行,更新最大列數(shù)
lines.forEach(line => {
// 獲取當(dāng)前行的長度,即列數(shù)
const columnCount = line.length;
// 如果當(dāng)前行的列數(shù)大于已知的最大列數(shù),則更新最大列數(shù)
if (columnCount > maxColumnCount) {
maxColumnCount = columnCount;
}
});
// 返回行數(shù)和最大列數(shù)
return {
linesCount: linesCount,
maxColumnCount: maxColumnCount
};
}
//以文字填充矩陣
function createTextMatrix(text, maxColumns) {
// 將文本按行分割
const lines = text.split("\n");
// 初始化二維數(shù)組,大小為行數(shù) x 最大列數(shù),所有元素初始化為空字符串
const matrix = Array.from({ length: lines.length }, () => Array(maxColumns).fill(""));
// 遍歷每一行
lines.forEach((line, rowIndex) => {
const lineLength = line.length;
// 遍歷當(dāng)前行的每個(gè)字符,將其放入二維數(shù)組對(duì)應(yīng)的位置
for (let colIndex = 0; colIndex < lineLength; colIndex++) {
matrix[rowIndex][colIndex] = line[colIndex];
}
// 如果當(dāng)前行文本長度小于最大列數(shù),使用 "■" 填充剩余部分
for (let fillIndex = lineLength; fillIndex < maxColumns; fillIndex++) {
matrix[rowIndex][fillIndex] = "■";
}
});
// 返回生成的二維數(shù)組
return matrix;
}
//旋轉(zhuǎn)矩陣
function rotateMatrix(matrix, clockwise) {
const n = matrix.length;
const m = matrix[0].length;
const result2 = [];
// 創(chuàng)建一個(gè)與原矩陣大小相同的新矩陣,用于存放旋轉(zhuǎn)后的結(jié)果
for (let i = 0; i < m; i++) {
result2.push(new Array(n).fill(0));
}
// 根據(jù)旋轉(zhuǎn)方向,更新新矩陣的值
for (let i = 0; i < n; i++) {
for (let j = 0; j < m; j++) {
if (clockwise) {
// 逆時(shí)針旋轉(zhuǎn):新位置是原矩陣的 (m - j - 1, i)
result2[m - j - 1][i] = matrix[i][j];
} else {
// 順時(shí)針旋轉(zhuǎn):新位置是原矩陣的 (j, n - i - 1)
result2[j][n - i - 1] = matrix[i][j];
}
}
}
return result2;
}
/* 示例矩陣
const k = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9],
[10, 11, 12]
]; */
// 示例使用
const text = "出戌大巳巳用喜\n行時(shí)吉未時(shí)丑神\n五日是時(shí)亦時(shí)東\n鬼破日向吉天北\n死兇午上出乙方\n門酉時(shí)列行貴貴\n同時(shí)五各宜人神\n在截不方用上西\n東路遇迎子吉南\n南空申喜丑子方\n方亡時(shí)神寅寅炷\n勿不月貴卯卯香\n向宜破神辰辰宜";
const result = calculateLinesAndMaxLength(text);
console.log("行數(shù):",result.linesCount);
console.log("最大列數(shù):",result.maxColumnCount);
// 創(chuàng)建文本矩陣
const matrix = createTextMatrix(text, result.maxColumnCount);
// 打印二維數(shù)組為文本形式
matrix.forEach(row => {
console.log(row.join(""));
});
// 逆時(shí)針旋轉(zhuǎn)90度
const a = rotateMatrix(matrix, true);
console.log("逆時(shí)針旋轉(zhuǎn)后的矩陣:");
a.forEach(row => {
console.log(row.join(""));
});
document.getElementById("rotateMatrix").innerHTML = a.map(row => row.join('')).join('<br>');