使用Js打印直角三角形、正三角形、菱形、空心菱形、对角菱形

于 2021-03-21 11:59:07 发布
阅读量2.8k 收藏 27
点赞数 5
分类专栏： JavaScript 文章标签： javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Moxi099/article/details/115046918
版权

客户端软件技术的作业，要求根据输入的数值打印出各种形状。

首先是html部分

<h1>正三角形1</h1>
    <div>
        <input type="text" id="side1" placeholder="请输入您想要的正三角形的边长度" style="width: 300px;">
        <input type="button" onclick="one()" value="点我生成三角形">
        <div id="one" style="line-height: 10px;margin-top: 20px;"></div>
    </div>
    <h1>正三角形2</h1>
    <div style="margin-top: 10px;">
        <input type="text" id="side2" placeholder="请输入您想要的正三角形的边长度" style="width: 300px;">
        <input type="button" onclick="two()" value="点我生成正三角形">
        <div id="two"></div>
    </div>
    <h1>直角三角形</h1>
    <div style="margin-top: 10px;">
        <input type="text" id="side3" placeholder="请输入行数" style="width: 300px;">
        <input type="button" onclick="three()" value="点我生成直角三角形">
        <div id="three"></div>
    </div>
    <h1>菱形</h1>
    <div style="margin-top: 10px;">
        <input type="text" id="side4" placeholder="请输入菱形的边长" style="width: 300px;">
        <input type="button" onclick="four()" value="点我生成菱形">
        <div id="four" style="letter-spacing: 4px;"></div>
    </div>
    <h1>空心菱形</h1>
    <div style="margin-top: 10px;">
        <input type="text" id="side5" placeholder="请输入菱形的边长" style="width: 300px;">
        <input type="button" onclick="five()" value="点我生成空心菱形">
        <div id="five" style="letter-spacing: 4px;"></div>
    </div>
    <h1>对角线菱形</h1>
    <div style="margin-top: 10px;">
        <input type="text" id="side6" placeholder="请输入菱形的边长" style="width: 300px;">
        <input type="button" onclick="six()" value="点我生成对角线菱形">
        <div id="six" style="letter-spacing: 4px;"></div>
    </div>

效果：

正三角形：

function one() { //点击按钮触发的函数
            var one = document.getElementById("one") //获取one,方便后续将三角形画在里面
            var html1 = '' //定义HTML1
            var side1 = document.getElementById("side1").value //获取输入的边的值
            if (!side1) { //判断side1是否为空，否则给出提示
                alert("请先输入哦")
            } else if (!isNum(side1)) { //在下方的函数中判断side1是否为正整数，否则给出提示
                alert("请输入正整数哦")
            } else {
                for (var i = 0; i < side1; i++) {
                    for (var j = 0; j <= i; j++) { //当j小于i时便输出
                        html1 += '*'
                    }
                    html1 += '<br/>'
                }
                one.innerHTML = html1 //将html在one中显示粗来
            }

        }

效果：

第二个正三角形：

 function two() { //点击正三角形按钮触发的函数
            var two = document.getElementById("two") //获取two，方便后续将等边三角形画在里面
            var html2 = '' //定义HTML2
            var side2 = document.getElementById("side2").value //获取输入的等边三角形的边的值
            if (!side2) { //判断side2是否为空，否则给出提示
                alert("请先输入哦")
            } else if (!isNum(side2)) { //判断side1是否为正整数，否则给出提示
                alert("请输入正整数哦")
            } else {
                for (var i = 0; i < side2; i++) {
                    for (var j = 0; j < side2 - i - 1; j++) {
                        html2 += '&nbsp'
                    }
                    for (var k = 0; k < i * 2 + 1; k++) {
                        if (k > i) { //每行只输入相应行数的*
                            html2 += '&nbsp'
                        } else {
                            html2 += '* '
                        }
                    }
                    html2 += '<br/>'
                }
                two.innerHTML = html2 //将html在two中显示粗来
            }
        }

效果：

直角三角形：

