【案例2-10】打印菱形、三角形
一、案例描述
- 考核知识点
for双重循环
- 练习目标
- 掌握for循环应用。
- 打印出菱形
- 打印出三角形。
- 需求分析
在本案例中我们将用JavaScript代码在页面中用“*”打印出菱形和三角形。
- 案例分析
- 菱形效果如图2-16所示。
- 输入菱形行数6
- 打印菱形
- 三角形效果如图2-17所示。
- 打印三角形
- 具体实现步骤如下：
- 输入菱形行数。
- 根据行数计算。
- 三角形行数是在代码中定义好的为4。
二、案例实现
1、实现菱形
根据上面的分析，可以通过简单的JavaScript代码来实现这一效果，具体代码如下：
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>打印菱形</title>
- </head>
- <body>
- <script type="text/javascript">
- //打印菱形上半部分
- var n=window.prompt("请输入行数"); // 用户输入行数
- for(i=1;i<=n;i++){
- for(j=1;j<=n-i;j++){
- document.write(" ");
- }
- for(k=1;k<=2*i-1;k++){
- document.write("*");
- }
- document.write("<br/>");
- }
- //打印菱形下半部分
- for(i=1;i<=n;i++){
- // 要去掉下半部分的最上一行，第二行变为第一行,每行最前面的空格加一个，
- // 所以j<=i,而不是j<=j-1;
- for(j=1;j<=i;j++){
- document.write(" ");
- }
- for(k=1;k<=2*(n-i)-1;k++){ // 第一行为原来第二行，星号个数也随之变化;
- document.write("*");
- }
- document.write("<br/>");
- }
- </script>
- </body>
- </html>
2、实现三角形
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>打印菱形、三角形</title>
- </head>
- <body>
- <script type="text/javascript">
- // 打印直角三角形
- for(var j=1;j<5;j++)
- {
- for(var i=1;i<=j;i++)
- {
- document.write("*");
- }
- document.write("<br/>");
- }
- </script>
- </body>
- </html>>
