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


Posted in Javascript onDecember 13, 2018

本文实例为大家分享了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、第二行至倒数第二行中间全部序号 打印空格

   ' ' 注意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块画空心的图形

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用JQuery 实现的自定义对话框
Mar 24 Javascript
js获取当前select 元素值的代码
Apr 19 Javascript
实现只能输入数字的input不用replace方法
Sep 12 Javascript
全面解析Bootstrap表单使用方法(表单样式)
Nov 24 Javascript
深入理解jQuery.data() 的实现方式
Nov 30 Javascript
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 jQuery
通过函数作用域和块级作用域看javascript的作用域链
Aug 05 Javascript
微信小程序云开发之模拟后台增删改查
May 16 Javascript
layui下拉列表select实现可输入查找的方法
Sep 28 Javascript
JavaScript实现拖拽效果
Mar 16 Javascript
javascript实现简单搜索功能
Mar 26 Javascript
解决vue单页面应用进入页面加载所有 js 的问题
Aug 12 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
Dec 13 #Javascript
示例vue 的keep-alive缓存功能的实现
Dec 13 #Javascript
Element UI框架中巧用树选择器的实现
Dec 12 #Javascript
vue-cli中安装方法(图文详细步骤)
Dec 12 #Javascript
新版小程序登录授权的方法
Dec 12 #Javascript
加快Vue项目的开发速度的方法
Dec 12 #Javascript
关于自定义Egg.js的请求级别日志详解
Dec 12 #Javascript
You might like
php 动态多文件上传
2009/01/18 PHP
PHP实现AES256加密算法实例
2014/09/22 PHP
PHP速成大法
2015/01/30 PHP
php微信开发之关注事件
2018/06/14 PHP
childNodes.length与children.length的区别
2009/05/14 Javascript
一些mootools的学习资源
2010/02/07 Javascript
一个页面放2段图片滚动代码出现冲突的问题如何解决
2012/12/21 Javascript
javascript中递归函数用法注意点
2015/07/30 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
2015/08/24 Javascript
jQuery实现右键菜单、遮罩等效果代码
2016/09/27 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
2016/12/02 Javascript
原生JS实现的双色球功能示例
2018/02/02 Javascript
Vue项目使用CDN优化首屏加载问题
2018/04/01 Javascript
vue项目部署上线遇到的问题及解决方法
2018/06/10 Javascript
vue cli 3.0 使用全过程解析
2018/06/14 Javascript
详解JavaScript实现动态的轮播图效果
2019/04/29 Javascript
详解将微信小程序接口Promise化并使用async函数
2019/08/05 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
2020/04/17 Javascript
js获取图片的base64编码并压缩
2020/12/05 Javascript
Vue项目打包部署到apache服务器的方法步骤
2021/02/01 Vue.js
vue 根据选择的月份动态展示日期对应的星期几
2021/02/06 Vue.js
python实现定时同步本机与北京时间的方法
2015/03/24 Python
用Python编写web API的教程
2015/04/30 Python
Python利用itchat对微信中好友数据实现简单分析的方法
2017/11/21 Python
django ManyToManyField多对多关系的实例详解
2019/08/09 Python
python实现翻译word表格小程序
2020/02/27 Python
python GUI库图形界面开发之PyQt5控件数据拖曳Drag与Drop详细使用方法与实例
2020/02/27 Python
Mio Skincare英国官网:身体紧致及孕期身体护理
2018/08/19 全球购物
《可爱的动物》教学反思
2014/02/22 职场文书
成立公司计划书
2014/05/07 职场文书
捐资助学感谢信
2015/01/21 职场文书
清洁工岗位职责
2015/02/13 职场文书
500字作文之难忘的同学
2019/12/20 职场文书
解决golang post文件时Content-Type出现的问题
2021/05/02 Golang
pytorch 6 batch_train 批训练操作
2021/05/28 Python
windows系统安装配置nginx环境
2022/06/28 Servers