JS的基础运用之JS中用*打印三角形,菱形
1.图一和图二是利用JS语句画出来的两个直角三角形,下边我以图一为例,说一下我的做法。
图一星号逐行递增,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>星号输出</title>
</head>
<body>
<script>
for(var n=1;n<5;n++){ //外部循环决定输出的行数
for(var j=0;j<n;j++){
document.write("*"); //内部循环的循环次数,根据行数决定(输出对应的星号个数)
}
document.write("<br>"); //输入完之后需要换行;
}
</script>
</body>
</html>
**2.**图二的做法与图一类似,图二是每行的星号逐行递减,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>星号输出</title>
</head>
<body>
<script>
for(var n=4;n>0;n--){
for(var j=0;j<n;j++){
document.write("*");
}
document.write("<br>");
}
</script>
</body>
</html>
3.通过画三角形,我们也可以延伸出乘法表的写法,
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>乘法口诀</title>
</head>
<body>
<script type="text/javascript">
for(var j=1;j<9;j++){
for(var i=1;i<=j;i++){
document.write(i+"×"+j+"="+i*j+" ");
}
document.write("<br/>");
}
</script>
</body>
</html>
4.锐角三角形 锐角三角形是在直角三角形的基础上每行加入了一些空格。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>锐角三角形</title>
</head>
<body>
<script>
var y=5;
for(var line=1;line<6;line++){
for(var i=0;i<y;i++){
document.write(" ");
}
y--;
for(var j=0;j<2*line-1;j++){
document.write("*");
}
document.write("<br>");
}
</script>
</body>
</html>
5.菱形
菱形是js利用 *号写三角形的进阶用法,三角形中 * 号的递曾和递减都是2个,看起来写法比前面复杂了一些,其实只是一个简单的if语句的嵌套
方法1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>星号练习-菱形</title>
</head>
<body>
<script>
var line=10;
for(var i=1;i<line;i++){
if (i<5) {
for(var j=0;j<line-i-5;j++){
document.write(' ');
}
for(var j=0;j<2*i-1;j++){
document.write('*');
}
}else{
for(var j=0;j<i-line+5;j++){
document.write(' ');
}
for(var j=(line-i)*2-1;j>0;j--){
document.write('*');
}
}
document.write('<br>');
}
</script>
</body>
</html>
方法2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>菱形</title>
</head>
<body>
<script>
var x=1;
var y=5;
for(var line=1;line<=9;line++){
for(var i=0;i<y;i++){
document.write(" ")
}
if (line<5) {
y--;
}
else{
y++;
}
for(var j=0;j<2*x-1;j++){
document.write("*");
}
if (line<5) {
x++;
}else{
x--;
}
document.write("<br>");
}
</script>
</body>
</html>
以上是我的一些总结,感谢读者指出。