JavaScript
搜索
分类

js实现黑白div块画空心的图形

作者：wds207207 时间：2023-08-29 07:24:21　

本文实例为大家分享了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 class="black"></div>');
  }
  document.write('<br/>');  //打印换行符，实现换行,不然全部在一行
 }
}
juxing(4);

/* 打印空心矩形，
 ****
 * *
 * *
 ****
 思路：内部for循环打印信号时加上序号判断，
 具体情况：
  1、第一行 或 最后一行的所有序号 打印星号
  2、第二行至倒数第二行的第一个序号 或 最后一个序号 打印星号
  3、第二行至倒数第二行中间全部序号 打印空格

'&nbsp;' 注意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>

js实现黑白div块画空心的图形

来源：https://blog.csdn.net/wds207207/article/details/70306221

标签：js,div,图形
0
投稿

猜你喜欢

  • 详解python __init__.py 和 __all__作用

    2023-08-22 06:55:22

  • 帮你六步改善SQL Server安全规划全攻略

    2009-01-20 15:07:00

  • jQuery的ajax下载blob文件

    2024-04-19 10:18:47

  • 一篇文章带你自学python Django

    2023-11-13 20:33:13

  • Vue组件的继承用法示例详解

    2024-05-29 22:44:22

  • 通过索引优化含ORDER BY的MySQL语句

    2010-03-13 12:20:00

  • MySQL特定表全量、增量数据同步到消息队列-解决方案

    2024-01-24 04:36:47

  • Python操作列表常用方法实例小结【创建、遍历、统计、切片等】

    2021-07-26 12:56:49

  • Python中ROC曲线绘制

    2023-05-28 16:38:15

  • MySQL Enterprise备份的恢复解决方案

    2011-12-14 18:36:25

  • Windows10下Tensorflow2.0 安装及环境配置教程(图文)

    2022-03-31 04:02:28

  • Python3自定义http/https请求拦截mitmproxy脚本实例

    2021-04-13 15:33:01

  • 使用python怎样产生10个不同的随机数

    2021-08-12 13:07:18

  • MySQL 启动成功但未监听端口的解决方法

    2024-01-29 00:01:55

  • 详解MySQL性能优化（一）

    2024-01-18 11:39:52

  • Python实现抖音热搜定时爬取功能

    2022-01-03 03:48:29

  • Facebook基础的信息架构图

    2008-04-01 09:46:00

  • 解决Win7 x64安装解压版mysql 5.7.18 winx64出现服务无法启动问题

    2024-01-22 07:57:39

  • JavaScript的陷阱

    2008-10-28 19:52:00

  • Python实现Telnet自动连接检测密码的示例

    2021-10-05 11:08:37
    • asp之家 网络编程 m.aspxhome.com