ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

利用JavaScript的循环语句再页面中打印图形

2020-05-21 13:37:35  阅读:212  来源: 互联网

标签:语句 10 JavaScript ++ 打印 write var document 页面


利用JavaScript的循环语句再页面中打印图形

前面两篇博客我们讲解怎么使用for循环进行数学的简单计算,这篇博客主要是利用js的循环语句在网页中打印出各种图形。

1.利用js的循环语句打印矩形

    // 利用循环语句在网页中打印十行十列的矩形
    for (var j = 0; j < 10; j++) {
        // 一行打印10个 @
        for (var i = 0; i < 10; i++) {
            document.write("@");
        }
        document.write("<br/>");
    }
    
    // 利用while循环打印矩形
    var x=0;
    while(x<10){
        var y=0;
        while(y<10){
            document.write("☆");
            y++;
        }
        document.write("<br/>");
        x++;
    }    

上面的问题关键在于搞清楚第一个for循环是决定打印多少行的,第二个for循环是决定每一行打印多少个。

2.利用js的循环语句打印三角形

    // 正立三角形
    // 打印10行
    for (var j = 0; j < 10; j++) {
        // 一行打印10个 @
        for (var i = 0; i < j+1; i++) {
            document.write("@");
        }
        document.write("<br/>");
    }
    
    // 倒立三角形1
    for (var j = 0; j < 10; j++) {
        // 一行打印10个 @
        for (var i = j; i < 10; i++) {
            document.write("@");
        }
        document.write("<br/>");
    }
    
    // 倒立三角形2
    for (var j = 10; j > 0; j--) {
        // 一行打印10个 @
        for (var i = 0; i < j; i++) {
            document.write("@");
        }
        document.write("<br/>");
    }
    

上面代码打印三角形的关键在于第一个for循环同样是决定打印多少行,第二个for循环同样是决定每一行打印多少次,但不同的是每一行打印的次数不是固定的,所以只要找到这个规律就可以解决这个问题。

3.利用js的循环语句打印平行四边形

    // 利用空格在矩形前面打印空白的三角形
    for (var j = 0; j < 10; j++) {
        // 打印前面的三角形
        for (var k = 0; k < j; k++) {
            document.write("&nbsp;&nbsp;&nbsp;");
        }
        // 一行打印10个☆
        for (var i = 0; i < 10; i++) {
            document.write("☆  ");
        }
        document.write("<br/>");
    }
    
    // 利用css知识,在矩形前面打印透明的☆
    for (var j = 0; j < 10; j++) {
        // 打印前面的三角形
        for (var k = 0; k < j; k++) {
            document.write("<span style='opacity:0'>☆</span>");
        }
        // 一行打印10个☆
        for (var i = 0; i < 10; i++) {
            document.write("☆  ");
        }
        document.write("<br/>");
    }

解决上面问题的思路主要是用三角形和矩形结合起来,然后在矩形的前面打印看不到的三角形,以达到将矩形整体向右推移的目的,最后实现打印平行四边形的效果。其实就是障眼法。

视频讲解链接:
https://www.bilibili.com/video/BV1Qz411q7mK

标签:语句,10,JavaScript,++,打印,write,var,document,页面
来源: https://blog.csdn.net/qq_39155611/article/details/106225454

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有