这篇文章主要介绍了js实现黑白div块画空心的图形,画出矩形、三角形、菱形、圆形,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js实现黑白div块画空心图形的具体代码,供大家参考,具体内容如下

<!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></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></div>');
    }else if(j==1 || j==n){
     document.write('<div></div>');
    }else{
     document.write('<div></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></div>');
   }
   for(var k=1; k<=2*i-1; k++){
    document.write('<div></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></div>');
   }
   for(var k=1; k<=2*i-1; k++){
    if(i==n){     //判断如果是最后一行就每个序号都打星号
     document.write('<div></div>');
    }else if(k==1 || k==2*i-1){  //判断如果是第一个 或 最后一个序号,打印星号
     document.write('<div></div>');
    }else{       //其他为序号打印空格
     document.write('<div></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></div>');
   }
   for(var k=1; k<=2*i-1; k++){ 
    document.write('<div></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></div>');
   }  
   //再继续打印星号,每行是的星号个数是行数倒序的二倍减一,即(((n+1)/2-1+1)-l)*2-1
   for(var o=1; o<=((n+1)/2-l)*2-1; o++){
    document.write('<div></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></div>');
   }
   for(var k=1; k<=2*i-1; k++){
    if(k==1 || k==2*i-1){ 
     document.write('<div></div>'); //每行第一个序号 或 最后一个序号打印星号
    }else{
     document.write('<div></div>');
    }
   }
   document.write('<br/>');
  }

  for(var l=1; l<=(n+1)/2-1; l++){ //打印下面的三角形
   for(var m=1; m<=l; m++){
    document.write('<div></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></div>');     
    }else{
     document.write('<div></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></div>');
   }
   for(var k=1; k<=2*n; k++){
    document.write('<div></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></div>');   
   }
   for(var q=1; q<=2*m; q++){ 
    document.write('<div></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></div>');
   }
   for(var k=1; k<=2*n; k++){
    if(i==1){
     document.write('<div></div>');     
    }else if(k==1 || k==2*n){
     document.write('<div></div>');
    }else{
     document.write('<div></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></div>');   
   }
   for(var q=1; q<=2*m; q++){ 
    if(l>=r-1){
     document.write('<div></div>');     
    }else if(q==1 || q==2*m){
     document.write('<div></div>');
    }else{
     document.write('<div></div>');     
    }  
   }
   document.write('<br/>');   
  }
 }
 kongxinCircle(66);
</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持爱安网。

    无相关信息
最新资讯
大搜车姚军红:公司发展并不一帆风顺,创业者一直在凝视深渊

大搜车姚军红:公司发展

从最初的二手车辆寄售模式到转型二手车商SaaS服务平台
摩拜创始人胡玮炜仍在上海摩骑科技等公司担任法人

摩拜创始人胡玮炜仍在

天眼查App显示,目前,胡玮炜在贵安新区摩拜出行科技有限
百度为何收购YY直播?一个缺快钱,一个缺大钱

百度为何收购YY直播?一

百度需要可以快速变现的新业务;欢聚时代则需要更大量级
李健熙继承人面临100亿美元遗产税 或效仿LG用现金支付

李健熙继承人面临100

据报道,三星电子董事长李健熙(Lee Kun-hee)的继承人可能
极兔动了谁的蛋糕?遭快递巨头封杀背后或因拼多多剑指阿里

极兔动了谁的蛋糕?遭快

从国内快递巨头的一致反应来看,这场封杀事件搅动的不仅
产业链人士:台积电第六代CoWoS封装技术有望2023年投产

产业链人士:台积电第

据国外媒体报道,台积电是目前在芯片制程工艺方面走在行
最新文章
详解Vue的ref特性的使用

详解Vue的ref特性的使

这篇文章主要介绍了详解Vue的ref特性的使用,文中通过
vue学习笔记之slot插槽基本用法实例分析

vue学习笔记之slot插

这篇文章主要介绍了vue学习笔记之slot插槽基本用法,结
vue跳转方式(打开新页面)及传参操作示例

vue跳转方式(打开新页

这篇文章主要介绍了vue跳转方式(打开新页面)及传参操作,
vue学习笔记之过滤器的基本使用方法实例分析

vue学习笔记之过滤器

这篇文章主要介绍了vue学习笔记之过滤器的基本使用方
js获取本日、本周、本月的时间代码

js获取本日、本周、本

本篇文章给大家分享的内容是利用js如何获取本日、本周
node crawler如何添加promise支持

node crawler如何添加

这篇文章主要介绍了node crawler如何添加promise支持,