function three() { //点击直角三角形触发的函数
            var three = document.getElementById("three") //获取three，方便后续将三角形画里边
            var html3 = ''
            var side3 = document.getElementById("side3").value //获取行数的值
            if (!side3) { //判断输入框里的内容是否为空，否则给出提示
                alert("请先输入哦")
            } else if (!isNum(side3)) { //判断文本框的内容是否是正整数，否则给出提示
                alert("请输入正整数哦")
            } else {
                for (i = 0; i < side3; i++) {
                    for (j = 0; j < 2 * i + 1; j++) {
                        html3 += '*'
                    }
                    html3 += '<br/>'
                }
                three.innerHTML = html3 //将html在three中显示粗来
            }
        }

效果：

菱形：

function four() { //点击菱形按钮触发的函数
            var four = document.getElementById("four") //获取four，方便后续将图形画里边
            var html4 = ''
            var side4 = document.getElementById("side4").value //获取行数的值
            if (!side4) { //判断输入框里的内容是否为空，否则给出提示
                alert("请先输入哦")
            } else if (!isNum(side4)) { //判断文本框的内容是否是正整数，否则给出提示
                alert("请输入正整数")
            } else {
                for (var i = 0; i < side4; i++) { //输出正三角形               
                    for (var j = 0; j < side4 - i - 1; j++) {                                
                        html4 += '&nbsp'                    
                    }                   
                    for (var j = 0; j < 2 * i + 1; j++) {                                
                        if (j > i) { //每行只输入相应行数的*
                            html4 += '&nbsp'
                        } else {
                            html4 += '* '
                        }           
                    }                    
                    html4 += '<br/>';            
                }         
                for (var i = side4 - 2; i >= 0; i--) { //输出倒三角形，倒三角形最长的边应该比正三角形最长边小2              
                    for (var j = 0; j < side4 - i - 1; j++) {                                
                        html4 += '&nbsp'                    
                    }                                           
                    for (var j = 0; j < 2 * i + 1; j++) {                                        
                        if (j > i) { //每行只输入相应行数的*
                            html4 += '&nbsp'
                        } else {
                            html4 += '* '
                        }                           
                    }                            
                    html4 += '<br/>';                        
                }                   
                four.innerHTML = html4
            }
        }

效果：

空心菱形：

function five() { //点击空心菱形触发的函数
            var five = document.getElementById("five") //获取five，方便后续将图形画里边
            var html5 = ''
            var side5 = document.getElementById("side5").value //获取行数的值
            if (!side5) { //判断输入框里的内容是否为空，否则给出提示
                alert("请先输入哦")
            } else if (!isNum(side5)) { //判断文本框的内容是否是正整数，否则给出提示
                alert("请输入正整数")
            } else {        
                for (var i = 0; i < side5; i++) { //输出正三角形                      
                    for (var j = 0; j < side5 - i - 1; j++) {                                                        
                        html5 += '&nbsp'                                            
                    }                                                      
                    for (var j = 0; j < 2 * i + 1; j++) {                                                        
                        if (j == 0 || j == 2 * i) { //只在最开始和最末尾打印*                                                                                  
                            html5 += '*'                                                           
                        } else {                                                                    
                            html5 += '&nbsp'                                                            
                        }                                                        
                    }                                                        
                    html5 += '<br/>';                                
                }                                        
                for (var i = side5 - 2; i >= 0; i--) {                                                  
                    for (var j = 0; j < side5 - i - 1; j++) {                                                                            
                        html5 += '&nbsp'                                                        
                    }                                                                  
                    for (var j = 0; j < 2 * i + 1; j++) { //同理，只在最开始和最末尾打印*                                                                    
                        if (j == 0 || j == 2 * i) {                                                                                      
                            html5 += '*'                                                                    
                        } else {                                                                                           
                            html5 += '&nbsp'                                                                        
                        }                                                        
                    }                                                        
                    html5 += '<br/>'                        
                }    
                five.innerHTML = html5                                            
            }
        }

效果：

对角菱形：

