js基础运用——js用*打印三角形,菱形

article/2025/9/15 14:09:54

js基础运用

新手见解,有不足或更简单的方法希望各位指点

1.用*排列直角三形

这里写图片描述(图一)

这里写图片描述(图二)
图一图二是js语句利用*号画出来的直角三角形,方法思路都一致,下面以图一为例讲一下本人所用的方法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script type="text/javascript">for(var j=1;j<5;j++)
{for(var i=1;i<=j;i++){document.write("*");}document.write("<br/>");
}
//此段简单的js代码由三部分组成,1.for(var i=1;i<=j;++){},这段语句用来输出星号。2.for(var j=1;j<5;j++){},这段语句将语句1中语句循环了4次,其中在1中语句之外每循环一次输出一个换行符,使1中每循环完一次便换一行。3.三角形是由上至下,星号逐渐递减的,这个效果是结合了1和2两个语句完成,1中的i<=j便是关键所在,结合2中给j所赋的值达到星号递减。</script>
</head>
<body></body>
</html>

在画直角三角形的基础上,可以延伸出乘法表的写法,具体如下:
这里写图片描述(图三)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script type="text/javascript">for(var j=1;j<9;j++){for(var i=1;i<=j;i++){document.write(i+"×"+j+"="+i*j+"&nbsp");}document.write("<br/>");
}</script>
</head>
<body></body>
</html>

锐角三角形

这里写图片描述(图四)

