JavaScript循环的应用——图形应用（一）打印长方形/直角三角形/等腰三角形/菱形/平行四边形的各种形态

已于 2023-03-29 18:50:38 修改
阅读量1.3k 收藏 20
点赞数 1
分类专栏： JavaScript专栏 文章标签： javascript 前端 html
于 2023-03-19 21:50:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Tang_jibin/article/details/129373663
版权

目录

  1. 长方形
  • 1-1.打印长方形
  • 1-2.打印空心长方形
  1. 直角三角形
  • 2-1.打印直角三角形
  • 2-2.打印倒直角三角形
  • 2-3.打印空心直角三角形
  1. 等腰三角形
  • 3-1.打印等腰三角形
  • 3-2.打印空心等腰三角形
  • 3-3.打印空心倒等腰三角形
  1. 九九乘法表
  • 4-1.打印九九乘法表
  • 4-2.利用表格打印九九乘法表
  • 4-3.利用函数打印九九乘法表
  1. 菱形
  • 5-1.打印菱形
  • 5-2.打印空菱形
  1. 平行四边形
  • 6-1.打印平行四边形
  • 6-2.打印空平行四边形

长方形

1-1.打印长方形

var cfx_row=prompt("请输入长方形行数：");
var cfx_col=prompt("请输入长方形列数：");
for(var i=1;i<=cfx_row;i++){
    for(var j=1;j<=cfx_col;j++){
        document.write(`<span style="display: inline-block;width: 20px;text-align: center;">*</span>`);
    }
    document.write(`<br/>`);
}

运行结果：
打印3行4列
在这里插入图片描述

1-2.打印空心长方形

//打印空心长方形
var null_cfx_row=+prompt("请输入长方形行数：");
var null_cfx_col=+prompt("请输入长方形列数：");
for(var i=1;i<=null_cfx_row;i++){
    for(var j=1;j<=null_cfx_col;j++){
        if((i>1&&i<null_cfx_row)&&(j>1&&j<null_cfx_col)){
            document.write(`<span style="display: inline-block;width: 20px;text-align: center;"></span>`);
        }else{
            document.write(`<span style="display: inline-block;width: 20px;text-align: center;">*</span>`);
        } 
    }
    document.write(`<br/>`);
}

运行结果：
打印3行4列
在这里插入图片描述

直角三角形

2-1.打印直角三角形

//打印数字直角三角形
var m=prompt("请输入总行数m：");
//1.打印m行
for(var i=1;i<=m;i++){
    //2.打印每一行的i个数
    for(var j=1;j<=i;j++){
        document.write(`<span style="display: inline-block;width: 20px;text-align: center;">*</span>`);
    }
    //3.换行
    document.write(`<br>`);
}

运行结果：
打印5行
在这里插入图片描述

2-2.打印倒直角三角形

//打印倒直角三角形
var m=prompt("打印m行倒直角三角形");
for(var i=m;i>=1;i--){
    for(var j=1;j<=i;j++){
        document.write(`<span style="display: inline-block;width: 20px;text-align: center;">*</span>`);
    }
    document.write(`<br/>`);
}

运行结果：
打印5行
在这里插入图片描述

2-3.打印空直角三角形

//打印空直角三角形
var m=prompt("请输入打印的行数m:");
for(var i=1;i<=m;i++){
    for(var j=1;j<=i;j++){
        if(i!=m&&j!=1&&j!=i){
            document.write(`<span style="display: inline-block;width: 20px;text-align: center;"></span>`); 
        }else{
            document.write(`<span style="display: inline-block;width: 20px;text-align: center;">*</span>`);
        }
    }
    document.write(`<br>`);
}

运行结果：
打印5行
在这里插入图片描述

等腰三角形

3-1.打印等腰三角形

//打印等腰三角形
var m=+prompt("打印m行等腰三角形");
for(var i=1;i<=m;i++){
    //打印空格数
    for(var j=1;j<=m-i;j++){
        document.write(`<span style="display: inline-block;width: 20px;text-align: center;"></span>`);
    }
    //打印*
    for(var k=1;k<=i*2-1;k++){
        document.write(`<span style="display: inline-block;width: 20px;text-align: center;">*</span>`);
    }
    document.write(`<br/>`)
}

运行结果：
打印5行
在这里插入图片描述

3-2.打印空等腰三角形

