JavaScript初级玩法（1）—控制台输出三角形

说明

本文适合于刚刚接触JavaScript的朋友，了解一些JavaScript的知识，比如知道怎么声明变量，知道for循环，知道console.log( )，本文中用的浏览器是chrome，好了，开始！

效果图

代码

var row=5; // row表示总行数
for(var r=1;r<=row;r++){  //外层循环控制行数 r表示每次变化的行数var triangle="";   //triangle表示最后的三角形for(var space=r;space<row;space++){ //此循环控制空格数 space表示空格数triangle+=" ";}for(var star=1;star<=2*r-1;star++){ //此循环控制 * 数 star表示*数triangle+="*";}
console.log(triangle);
}

分析

为了方便理解这里将 空格换成 0 下图是效果图

我们先来找规律
空格数=行数-1
注意：这个规律中行数从最后一行开始

行数	空格数
5	4
4	3
3	2
2	1
1	0

也就是说，每次都需要循环打印空格，而空格数的最大值等于行数-1
* 数=2 * 行数-1
这里的意思就是，每次循环打印*，而 * 数的最大值等于 2 * 行数 -1

这里说一下，为什么要声明一个变量triangle，因为在控制台中，输出结果如果一样的话，只会在结果前面加上一个数字图标，表示有几个这样的结果，像这样

所以我们需要声明一个变量，用+=来拼接一下，让输出的结果正确显示出来
我们现在从第一行开始说：
第一行我们需要输出 4 个空格和 1个 *

   var triangle="";   //triangle表示最后的三角形for(var space=1;space<5;space++){ //此循环控制空格数 space表示空格数triangle+="0";}for(var star=1;star<=2*1-1;star++){ //此循环控制 * 数 star表示*数triangle+="*";}console.log(triangle);

这样的代码，结果就是 0000*
继续第二行：
第二行我们需要3个空格和 3 个*

   var triangle="";   //triangle表示最后的三角形for(var space=2;space<5;space++){ //此循环控制空格数 space表示空格数triangle+="0";}for(var star=1;star<=2*2-1;star++){ //此循环控制 * 数 star表示*数triangle+="*";}console.log(triangle);

这样的代码结果就是 000***
以此类推，看到这里，结合规律，我们应该明白点什么了，上面两段代码改的只是，控制行数的数值，要想输出这个等腰三角形，说的简单点我们就是输出5行不同的空格+*，然后拼起来就可以了，我们需要的无非就是3个循环，最外层的循环控制我们想要的行数，里面第一个循环控制输出的空格数，第二个循环控制输出的 * 数，外层循环每循环一次，我们就打印一行，内层循环每循环一次，我们就按照规律拼接上空格或者 *，等外层循环完成，等腰三角形就出来了！

总结

其实，我们只要理解了思路，找到规律，就很容易写代码来，当我们真的理解了这次打印的等腰三角形的思路之后，我们还能输出一个倒着的等腰三角形，只要改变下外层循环，让外层循环倒着数就可以了。
效果图

代码

var row=5; // row表示总行数
for(var r=row;r>0;r--){  //外层循环控制行数 r表示每次变化的行数var triangle="";   //triangle表示最后的三角形for(var space=r;space<row;space++){ //此循环控制空格数 space表示空格数triangle+=" ";}for(var star=1;star<=2*r-1;star++){ //此循环控制 * 数 star表示*数triangle+="*";}
console.log(triangle);
}

输出菱形也可以

能输出的图形还可以有多种多样，大家可以继续研究，然后晒出来分享一下！

JavaScript初级玩法（1）—控制台输出三角形相关推荐

JavaScript初级玩法（3）—兔子问题（斐波那契数列）
问题有人想知道一年内一对兔子可繁殖成多少对,便筑了一道围墙把一对兔子关在里面.已知一对兔子每一个月可以生一对小兔子,但是一对兔子要从出生后第三个月才开始生小兔子假如一年内没有发生死亡,则一对兔子一年 ...
Canokey Pigeon的初级玩法
Canokey Pigeon的初级玩法前言开箱使用控制台新版旧版初步设置 FIDO2 PIN更改重置坑(或者说不满意的地方) 玩法 FIDO2/U2F OpenPGP PIV NDE ...
时空猎人无尽之塔初级玩法解析攻略
时空猎人是一款格斗类的手机网游,自从2012年11月手游版时空猎人发行以来,就凭借其DNF式的打斗快感,配以炫丽的魔法效果带给诸位玩家前所未有的畅快体验.虽说时空猎人已成为一款经典的老游戏,可是老玩家 ...
javascript控制台_超越控制台日志3种在javascript中格式化控制台输出的方法
javascript控制台 As JavaScript developers, we intuitively use console.log() to debug, print out variabl ...
html页面控制台输出,浏览器javascript输出控制台在哪？
浏览器输出控制台可以使用快捷键F12直接调出,或点击浏览器右上角菜单按钮,在弹出的下拉菜单中选择"工具/更多工具"-"开发者工具"即可打开输出控制台. cons ...
【ASP.NET Core】依赖注入高级玩法——如何注入多个服务实现类
依赖注入在 ASP.NET Core 中起中很重要的作用,也是一种高大上的编程思想,它的总体原则就是:俺要啥,你就给俺送啥过来.服务类型的实例转由容器自动管理,无需我们在代码中显式处理. 因此,有了依 ...
12面魔方公式图解法_【高级篇】（三）三阶魔方CFOP高级玩法之——F2L
一.F2L这一步要干什么 1.先了解一下"棱角对"和"槽位"的概念棱角对:即由一个棱块和一个角块构成,是F2L的基本单元(共四组) 槽位:给"棱角对 ...
闲鱼把各种玩法做成了一个平台：哆啦A梦
简介:哆啦A梦的口袋里,都有哪些好玩的? 作者:闲鱼技术-齐悟玩法平台背景在闲鱼内我们把供给用户的闲鱼红包.支付宝红包.包邮券.宝卡等统称为用户权益.是闲鱼用户运营的重要策略,在拉新.留存.促活. ...
扩展：js控制台输出，除了 console.log还有哪些？
介绍: js的console你可以在firefox的firedbug或者ie和google的f12调试模式下看到,这些主流浏览器的调试模式的控制可以输出一些信息,你的一些js代码测试可以直接在cons ...

JavaScript初级玩法（1）—控制台输出三角形

说明

效果图

代码

分析

总结

JavaScript初级玩法（1）—控制台输出三角形相关推荐

最新文章

热门文章