Heim  >  Artikel  >  Web-Frontend  >  Raute mit JavaScript drucken

Raute mit JavaScript drucken

WBOY
WBOYOriginal
2023-05-15 22:07:061950Durchsuche

Die Raute ist eine der interessanteren geometrischen Formen. In diesem Artikel erfahren Sie, wie Sie mit JavaScript Rauten drucken.

Zuerst müssen wir verstehen, was eine Raute ist. Eine Raute, auch Gitterpolyeder genannt, ist eine Art Viereck mit zwei Sätzen gegenüberliegender paralleler Linien und vier gleichen Innenwinkeln. Um Diamanten auf einer Webseite zu drucken, müssen wir JavaScript verwenden, um die Anzeigelogik zu verwalten.

Die Idee beim Drucken einer Raute besteht darin, verschachtelte For-Schleifen zu verwenden. Angenommen, wir müssen eine Raute mit n Zeilen drucken, dann kann der Prozess des Druckens einer Raute in drei Teile unterteilt werden. Zuerst wird der obere Teil der Raute gedruckt, dann wird der mittlere Teil der Raute gedruckt und schließlich wird der untere Teil der Raute gedruckt.

Der Code lautet wie folgt:

function printDiamond(n) {
  if (n % 2 === 0) {
    // 如果输入的n是偶数,则加1变成奇数
    n++;
  }
  let middleIndex = Math.floor(n / 2); // 中间的索引
  let diamond = ""; // 菱形字符串

  // 上半部分
  for (let i = 0; i <= middleIndex; i++) {
    for (let j = 0; j < middleIndex - i; j++) {
      diamond += " "; // 打印左上角的空格
    }
    for (let j = 0; j < 2 * i + 1; j++) {
      diamond += "*"; // 打印上半部分的星号
    }
    diamond += "
"; // 换行
  }

  // 中间部分
  for (let i = middleIndex - 1; i >= 0; i--) {
    for (let j = 0; j < middleIndex - i; j++) {
      diamond += " "; // 打印右上角的空格
    }
    for (let j = 0; j < 2 * i + 1; j++) {
      diamond += "*"; // 打印中间部分的星号
    }
    diamond += "
"; // 换行
  }

  console.log(diamond); // 输出菱形
}

Im obigen Code definieren wir eine Funktion printDiamond(n), um einen Diamanten mit n Zeilen zu drucken. Beurteilen Sie zunächst die Parität von n. Wenn es sich um eine gerade Zahl handelt, fügen Sie 1 hinzu, um eine ungerade Zahl zu erhalten und die Symmetrie der Raute sicherzustellen. Dann wird die Variable middleIndex so definiert, dass sie den mittleren Index der Raute darstellt, und die Variable diamond stellt die endgültige Rautenfolge dar, die ausgegeben werden soll. printDiamond(n),用于打印行数为n的菱形。首先通过判断n的奇偶性,如果是偶数则将其加1变为奇数,保证菱形的对称性。然后定义了变量middleIndex表示菱形的中间索引,变量diamond表示最终要输出的菱形字符串。

接下来使用for循环嵌套实现菱形的打印。首先打印菱形的上半部分,这里使用两个for循环,第一个for循环控制行数,第二个for循环打印左上角的空格和上半部分的星号。然后打印菱形的中间部分,这里同样使用两个for循环,第一个for循环控制行数,第二个for循环打印右上角的空格和中间部分的星号。最后打印菱形的下半部分,这部分的代码与上半部分代码相同,只是循环次数和打印的字符不同。

最后,在菱形打印完成后,我们通过console.log(diamond)

Als nächstes verwenden Sie verschachtelte for-Schleifen, um Rautenformen zu drucken. Drucken Sie zunächst die obere Hälfte der Raute. Die erste for-Schleife steuert die Anzahl der Zeilen und die zweite for-Schleife druckt das Leerzeichen in der oberen linken Ecke und das Sternchen in der oberen Hälfte. Dann werden auch hier zwei for-Schleifen verwendet. Die erste for-Schleife steuert die Anzahl der Zeilen und die zweite for-Schleife druckt das Leerzeichen in der oberen rechten Ecke und das Sternchen im mittleren Teil. Abschließend wird die untere Hälfte der Raute gedruckt. Der Code für diesen Teil ist derselbe wie für die obere Hälfte, mit Ausnahme der Anzahl der Schleifen und der gedruckten Zeichen.

Nachdem der Diamantdruck abgeschlossen ist, geben wir die Diamantzeichenfolge über die Anweisung console.log(diamond) an die Konsole aus.

Verwenden Sie den folgenden Code, um diese Funktion zum Drucken von Diamanten aufzurufen:

printDiamond(5);

Die laufenden Ergebnisse lauten wie folgt: 🎜
  *  
 *** 
*****
 *** 
  *  
🎜In tatsächlichen Anwendungsszenarien können wir diese Funktion auch in Kombination mit HTML und CSS verwenden, um bessere Ergebnisse zu erzielen. Der in diesem Artikel vorgestellte Inhalt ist nur die Grundidee der Verwendung von JavaScript zum Drucken von Diamanten. Leser können es flexibel entsprechend ihren tatsächlichen Anforderungen verwenden. 🎜

Das obige ist der detaillierte Inhalt vonRaute mit JavaScript drucken. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel:POI-Wort转htmlNächster Artikel:POI-Wort转html