//打印空等腰三角形
var m=prompt("请输入打印的行数m:");
//打印循环次数
for(var i=1;i<=m;i++){
    //打印m-i个空格数
    for(var j=1;j<=m-i;j++){
        document.write(`<span style="display: inline-block;width: 20px;text-align: center;"></span>`);
    }
    //打印*
    for(var k=1;k<=i*2-1;k++){
        if(i!=m && k!=1 && k!=i*2-1){
            document.write(`<span style="display: inline-block;width: 20px;text-align: center;"></span>`);
        }else{
            document.write(`<span style="display: inline-block;width: 20px;text-align: center;">*</span>`);
        }
    }
    document.write(`<br>`);
}

运行结果：
打印5行
在这里插入图片描述

3-3.打印空倒等腰三角形

//打印空倒等腰三角形
var m=prompt("请输入打印的行数m:");
for(var i=m;i>=1;i--){
    //打印空格数
    for(var j=1;j<=m-i;j++){
        document.write(`<span style="display: inline-block;width: 20px;text-align: center;"></span>`);
    }
    //打印*
     for(var k=1;k<=2*i-1;k++){
        if(i!=m && k!=1 && k!=2*i-1){
            document.write(`<span style="display: inline-block;width: 20px;text-align: center;"></span>`);
        }else{
            document.write(`<span style="display: inline-block;width: 20px;text-align: center;">*</span>`);
        }
    }
    document.write(`<br>`);
}

运行结果：
打印5行
在这里插入图片描述

九九乘法表

4-1.打印九九乘法表

<style>
    body,span{
        margin: 0;
        padding: 0;
    }
    span{
        display: inline-block;
        width: 60px;
        border: 1px solid pink;
        background-color: aqua;
    }
</style>
<script>
var m=prompt("打印m*m乘法表：");
for(var i=1;i<=m;i++){
    for(var j=1;j<=i;j++){
        document.write(`<span>${i}*${j}=${i*j}</span>`);
    }
    document.write(`<br>`);
}
</script>

运行结果：
打印9*9的乘法表
在这里插入图片描述

4-2.利用表格进行打印九九乘法表

//2.利用表格进行打印九九乘法表
//定义一个变量用来接收用户输入的数据
var m=prompt("请输入你要打印的乘法表");
//在循环前打印table标签
document.write('<table>');
    //循环的次数
    for(var i=1;i<=m;i++){
        document.write('<tr>');
        for(var j=1;j<=i;j++){
            document.write(`<td>${j}*${i}=${j*i}</td>`);
        }
        document.write('</tr>');
    }
document.write('</table>');

运行结果：
打印9*9的乘法表
在这里插入图片描述

4-3.利用函数打印九九乘法表

//3.函数打印九九乘法表
var m=prompt("请输入你想打印m*m乘法表:");
    function mulTable(m){
        for(var i=1;i<=m;i++){
            for(var j=1;j<=i;j++){
                document.write(`<span style="display:inline-block;width:70px;">${j}*${i}=${j*i}</span>`);
            }
            document.write(`<br>`);
        }
    }
mulTable(m);

运行结果：
打印9*9的乘法表
在这里插入图片描述

菱形

5-1.打印菱形

//打印菱形
var rows = prompt("请输入行数：");
//平均分布
var half = Math.round(rows / 2);
//上半部分循环
for (var i = 1; i <= half; i++) {
    //打印half-i个空格
    for (var j = 1; j <= half - i; j++) {
        document.write(`<span style="display: inline-block;width: 20px;text-align: center;"></span>`);
    }
    //打印2*i-1个*
    for (var k = 1; k <= 2 * i - 1; k++) {
        document.write(`<span style="display: inline-block;width: 20px;text-align: center;">*</span>`);
    }
    document.write(`<br>`);
}
//下半部分循环
for (var i = rows - half; i >= 1; i--) {
    //打印half-i个空格
    for (var j = 1; j <= half - i; j++) {
        document.write(`<span style="display: inline-block;width: 20px;text-align: center;"></span>`);
    }
    //打印2*i-1个*
    for (var k = 1; k <= 2 * i - 1; k++) {
        document.write(`<span style="display: inline-block;width: 20px;text-align: center;">*</span>`);
    }
    document.write(`<br>`);
}

运行结果：
打印5行
在这里插入图片描述

5-2.打印空菱形