function six() {
            var six = document.getElementById("six") //获取six，方便后续将图形画里边
            var html6 = ''
            var side6 = document.getElementById("side6").value //获取行数的值
            if (!side6) { //判断输入框里的内容是否为空，否则给出提示
                alert("请先输入哦")
            } else if (!isNum(side6)) { //判断文本框的内容是否是正整数，否则给出提示
                alert("请输入正整数")
            } else {             
                for (var i = 0; i < side6; i++) {                              
                    for (var j = 0; j < side6 - i - 1; j++) {                                                    
                        html6 += '&nbsp'                            
                    }                                        
                    for (var j = 0; j < 2 * i + 1; j++) {                                    
                        if (i == side6 - 1 && j < side6) {   //横线                                                  
                            html6 += '* '                                     
                        } else {
                            if (i == side6 - 1 && j >= side6) { //排除掉横线符合下面if的条件被意外写入的情况
                                html6 += '&nbsp'
                            } else {
                                if (j == 0 || j == 2 * i || j == i) { //在最前端、最末尾和最中间写上*                                                                    
                                    html6 += '*'                            
                                } else {                                                                    
                                    html6 += '&nbsp'                                                                    
                                } 
                            }                                                                                                       
                        }                                        
                    }                                            
                    html6 += '<br/>'                                   
                }                                    
                for (var i = side6 - 2; i >= 0; i--) {                                                                                                                
                    for (var j = 0; j < side6 - i - 1; j++) {                                                                                            
                        html6 += '&nbsp'                                                           
                    }                                                                      
                    for (var j = 0; j < 2 * i + 1; j++) {                                                                        
                        if (j == 0 || j == 2 * i || j == i) {                                             
                            html6 += '*'                                      
                        } else {                                                                                        
                            html6 += '&nbsp'                                           
                        }                                       
                    }                                                                                
                    html6 += '<br/>'                               
                }                             
                six.innerHTML = html6
            }
        }

效果：

说明：我这种方法画出来的十字不是很直，有其他方法的。

最后是自己写的判断是否是正整数的函数：

function isNum(num) { //判断传进来的数字是否是正整数
            var r = /^[0-9]*[1-9][0-9]*$/ //将正则写出来
            return r.test(num) //test()判断数字是否符合正则表达式
        }

