关闭

javascript打印菱形和镂空菱形

511人阅读 评论(0) 收藏 举报
分类:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js菱形</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<script type="text/javascript">
   window.onload=function(){
       var rows=window.prompt("请输入行");
            if(rows%2==0){
              rows=Math.floor(parseInt(rows));
            }
            var half=parseInt(rows/2);//正三角形的行数
            var h=half+ 1;  //倒三角形的行数
            var q=h;
            /*菱形*/
            for(var i=0;i<half;i++){  //i表示当前三角形的行数
                for(var k=half;k>=i;k--){
                    document.writeln("<div style='width: 10px;height: 10px;display: inline-block;'></div>")
                }
                for(var j=0;j<2*i+1;j++){ //正三角形的每行*的个数,与当前行i的关系:j=2*i+1(i递增变化)
                    document.writeln("<div style='width: 10px;height: 10px;display: inline-block;'>*</div>")
                }
                document.writeln("<br/>");
            }
            for(;h>0;h--){//h是当前倒三角形的行数
                   for(var m=q;m>=h;m--){
                       document.writeln("<div style='width: 10px;display: inline-block;'></div>");
                   }
                   for(var n=0;n<2*h-1;n++){//倒三角形的每行*的个数,与倒三角形的总行数h的关系:n=2*h-1(h递减变化)
                       document.writeln("<div style='width: 10px;height: 10px;display: inline-block;'>*</div>");
                   }
                   document.writeln("<br/>");
             }
            // 镂空菱形
           for(var i=0;i<half;i++){
               for(var k=half;k>=i;k--){
                   document.writeln("<div style='width: 10px;display: inline-block;'></div>")
               }
               for(var j=0;j<2*i+1;j++){
                   if(j==0||j==2*i){//只打印每行第一个*和最后一个*(因为j<2*i+1;所以j的最大值为2*i)
                       document.writeln("<div style='width: 10px;display: inline-block;'>*</div>");
                   }
                   else {
                       document.writeln("<div style='width: 10px;display: inline-block;'></div>");
                   }
               }
               document.writeln("<br/>");
           }
           var h=half+1;
           for(;h>0;h--){
               for(var m=q;m>=h;m--){
                   document.writeln("<div style='width: 10px;display: inline-block;'></div>");
               }
               for(var n=0;n<2*h-1;n++){
                   if(n==0||n==2*h-2){//只打印每行第一个*和最后一个*(因为n<2*h-1;所以n的最大值为2*h-2)
                       document.writeln("<div style='width: 10px;display: inline-block;'>*</div>");
                   }
                   else {
                       document.writeln("<div style='width: 10px;display: inline-block;'></div>")
                   }

               }
               document.writeln("<br/>");
           }
        }
   /*
    *   测试数据:
    *   rows=13
    *   half=6
    * i,h控制行,j,n控制列。外层循环控制行数,内层循环控制列数
    *  行数(i)    正三角形星号数(j)   倒三角形星号数(n)          空格数
    6     *   0             1                                            7
    5     *   1             3                                            6
    4     *   2             5                                            5
    3     *   3             7                                            4
    2    *   4             9                                            3
    1   *   5            11                                            2
    *   6                                 13                       1
    *   7                                 11                       2
    *   8                                 9                        3
    *   9                                 7                        4
    *   10                                5                        5
    *   11                                3                        6
    *   12                                1                        7
    *  j与行数i的关系: j=2*i+1
    *  n与half的关系:                  n=2*(half+1)-1=2*half+1;(在示例中half+1为倒三角形的行数即h,故n=2*h-1)


    * */
</script>
</body>
</html>

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:48570次
    • 积分:1466
    • 等级:
    • 排名:千里之外
    • 原创:87篇
    • 转载:53篇
    • 译文:0篇
    • 评论:3条