//打印空菱形
//上半部分循环
var rows = prompt("请输入行数：");
//平均分布
var half = Math.round(rows / 2);
//上半部分循环
for (var i = 1; i <= half; i++) {
    //打印half-i个空格
    for (var j = 1; j <= half - i; j++) {
        document.write(`<span style="display: inline-block;width: 20px;text-align: center;"></span>`);
    }
    //打印2*i-1个*
    for (var k = 1; k <= 2 * i - 1; k++) {
        if (k != 1 && k != 2 * i - 1) {
            document.write(`<span style="display: inline-block;width: 20px;text-align: center;"></span>`);
        } else {
            document.write(`<span style="display: inline-block;width: 20px;text-align: center;">*</span>`);
        }
    }
    document.write(`<br>`);
}
//下半部分循环
for (var i = rows - half; i >= 1; i--) {
    //打印half-i个空格
    for (var j = 1; j <= half - i; j++) {
        document.write(`<span style="display: inline-block;width: 20px;text-align: center;"></span>`);
    }
    //打印2*i-1个*
    for (var k = 1; k <= 2 * i - 1; k++) {
        if (k != 1 && k != 2 * i - 1) {
            document.write(`<span style="display: inline-block;width: 20px;text-align: center;"></span>`);
        } else {
            document.write(`<span style="display: inline-block;width: 20px;text-align: center;">*</span>`);
        }
    }
    document.write(`<br>`);
}

运行结果：
打印5行
在这里插入图片描述

平行四边形

6-1.打印平行四边形

//打印平行四边形
var m = prompt("请输入高:");
var n = prompt("请输入长:");
//判断是否符合条件
if (m < 2 || n < 2) {
    alert("长和高任意一个都不能小于2,请重新输入");
} else {
    for (var i = 0; i < m; i++) {
        //打印m - i个空格
        for (var j = 0; j < m - i; j++) {
            document.write(`<span style="display:inline-block;width:20px;"></span>`);
        }
        //打印n个星星
        for (var k = 0; k < n; k++) {
            document.write(`<span style="display:inline-block;width:20px;">*</span>`);
        }
        document.write("<br>");
    }
}

运行结果：
打印5行5列
在这里插入图片描述

6-2.打印空平行四边形

//打印空平行四边形
var m = prompt("请输入高:");
var n = prompt("请输入长:");
//判断是否符合条件
if (m < 2 || n < 2) {
    alert("长和高任意一个都不能小于2,请重新输入");
} else {
    for (var i = 1; i <= m; i++) {
        //打印空格
        for (var j = 1; j <= m - i; j++) {
            document.write(`<span style="display:inline-block;width:20px;"></span>`);
        }
        //打印星星
        for (var k = 1; k <= n; k++) {
            //判断空心位置
            if (i != 1 && i != m && k != 1 && k != n) {
                document.write(`<span style="display:inline-block;width:20px;"></span>`);
            } else {
                document.write(`<span style="display:inline-block;width:20px;">*</span>`);
            }
        }
        document.write("<br>");
    }
}

运行结果：
打印5行5列
在这里插入图片描述

