使用JavaScript实现长方形、直角三角形、平行四边形、等腰三角形、倒三角、数字三角形

2023-06-26,,

【循环嵌套的规律】
    1、外层循环控制行数,内层循环控制每行中元素的个数。

【图形题思路】
    1、确定图形有几行,行数即为外层循环次数;
    2、确定每行中有几种元素组成,有几种元素表示有几个内层循环;
    3、确定每种元素的个数,这个个数即为每个内层元素循环次数。
     如果每种元素的个数不固定,则找出每种元素的个数,与行号的关系,
     这个关系表达式即为内循环的最大值。

1、长方形

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

2、直角角形

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
/*
*
**
***
****
*****
*/
for(i=1;i<=5;i++){
document.write(" "+"<br/>");
for(j=1;j<=i;j++){
document.write("*");
}
}
</script>
</body>
</html>

3、平行四边形

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

4、等腰三角形

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

5、倒三角

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

6、数字三角形

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
/*
1
121
12321
1234321
123454321
*/
for(var i=1;i<=5;i++){
for(var j=1;j<=5-i;j++) {
document.write("&nbsp;");
}
var num = 1;
// 递增的数
for(var k=1; k<=i; k++){
document.write(num);
num++;
}
// 递减的数
num -= 2;
for(var l=1; l<=i-1; l++){
document.write(num);
num--;
}
// 回车
document.write("<br>");
}
</script>
</body>
</html>

使用JavaScript实现长方形、直角三角形、平行四边形、等腰三角形、倒三角、数字三角形的相关教程结束。

《使用JavaScript实现长方形、直角三角形、平行四边形、等腰三角形、倒三角、数字三角形.doc》

下载本文的Word格式文档,以方便收藏与打印。