附上完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>正三角形1</h1>
    <div>
        <input type="text" id="side1" placeholder="请输入您想要的正三角形的边长度" style="width: 300px;">
        <input type="button" onclick="one()" value="点我生成三角形">
        <div id="one" style="line-height: 10px;margin-top: 20px;"></div>
    </div>
    <h1>正三角形2</h1>
    <div style="margin-top: 10px;">
        <input type="text" id="side2" placeholder="请输入您想要的正三角形的边长度" style="width: 300px;">
        <input type="button" onclick="two()" value="点我生成正三角形">
        <div id="two"></div>
    </div>
    <h1>直角三角形</h1>
    <div style="margin-top: 10px;">
        <input type="text" id="side3" placeholder="请输入行数" style="width: 300px;">
        <input type="button" onclick="three()" value="点我生成直角三角形">
        <div id="three"></div>
    </div>
    <h1>菱形</h1>
    <div style="margin-top: 10px;">
        <input type="text" id="side4" placeholder="请输入菱形的边长" style="width: 300px;">
        <input type="button" onclick="four()" value="点我生成菱形">
        <div id="four" style="letter-spacing: 4px;"></div>
    </div>
    <h1>空心菱形</h1>
    <div style="margin-top: 10px;">
        <input type="text" id="side5" placeholder="请输入菱形的边长" style="width: 300px;">
        <input type="button" onclick="five()" value="点我生成空心菱形">
        <div id="five" style="letter-spacing: 4px;"></div>
    </div>
    <h1>对角线菱形</h1>
    <div style="margin-top: 10px;">
        <input type="text" id="side6" placeholder="请输入菱形的边长" style="width: 300px;">
        <input type="button" onclick="six()" value="点我生成对角线菱形">
        <div id="six" style="letter-spacing: 4px;"></div>
    </div>
    <script>
        function one() { //点击按钮触发的函数
            var one = document.getElementById("one") //获取one,方便后续将三角形画在里面
            var html1 = '' //定义HTML1
            var side1 = document.getElementById("side1").value //获取输入的边的值
            if (!side1) { //判断side1是否为空，否则给出提示
                alert("请先输入哦")
            } else if (!isNum(side1)) { //在下方的函数中判断side1是否为正整数，否则给出提示
                alert("请输入正整数哦")
            } else {
                for (var i = 0; i < side1; i++) {
                    for (var j = 0; j <= i; j++) { //当j小于i时便输出
                        html1 += '*'
                    }
                    html1 += '<br/>'
                }
                one.innerHTML = html1 //将html在one中显示粗来
            }

        }

        function two() { //点击正三角形按钮触发的函数
            var two = document.getElementById("two") //获取two，方便后续将等边三角形画在里面
            var html2 = '' //定义HTML2
            var side2 = document.getElementById("side2").value //获取输入的等边三角形的边的值
            if (!side2) { //判断side2是否为空，否则给出提示
                alert("请先输入哦")
            } else if (!isNum(side2)) { //判断side1是否为正整数，否则给出提示
                alert("请输入正整数哦")
            } else {
                for (var i = 0; i < side2; i++) {
                    for (var j = 0; j < side2 - i - 1; j++) {
                        html2 += '&nbsp'
                    }
                    for (var k = 0; k < i * 2 + 1; k++) {
                        if (k > i) { //每行只输入相应行数的*
                            html2 += '&nbsp'
                        } else {
                            html2 += '* '
                        }
                    }
                    html2 += '<br/>'
                }
                two.innerHTML = html2 //将html在two中显示粗来
            }
        }

        function three() { //点击直角三角形触发的函数
            var three = document.getElementById("three") //获取three，方便后续将三角形画里边
            var html3 = ''
            var side3 = document.getElementById("side3").value //获取行数的值
            if (!side3) { //判断输入框里的内容是否为空，否则给出提示
                alert("请先输入哦")
            } else if (!isNum(side3)) { //判断文本框的内容是否是正整数，否则给出提示
                alert("请输入正整数哦")
            } else {
                for (i = 0; i < side3; i++) {
                    for (j = 0; j < 2 * i + 1; j++) {
                        html3 += '*'
                    }
                    html3 += '<br/>'
                }
                three.innerHTML = html3 //将html在three中显示粗来
            }
        }

        function four() { //点击菱形按钮触发的函数
            var four = document.getElementById("four") //获取four，方便后续将图形画里边
            var html4 = ''
            var side4 = document.getElementById("side4").value //获取行数的值
            if (!side4) { //判断输入框里的内容是否为空，否则给出提示
                alert("请先输入哦")
            } else if (!isNum(side4)) { //判断文本框的内容是否是正整数，否则给出提示
                alert("请输入正整数")
            } else {
                for (var i = 0; i < side4; i++) { //输出正三角形               
                    for (var j = 0; j < side4 - i - 1; j++) {                                
                        html4 += '&nbsp'                    
                    }                   
                    for (var j = 0; j < 2 * i + 1; j++) {                                
                        if (j > i) { //每行只输入相应行数的*
                            html4 += '&nbsp'
                        } else {
                            html4 += '* '
                        }           
                    }                    
                    html4 += '<br/>';            
                }         
                for (var i = side4 - 2; i >= 0; i--) { //输出倒三角形，倒三角形最长的边应该比正三角形最长边小2              
                    for (var j = 0; j < side4 - i - 1; j++) {                                
                        html4 += '&nbsp'                    
                    }                                           
                    for (var j = 0; j < 2 * i + 1; j++) {                                        
                        if (j > i) { //每行只输入相应行数的*
                            html4 += '&nbsp'
                        } else {
                            html4 += '* '
                        }                           
                    }                            
                    html4 += '<br/>';                        
                }                   
                four.innerHTML = html4
            }
        }

        function five() { //点击空心菱形触发的函数
            var five = document.getElementById("five") //获取five，方便后续将图形画里边
            var html5 = ''
            var side5 = document.getElementById("side5").value //获取行数的值
            if (!side5) { //判断输入框里的内容是否为空，否则给出提示
                alert("请先输入哦")
            } else if (!isNum(side5)) { //判断文本框的内容是否是正整数，否则给出提示
                alert("请输入正整数")
            } else {        
                for (var i = 0; i < side5; i++) { //输出正三角形                      
                    for (var j = 0; j < side5 - i - 1; j++) {                                                        
                        html5 += '&nbsp'                                            
                    }                                                      
                    for (var j = 0; j < 2 * i + 1; j++) {                                                        
                        if (j == 0 || j == 2 * i) { //只在最开始和最末尾打印*                                                                                  
                            html5 += '*'                                                           
                        } else {                                                                    
                            html5 += '&nbsp'                                                            
                        }                                                        
                    }                                                        
                    html5 += '<br/>';                                
                }                                        
                for (var i = side5 - 2; i >= 0; i--) {                                                  
                    for (var j = 0; j < side5 - i - 1; j++) {                                                                            
                        html5 += '&nbsp'                                                        
                    }                                                                  
                    for (var j = 0; j < 2 * i + 1; j++) { //同理，只在最开始和最末尾打印*                                                                    
                        if (j == 0 || j == 2 * i) {                                                                                      
                            html5 += '*'                                                                    
                        } else {                                                                                           
                            html5 += '&nbsp'                                                                        
                        }                                                        
                    }                                                        
                    html5 += '<br/>'                        
                }    
                five.innerHTML = html5                                            
            }
        }

        function six() {
            var six = document.getElementById("six") //获取six，方便后续将图形画里边
            var html6 = ''
            var side6 = document.getElementById("side6").value //获取行数的值
            if (!side6) { //判断输入框里的内容是否为空，否则给出提示
                alert("请先输入哦")
            } else if (!isNum(side6)) { //判断文本框的内容是否是正整数，否则给出提示
                alert("请输入正整数")
            } else {             
                for (var i = 0; i < side6; i++) {                              
                    for (var j = 0; j < side6 - i - 1; j++) {                                                    
                        html6 += '&nbsp'                            
                    }                                        
                    for (var j = 0; j < 2 * i + 1; j++) {                                    
                        if (i == side6 - 1 && j < side6) {   //横线                                                  
                            html6 += '* '                                     
                        } else {
                            if (i == side6 - 1 && j >= side6) { //排除掉横线符合下面if的条件被意外写入的情况
                                html6 += '&nbsp'
                            } else {
                                if (j == 0 || j == 2 * i || j == i) { //在最前端、最末尾和最中间写上*                                                                    
                                    html6 += '*'                            
                                } else {                                                                    
                                    html6 += '&nbsp'                                                                    
                                } 
                            }                                                                                                       
                        }                                        
                    }                                            
                    html6 += '<br/>'                                   
                }                                    
                for (var i = side6 - 2; i >= 0; i--) {                                                                                                                
                    for (var j = 0; j < side6 - i - 1; j++) {                                                                                            
                        html6 += '&nbsp'                                                           
                    }                                                                      
                    for (var j = 0; j < 2 * i + 1; j++) {                                                                        
                        if (j == 0 || j == 2 * i || j == i) {                                             
                            html6 += '*'                                      
                        } else {                                                                                        
                            html6 += '&nbsp'                                           
                        }                                       
                    }                                                                                
                    html6 += '<br/>'                               
                }                             
                six.innerHTML = html6
            }
        }

        function isNum(num) { //判断传进来的数字是否是正整数
            var r = /^[0-9]*[1-9][0-9]*$/ //将正则写出来
            return r.test(num) //test()判断数字是否符合正则表达式
        }
    </script>
</body>

</html>

今天是周末，依然是与学习死磕的一天，窗户外面一片生机，温度只有十度。但学习使我快乐~⚪祝前程似锦

php的绯闻女友
关注
  • 5
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值