上篇博客使用js打印了几种三角形，那么今天来更新打印菱形。
实现效果如图：
那么实现代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>菱形</title>
<style type="text/css">
span{
visibility: hidden;
}
</style>
</head>
<body>
<script type="text/javascript">
var n = parseInt(prompt("请输入行数"));
for(var i=1;i<=2*n-1;i++){
if(i<=n){
for(var j=1;j<=n-i;j++){
document.write("<span>*</span>");
}
for(j=1;j<=2*i-1;j++){
document.write("*");
}
}
else if(i>n && i<=2*n-1){
for(j=1;j<=i-n;j++){
document.write("<span>*</span>");
}
for(j=1;j<=2*(2*n-i)-1;j++){
document.write("*");
}
}
document.write("<br>");
}
</script>
</body>
</html>
然后还有这种菱形：
实现代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倒菱形</title>
<style type="text/css">
span{
visibility: hidden;
}
</style>
</head>
<body>
<script type="text/javascript">
var n = parseInt(prompt("请输入行数"));
// var i,j;
for(var i=1;i<=2*n-1;i++){
if(i<=n){
for(var j=1;j<=i-1;j++){
document.write("<span>*</span>");
}
for(j=1;j<=2*(n-i)+1;j++){
document.write("*");
}
}
else if(i>n && i<=2*n-1){
for(j=1;j<=2*n-i-1;j++){
document.write("<span>*</span>");
}
for(j=1;j<=2*i-2*n+1;j++){
document.write("*");
}
}
document.write("<br>");
}
</script>
</body>
</html>
这些菱形以及上一篇的各种三角形，有的是结合了css样式表和js代码来实现。
这种前边有空白的图形，老师说了一句很重要的话：一定要搞清楚 i 和 j 分别代表什么，然后再找规律，那么这种问题就简单了。
多练习练习，熟练了就明白其中的规律了。
209
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
