本文实例为大家分享了js实现黑白div块画空心图形的具体代码,供大家参考,具体内容如下
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title>开始picture
& lt;链接rel="样式表" href=" https://www.yisu.com/zixun/main.css " rel=巴獠縩ofollow”比;
& lt;/head>
& lt; body>
& lt;脚本type=" text/javascript祝辞/*打印实心矩形,思路:两个为循环嵌套,外面为循环+换行符实现打印n行;
内部的循环实现打印n个星号;*/函数juxing (n){//打印矩形,传入参数为行数(矩形高),作用域预解析时会声明传入参数,无需var n=一个;声明多余的变量
(var i=1;i<=n;我+ +){
(var=1;j<=n;j + +){//循环嵌套实现,每行打印n个‘*’;
document . write (' & lt; div类=昂谏弊４? lt;/div>”);
}
document . write (' & lt; br/祝辞');//打印换行符,实现换行,不然全部在一行
}
}
juxing (4);/*打印空心矩形,
* * * *
* *
* *
* * * *
思路:内部的循环打印信号时加上序号判断,
具体情况:
1,第一行或最后一行的所有序号打印星号
2、第二行至倒数第二行的第一个序号或最后一个序号打印星号
3、第二行至倒数第二行中间全部序号打印空格
”,,“注意HTML中字符实体都是以,开头;结尾*/函数kongxinjuxing (n) {
(var i=1;i<=n;我+ +){
(var=1;j<=n;j + +) {
如果(i==1 | |我==n) {
document . write (' & lt; div类=昂谏弊４? lt;/div>”);
}else if (j==1 | | j==n) {
document . write (' & lt; div类=昂谏弊４? lt;/div>”);
其他}{
document . write (' & lt; div类=鞍咨痹? lt;/div>”);
}
}
document . write (' & lt; br/祝辞');
}
}
kongxinjuxing (8);/*打印实心正三角形
. . *
* * *。
* * * * *
思路:两个为循环嵌套;外部的循环实现n行;
的内部第一个循环,先打印n个空格
的内部第二个循环,再继续打印2张*个星号
*/函数zhengsanjiaoxing (n) {
(var i=1;i<=n;我+ +){
(var=1;j<=n;j + +) {
document . write (' & lt; div类=鞍咨痹? lt;/div>”);
}
(var k=1;k<张=2 *;k + +) {
document . write (' & lt; div类=昂谏弊４? lt;/div>”);
}
document . write (' & lt; br/祝辞');
}
}
zhengsanjiaoxing (4);
document . write (' & lt; br/祝辞');
document . write (' & lt; br/祝辞');/*打印空心三角形
*
* *
* *
* * * * * * *
思路:内部第二个为循环打印星号时判断序号
具体情况:
1,最后一行每个序号都打印星号
2、第一行至倒数第二行中第一个或最后一个打印星号
3,其他打印空格
*/函数kongxinzhengsanjiaoxing (n) {
(var i=1;i<=n;我+ +){
(var=1;j<=n;j + +) {
document . write (' & lt; div类=鞍咨痹? lt;/div>”);
}
(var k=1;k<张=2 *;k + +) {
如果(我==n){//判断如果是最后一行就每个序号都打星号
document . write (' & lt; div类=昂谏弊４? lt;/div>”);
}else if (k==1 | | k==2 *张){//判断如果是第一个或最后一个序号,打印星号
document . write (' & lt; div类=昂谏弊４? lt;/div>”);
其他}{//其他为序号打印空格
document . write (' & lt; div类=鞍咨痹? lt;/div>”);
}
}
document . write (' & lt; br/祝辞');
}
}
kongxinzhengsanjiaoxing (9);/*
打印实心菱形
思路:先打印上面(n + 1)/2行的正三角形,再打印下面(n + 1)/2 - 1行的倒过来的正三角形
*/函数lingxing (n) {
(var i=1;i<=(n + 1)/2;我+ +){//打印上半个三角形,行数为(n + 1)/2
(var=1;j<=(n + 1)/2 i;j + +) {
document . write (' & lt; div类=鞍咨痹? lt;/div>”);
}
(var k=1;k<张=2 *;k + +) {
document . write (' & lt; div类=昂谏弊４? lt;/div>”);
}
document . write (' & lt; br/祝辞');
}
(var l=1;l<=(n + 1)/2 - 1;l + +){//打印下半个倒三角形,行数为(n + 1)/2 - 1要比上半个少一行
(var m=1;m<=l;m + +) {
document . write (' & lt; div类=鞍咨痹? lt;/div>”);
}//再继续打印星号,每行是的星号个数是行数倒序的二倍减一,即(((n + 1)/2 - 1 + 1) - l) * 2 - 1
(var o=1;o<=((n + 1)/2 l) * 2 - 1;o + +) {
document . write (' & lt; div类=昂谏弊４? lt;/div>”);
}
document . write (' & lt; br/祝辞');
}
}
lingxing (9);/*
打印空心菱形
*/函数kongxinlingxing (n) {
(var=0;i