Tang_jibin
关注
  • 1
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript 打印菱形
希望我的博客，能帮上你解决学习中工作中所遇到的问题
10-30 508
JavaScript 打印菱形
JavaScript打印菱形
sakura22123的博客
09-04 3741
【代码】JavaScript打印菱形。
javascript 打印菱形（含分析过程及代码）
weixin_45177734的博客
12-03 1万+
javascript 打印菱形 分析： 1.首先思考如果打印矩形的话怎么写代码？ 需要两层循环，外层控制行数，内层控制打印一行中的 * 的个数，这里选择for循环 代码 for(var i=1;i<=7;i++) { for(var j=1;j<=7;j++) { document.write("* "); } document.write("<br/>"); } 2.如果是打印菱形，那么在同一行中既需要控制空格的个数，又需要控制*
JavaScript——打印输出各种三角形集合，你要的我都有，点赞收藏全拿走
热门推荐
super码力的博客
11-27 1万+
JavaScript打印输出各种常见的三角形，for循环直接搞定，超简单...
JavaScript打印三角形
小高今天早睡了吗？
12-10 2918
利用JavaScript打印三角形！ 1.直角三角形 ⭐ ⭐⭐ ⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐⭐⭐ // i 控制行数 for(var i = 0 ; i < 5 ; i++) { // 打印星星,星星的个数跟行数一样 for(var j = 0 ; j <= i ; j++) { document.write('*') } // 打印换行
JavaScript AES 加密例子
02-21
AES/CBC/NoPadding ——-16 ——————————-不支持 AES/CBC/PKCS5Padding ——-32 ——————————-16 AES/CBC/ISO10126Padding ——-32 ——————————-16 AES/CFB/NoPadding ——-16 ————...
javascript个人学习总结：包括数据结构与算法，前端工程化等方面，助你快速入门
最新发布
03-02
主要内容目录如下： ...笔试题——JavaScript事件循环机制（event loop、macrotask、microtask） 五.异步编程 理解 JavaScript 的 async/await JavaScript异步编程 9k字 | Promise/async/Generator实现原理解析
javascript基础——for循环
01-07
for循环 语法结构： for (初始化变量；条件表达式；操作表达式) { //循环体 } 初始化变量：用var声明的一个普通变量，通常用于计数器使用； 条件表达式：用来决定每一次循环是否继续执行（终止条件）； 操作表达式：...
triangleJS:检查三角形是等腰三角形、不等边三角形还是等边三角形
06-10
姓名：帕特里克·费奥伦蒂诺和埃文·巴特勒日期：4/10/2015 说明： 用户输入三角形的边长，并返回它们是否形成等边三角形、等腰三角形或不等边三角形。设置和使用需要：一个网络浏览器。 在 Mac 上创建，尚未在其他...
C#生成网页截图 C#将网页内容转换成图片保存到本地( webbrowser 可应用于B/S结构中)
09-16
在实际应用中，可能还需要考虑其他因素，如网页的滚动、弹出窗口、JavaScript交互等。对于复杂的网页，可能需要更复杂的截图解决方案，例如使用无头浏览器（如PhantomJS或Headless Chrome）来获取更准确的屏幕快照。...
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
10-22
这个函数负责绘制一个等腰直角三角形。通过`Math.sin`和`Math.cos`计算出三角形的顶点坐标，然后使用`beginPath`、`moveTo`、`lineTo`和`closePath`方法来构建路径，最后用`stroke`方法绘制出三角形的边框。 ```...
html/jsp网站后台精美界面
11-12
了解如何使用表格、链接、图像、表单等元素构建用户友好的界面至关重要。 2. CSS美化：为了使界面美观，我们需要使用CSS（Cascading Style Sheets）来控制布局和样式。这包括设置颜色、字体、边距、背景，以及使用...
VC/MFC中通过WebBrowser控件调用google map，并实现用户输入地理坐标跳转
07-04
(2)通过CWebPage类实现了VC调用javascript函数，并向函数传参。 (3)VC程序运行过程中用户可以在编辑框上输入经纬度坐标，点击按钮后地图跳转到坐标位置 (4)压缩包里含google map API中文参考手册，在javascript中用...
html和css代码旋转风车，两种不同的旋转风车 也有Javascript
01-25
第一种是需要JavaScript的旋转风车，可以一直旋转。...为风车 第二种不需要JavaScript，但是只能旋转特定度数，...两种风车的扇叶均为四个相同的等边直角三角形。 可根据自身需要调整大小、颜色、位置。 辛苦制作，勿喷。
Javascript | 打印菱形
红星编程实验室
02-04 442
Javascript打印菱形，在校大学生可以拿来糊弄作业（笑）
js实现打印菱形
weixin_63121957的博客
01-18 444
用*号打印菱形
javascript打印直角三角形四种情况
nmgyangguangyuan的博客
07-27 3677
第一象限 <script type="text/javascript"> var str = ""; for(var i=0;i<10;i++){ for(var j=0;j<i;j++){ str +=" "; } for(var j=i;j<10;j++){ str +="*"; } str+="\n"; ...
javaScript打印等腰三角形，全网最详解(费曼学习法)
前方的路在刚开始
01-06 4939
至于是不是全网最详细，不敢说。但是很详细。立志于打造8岁小孩都能听懂的等腰三角形。 首先你需要具备以下知识,for循环,基础运算(加减乘除),javaScript的基础.,年龄大于等于8岁。 请耐心看完。中途若不适，请耐心看。 1.首先树立一个正确结果的目标。这里给大家手绘了一个结果。等腰三角形 2.分析发现，这东西有3行，第一个行有2个空格，1个点 第二个行有1个空格，3个点 第三行有0个空格 5个点 3.那对于一行来说，不就是先打印空格，在打印点嘛 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值