2025-07-26 豎排文字轉(zhuǎn)橫排

代碼:

<!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>');
  
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容