这里写图片描述(图五)
锐角三角形只是在直角三角形上加了一段输出空格的语句,以图四为例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script type="text/javascript">for(var j=1;j<5;j++){for(var a=3;a>=j;a--){document.write("&nbsp");//相对与直角三角形的写法,在整体结构上,锐角三角形只是在循环输出星号开始之前加了一个输出空格符号的一段for语句,其空格的输出写法思路和星号递减的写法思路大同小异。}for(var i=1;i<=j;i++){document.write("*");}document.write("<br/>");
}</script>
</head>
<body></body>
</html>

菱形

这里写图片描述(图六)
菱形是js利用 * 号写三角形的进阶用法,且从图六可以看出,三角形中 * 号的递曾和递减都是2个,看起来写法比图一二四五复杂了一些,其实只是一个简单的if语句的嵌套

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script type="text/javascript">for(i=7;i>=1;i--)
{if(i%2>0)//为了让星号以2递增递减,所以型号数量为2,4等偶数数量的行数都必须消失,所以在输出三角形的语句执行之前加入了一个判断i是否为奇数,是奇数就执行代码,否则不执行,这样就达到了1,3,5递增的三角形。{for(k=i;k>1;k-=1){document.write("&nbsp")}for(var a=7;a>=i;a--){document.write("*")}document.write("<br/>");}
}for(i=3;i<9;i++)
{if(i%2>0)//这是一个输出倒三角的for语句,方法和正三角基本一样,两个三角组成一个菱形,其实其更像一个平行四边形。{for(k=i;k>1;k-=2){document.write("&nbsp")}for(var a=7;a>=i;a--){document.write("*")}document.write("<br/>");}
}</script>
</head>
<body></body>
</html>

以上便是全部内容,请多多指教。


http://chatgpt.dhexx.cn/article/idQdL5IC.shtml

相关文章

java:打印十字图

java:打印十字图 题目 问题描述 小明为某机构设计了一个十字型的徽标&#xff08;并非红十字会啊&#xff09;&#xff0c;如下所示&#xff1a;..$$$$$$$$$$$$$.. ..$...........$.. $$$.$$$$$$$$$.$$$ $...$.......$...$ $.$$$.$$$$$.$$$.$ $.$...$...$...$.$ $.$.$$$.$.$$…

JAVA 利用JFram,JPanel,JScrollPane简单文本框实现

****1.JFram 支持通用窗口的所有基本功能 2…JPanel是一个无边框&#xff0c;不可以被移动的&#xff0c;放大的&#xff0c;缩小的&#xff0c;或者关闭的面板&#xff0c;默认布局是FlowLayout&#xff08;也可用setLayout&#xff08;&#xff09;来设定&#xff09;** 3……

deflater java_Java Deflater finished()用法及代码示例

如果已到达压缩数据输出流的末尾&#xff0c;则java.util.zip中Deflater类的finished()函数将返回true。 函数签名&#xff1a; public boolean finished() 用法: d.finished(); 参数&#xff1a;该函数不需要参数 返回类型&#xff1a;该函数返回布尔值&#xff0c;即如果所有…

jQuery API ( 三 ) -------- 链式编程 与 修改样式方法

今天这篇文章是 jQuery API 的第三篇&#xff0c;今天心情很好&#xff0c;因为破了300粉&#xff0c;希望所有代码人前端人在编程与写作的路上都能一帆风顺&#xff0c;全都早日拿认证。okk言归正传&#xff0c;这篇文章将带大家走进链式编程的世界&#xff0c;这也是 jQuery …

jsfiddle 使用教程

最近有许多的Css 3 demo&#xff0c;因此为了方便查阅&#xff0c;就将demo部分放在 jsfiddle &#xff0c;方便日后翻阅。 这是 JSFIDDLE 的官网文档&#xff0c;都是英文&#xff0c;不过对照看还是可以的&#xff1a;官方文档 HTML区域&#xff1a; 它的HTML区域已经包含 ht…

Jfinal 框架 在Html页面使用 #if(调用java方法) #end

欢迎转发分享&#xff0c; 转发请附上本文地址&#xff1a; https://blog.csdn.net/Luoxianxun/article/details/106399780 一、实现需求 实现在html 中使用 #if(调用java类中的方法) #end&#xff1b; 二、使用技术 JFinal后台框架 JFinal 官方文档&#xff1a;https://jfi…

java文本框代码_Java Swing JTextField文本框的代码示例

1. 概述 官方JavaDocsApi: javax.swing.JTextField JTextField&#xff0c;文本框。JTextField 用来编辑单行的文本。 JTextField 常用构造方法: /* * 参数说明: * text: 默认显示的文本 * columns: 用来计算首选宽度的列数&#xff1b;如果列设置为 0&#xff0c;则首选宽度将…

java的StringBuilder、Stringjoiner

一、StringBuilder StringBuilder可以看成是一个容器&#xff0c;创建之后里面的内容是可变的。作用是提高字符串的操作效率。 注意&#xff1a;使用String创建字符串对象时&#xff0c;是不能改变字符串的内容的&#xff0c;例如&#xff1a; String s1 "aaa"; St…

swing的JTextField的介绍及其使用方法

:JTextField的(文本框)使用: JTextField 是一个轻量级组件&#xff0c;它允许编辑单行文本。 1.JTextField的常用构造方法: JTextField() 构造一个新的 TextField。 JTextField(int columns) 构造一个具有指定列数的新的空 TextField。 JTextField(String text) 构造一个用…

十字链表简介与实现(Java)

十字链表简介与实现&#xff08;Java&#xff09; 结构实现 结构 十字链表存储有向图&#xff08;网&#xff09;的方式与邻接表有一些相同&#xff0c;都以图&#xff08;网&#xff09;中各顶点为首元节点建立多条链表&#xff0c;同时为了便于管理&#xff0c;还将所有链表…

Java输出一个*号十字架

总共9行 每一行4个空格除了第五行不要空格 每一行1个*除了第五行需要9个* 利用for的循环嵌套方法&#xff0c;用三个for 从上往下 第一个for代表行数&#xff0c;第二个for代表空格数&#xff0c;第三个for代表输出的*数 做法如下:

Java 写一个简单的"十字"

如何用代码写出十字&#xff1f; 首先创建一个新的Package&#xff0c;如图&#xff1a; 取一个com.➕名字缩写和日期&#xff0c;下一行写public class 类名&#xff0c;后面加上一个{ },在它的中间写上public static void main&#xff08;String[] args){, 如图&#xff1a…

JTextField的部分常用使用方法

本篇文章将会教会大家如何使用JTextField输入框 1.创建JTextField和添加 //创建输入框 JTextField jTextField new JTextField(); //将标签添加到面板里 jPanel.add(jTextField);2设置JTextField大小坐标 //设置输入框大小 jTextField.setSize(300,100); //设置输入框坐标…

Exists 用法解释

exists的实例解析 现有两个表 a&#xff1a; b: 现有sql语句如下 select * from a where exists (select 1 from b where b.b_id a.id); 执行结果如下&#xff1a; 含义解析&#xff1a;exists 的意思是用于检查子查询是否至少会返回一行数据&#xff0c;该子查询实际上并不…

MySQL中的EXISTS用法

EXISTS 语法&#xff1a; SELECT 字段 FROM table WHERE EXISTS (subquery); 参数&#xff1a; subquery是一个受限的SELECT语句&#xff08;不允许有COMPUTE子句和INTO关键字&#xff09; 示例&#xff1a; SELECT * FROM A WHERE EXISTS (SELECT 1 FROM B WHERE B.id …

EXISTS用法

EXISTS用于检查子查询是否至少会返回一行数据&#xff0c;该子查询实际上并不返回任何数据&#xff0c;而是返回值True或False 方法/ 1 EXISTS用于检查子查询是否至少会返回一行数据&#xff0c;该子查询实际上并不返回任何数据&#xff0c;而是返回值True或False EXISTS 指定一…

hivesql中 exists 用法

有一次面试的时候&#xff0c;面试官问了这么一个场景题&#xff1a;一家门店一个月内每位顾客访问的目的可能有多种&#xff0c;并给到访顾客的目的打标签1、2、3、4这四类&#xff0c;现在要统计这家门店一个月内没有3、4标签的顾客明细。&#xff08;也就是顾客到访标签只有…

mysql中not exists用法_not exists用法

not exists是sql中的一个语法,常用在子查询和主查询之间,用于条件判断,根据一个条件返回一个布尔值,从而来确定下一步操作如何进行,not exists也是exists或in的对立面。 not exists 是exists的对立面,所以要了解not exists的用法,我们首先了解下exists、in的区别和特点:…

Hive exists 用法

where exists(select c2/1/*/key2 from tb2 where tb2.key2 = tb1.key1) exists()中的select后面跟其他字段也行,where后面用关联字段即可! selec * : in :

SQL中EXISTS的用法

比如在Northwind数据库中有一个查询为 SELECT c.CustomerId,CompanyName FROM Customers c WHERE EXISTS( SELECT OrderID FROM Orders o WHERE o.CustomerID=c.CustomerID) 这里面的EXISTS是如何运作呢?子查询返回的是OrderId字段,可是外面的查询要找的是CustomerID和Compan…