js实现黑白div块画空心的图形
网络 2019-01-11 1885
本文实例为大家分享了js实现黑白div块画空心图形的具体代码，供大家参考，具体内容如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>starts picture</title> <link rel="stylesheet" href="main.css" rel="external nofollow" > </head> <body> <script type="text/javascript"> /* 打印实心矩形，思路：两个for循环嵌套，外面for循环 + 换行符实现打印n行； 内部for循环实现打印n个星号； */ function juxing(n){ //打印矩形，传入参数为行数（矩形高），作用域预解析时会声明传入参数，无需 var n = a; 声明多余的变量 for(var i=1; i<=n; i++){ for(var j=1; j<=n; j++){ //for循环嵌套实现，每行打印n个'*'; document.write('<div class="black"></div>'); } document.write('<br/>'); //打印换行符，实现换行,不然全部在一行 } } juxing(4); /* 打印空心矩形， **** * * * * **** 思路：内部for循环打印信号时加上序号判断， 具体情况： 1、第一行 或 最后一行的所有序号 打印星号 2、第二行至倒数第二行的第一个序号 或 最后一个序号 打印星号 3、第二行至倒数第二行中间全部序号 打印空格 ' ' 注意HTML中字符实体都是以 &开头 ;结尾 */ function kongxinjuxing(n){ for(var i=1; i<=n; i++){ for(var j=1; j<=n; j++){ if(i==1 || i==n){ document.write('<div class="black"></div>'); }else if(j==1 || j==n){ document.write('<div class="black"></div>'); }else{ document.write('<div class="white"></div>'); } } document.write('<br/>'); } } kongxinjuxing(8); /* 打印实心正三角形 ..* .*** ***** 思路：两个for循环嵌套；外部for循环实现n行； 内部第一个for循环，先打印n-i个空格 内部第二个for循环，再继续打印2*i-1个星号 */ function zhengsanjiaoxing(n){ for(var i=1; i<=n; i++){ for(var j=1; j<=n-i; j++){ document.write('<div class="white"></div>'); } for(var k=1; k<=2*i-1; k++){ document.write('<div class="black"></div>'); } document.write('<br/>'); } } zhengsanjiaoxing(4); document.write('<br/>'); document.write('<br/>'); /*打印空心三角形 * * * * * ******* 思路：内部第二个for循环打印星号时判断序号 具体情况： 1、最后一行每个序号都打印星号 2、第一行至倒数第二行中 第一个 或 最后一个 打印星号 3、其他打印空格 */ function kongxinzhengsanjiaoxing(n){ for(var i=1; i<=n; i++){ for(var j=1; j<=n-i; j++){ document.write('<div class="white"></div>'); } for(var k=1; k<=2*i-1; k++){ if(i==n){ //判断如果是最后一行就每个序号都打星号 document.write('<div class="black"></div>'); }else if(k==1 || k==2*i-1){ //判断如果是第一个 或 最后一个序号，打印星号 document.write('<div class="black"></div>'); }else{ //其他为序号打印空格 document.write('<div class="white"></div>'); } } document.write('<br/>'); } } kongxinzhengsanjiaoxing(9); /* 打印实心菱形 思路：先打印上面 (n+1)/2 行的正三角形，再打印下面 (n+1)/2-1 行的倒过来的正三角形 */ function lingxing(n){ for(var i=1; i<=(n+1)/2; i++){ //打印上半个三角形，行数为(n+1)/2 for(var j=1; j<=(n+1)/2-i; j++){ document.write('<div class="white"></div>'); } for(var k=1; k<=2*i-1; k++){ document.write('<div class="black"></div>'); } document.write('<br/>'); } for(var l=1; l<=(n+1)/2-1; l++){ //打印下半个倒三角形，行数为(n+1)/2-1 要比上半个少一行 for(var m=1; m<=l; m++){ document.write('<div class="white"></div>'); } //再继续打印星号，每行是的星号个数是行数倒序的二倍减一，即(((n+1)/2-1+1)-l)*2-1 for(var o=1; o<=((n+1)/2-l)*2-1; o++){ document.write('<div class="black"></div>'); } document.write('<br/>'); } } lingxing(9); /* 打印空心菱形 */ function kongxinlingxing(n){ for(var i=0; i<=(n+1)/2; i++){ //打印上部分三角形 for(var j=1; j<=(n+1)/2-i; j++){ document.write('<div class="white"></div>'); } for(var k=1; k<=2*i-1; k++){ if(k==1 || k==2*i-1){ document.write('<div class="black"></div>'); //每行第一个序号 或 最后一个序号打印星号 }else{ document.write('<div class="white"></div>'); } } document.write('<br/>'); } for(var l=1; l<=(n+1)/2-1; l++){ //打印下面的三角形 for(var m=1; m<=l; m++){ document.write('<div class="white"></div>'); } for(var o=1; o<=((n+1)/2-l)*2-1; o++){ if(o==1 || o==((n+1)/2-l)*2-1){ document.write('<div class="black"></div>'); }else{ document.write('<div class="white"></div>'); } } document.write('<br/>'); } } kongxinlingxing(7); /* 打印实心圆形 */ function circle(r){ for(var i=1; i<=r; i++){ //画上半个圆 var n = Math.round(Math.sqrt(r*r-(r-i)*(r-i))); for(var j=1; j<=r-n; j++){ document.write('<div class="whitemin"></div>'); } for(var k=1; k<=2*n; k++){ document.write('<div class="blackmin"></div>'); } document.write('<br/>'); } for(var l=1; l<=r; l++){ var m =Math.round(Math.sqrt(r*r-l*l)); for(var o=1; o<=r-m; o++){ document.write('<div class="whitemin"></div>'); } for(var q=1; q<=2*m; q++){ document.write('<div class="blackmin"></div>'); } document.write('<br/>'); } } circle(66); /* 打印空心圆形 */ function kongxinCircle(r){ for(var i=1; i<=r; i++){ //画上半个圆 var w = Math.sqrt(r*r-(r-i)*(r-i)); var n = Math.round(w); var diff = w - n; if(diff >= 0.2){ n += 1; } console.log(w); console.log(n); for(var j=1; j<=r-n; j++){ document.write('<div class="whitemin"></div>'); } for(var k=1; k<=2*n; k++){ if(i==1){ document.write('<div class="blackmin"></div>'); }else if(k==1 || k==2*n){ document.write('<div class="blackmin"></div>'); }else{ document.write('<div class="whitemin"></div>'); } } document.write('<br/>'); } for(var l=1; l<=r; l++){ var m = Math.round(Math.sqrt(r*r-l*l)); for(var o=1; o<=r-m; o++){ document.write('<div class="whitemin"></div>'); } for(var q=1; q<=2*m; q++){ if(l>=r-1){ document.write('<div class="blackmin"></div>'); }else if(q==1 || q==2*m){ document.write('<div class="blackmin"></div>'); }else{ document.write('<div class="whitemin"></div>'); } } document.write('<br/>'); } } kongxinCircle(66); </script> </body> </html> |
