原生js输出直角三角形和金字塔效果

简介: 原生js输出直角三角形和金字塔效果

大厂面试题分享 面试题库

前端面试题库 (面试必备) 推荐:★★★★★

地址:前端面试题库


正立直角三角形

思路:

1:两个for循环,外层for循环控制换行,里层for循环控制每行输出

2:外循环,每循环一次,输出换行符,所以设置一个变量i,控制层数

代码:

for(var i=1;i<=5;i++){
  document.write("<br/>");
  }

3:里循环,设置变量j,记录每循环一次要输出的❤数量

for(var j=1;j<=i;j++){
  document.write("♥");
  }

完整代码:

for(var i=1;i<=5;i++){
    for(var j=1;j<=i;j++){
          document.write("♥");
          }
    document.write("<br/>");

倒直角三角形

思路:

1:外层for循环输出5次,设置变量x值,初始值从最大值开始

2:里层for循环根据x值的变化,每次循环输出和x值一样数量的♥

代码:

for(var x=5;x>0;x--){
    for(var y=1;y<=x;y++){
          document.write("♥");
          }
    document.write("<br/>");
    }

正金字塔

思路:

1:控制输出行数,所以有个最外层for循环控制

2:每行不单只是输出♥,还有空格,让♥的位置能在正确的地方,方便看逻辑关系,用另一个图标♠代替空格

每行输出关系图

左边空格规律图

右边输出内容规律图

代码:

for(var a=1;a<=5;a++){
        for(var b=1;b<=(5-a);b++){
          document.write("♠");
        }
        for(var c=1;c<=2*a-1;c++){
          document.write("♥");
        }
      document.write("<br/>");
      }

倒立金字塔

思路:

1:控制输出行数,所以有个最外层for循环控制

2:每行不单只是输出♥,还有空格,让♥的位置能在正确的地方,方便看逻辑关系,用另一个图标♠代替空格

左边空格规律图

左边空格规律图

代码:

for(var a=1;a<=5;a++){
        for(var b=1;b<=(a-1);b++){
          document.write("♠");
        }
        for(var c=1;c<=11-2*a;c++){
          document.write("♥");
        }
      document.write("<br/>");


相关文章
|
1月前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
33 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
3月前
|
移动开发 前端开发 JavaScript
原生JavaScript+canvas实现五子棋游戏_值得一看
本文介绍了如何使用原生JavaScript和HTML5的Canvas API实现五子棋游戏,包括棋盘的绘制、棋子的生成和落子、以及判断胜负的逻辑,提供了详细的代码和注释。
44 0
原生JavaScript+canvas实现五子棋游戏_值得一看
|
4月前
|
Devops 持续交付 测试技术
JSF遇上DevOps:开发流程将迎巨变?一篇文章带你领略高效协同的魅力!
【8月更文挑战第31天】本文探讨了如何在JavaServer Faces(JSF)开发中融入DevOps文化,通过持续集成与部署、自动化测试、监控与日志记录及反馈机制,提升软件交付速度与质量。文中详细介绍了使用Jenkins进行自动化部署、JUnit与Selenium进行自动化测试、ELK Stack进行日志监控的具体方法,并强调了持续改进的重要性。
43 0
|
4月前
|
JavaScript 前端开发 API
从零开始学表单操作,jQuery 与原生 JavaScript 完全指南,带你轻松掌握网页交互关键!
【8月更文挑战第31天】在网页开发中,表单是实现用户互动的关键元素。无论是收集信息、提交数据还是验证输入,都需要对表单进行有效操作。本文档介绍了如何使用原生 JavaScript 和 jQuery 操作表单,包括获取表单元素、读写表单值、处理表单提交及验证等核心功能。jQuery 提供了更简洁的语法和更好的兼容性,但原生 JavaScript 在性能上有优势。选择合适的方法取决于项目需求和个人偏好。下面通过具体示例展示了两种方式的操作方法。
42 0
|
6月前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
|
6月前
|
JavaScript
原生JS实现全选、全不选
原生JS实现全选、全不选
|
5月前
|
JavaScript
js 一键复制到剪贴板(原生js实现)
js 一键复制到剪贴板(原生js实现)
36 0
|
6月前
|
前端开发 JavaScript 容器
程序技术好文:纯原生javascript下拉框表单美化实例教程
程序技术好文:纯原生javascript下拉框表单美化实例教程
109 0
|
7月前
|
前端开发 JavaScript
前端 js 经典:Object 常用原生方法
前端 js 经典:Object 常用原生方法
110 2
|
6月前
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
214 0