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 相关文章推荐
Open and Print a Word Document
Jun 15 Javascript
javascript 支持链式调用的异步调用框架Async.Operation
Aug 04 Javascript
prototype与jquery下Ajax实现的差别
Sep 13 Javascript
经典海量jQuery插件 大家可以收藏一下
Feb 07 Javascript
XMLHTTPRequest的属性和方法简介
Nov 23 Javascript
qTip2 精致的基于jQuery提示信息插件
Feb 17 Javascript
JS中的数组方法笔记整理
Jul 26 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
Jun 17 Javascript
node.js中 mysql 增删改查操作及async,await处理实例分析
Feb 11 Javascript
vue+ESLint 配置保存 自动格式化代码
Mar 17 Javascript
小程序实现tab标签页
Nov 16 Javascript
用JS写一个发布订阅模式
Nov 07 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计算当前程序执行时间示例
2014/04/24 PHP
浅谈Eclipse PDT调试PHP程序
2014/06/09 PHP
PHP下载远程图片并保存到本地方法总结
2016/01/22 PHP
php设计模式之单例模式代码
2016/06/11 PHP
Yii框架实现邮箱激活的方法【数字签名】
2016/10/18 PHP
javaScript对象和属性的创建方法
2007/01/15 Javascript
比较简单实用的使用正则三种版本的js去空格处理方法
2007/11/18 Javascript
菜鸟javascript基础资料整理2
2010/12/06 Javascript
js性能优化 如何更快速加载你的JavaScript页面
2012/03/17 Javascript
jquery 隐藏与显示tr标签示例代码
2014/06/06 Javascript
使用node.js半年来总结的 10 条经验
2014/08/18 Javascript
利用JavaScript的AngularJS库制作电子名片的方法
2015/06/18 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
2015/08/24 Javascript
Nodejs爬虫进阶教程之异步并发控制
2016/02/15 NodeJs
JS实现n秒后自动跳转的两种方法
2020/11/30 Javascript
Mac下使用charles遇到的问题以及解决办法
2017/01/10 Javascript
jquery pagination分页插件使用详解(后台struts2)
2017/01/22 Javascript
如何在vue中使用ts的示例代码
2018/02/28 Javascript
Vue 项目中遇到的跨域问题及解决方法(后台php)
2018/03/28 Javascript
Vue-router 切换组件页面时进入进出动画方法
2018/09/01 Javascript
vue router的基本使用和配置教程
2018/11/05 Javascript
Vue 打包体积优化方案小结
2020/05/20 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
2020/07/27 Javascript
js实现磁性吸附的示例
2020/10/26 Javascript
python中xrange和range的区别
2014/05/13 Python
Python 使用 PyMysql、DBUtils 创建连接池提升性能
2019/08/14 Python
python和node.js生成当前时间戳的示例
2020/09/29 Python
6种非常炫酷的CSS3按钮边框动画特效
2016/03/16 HTML / CSS
德国家具、照明、家居用品网上商店:Wayfair.de
2020/02/13 全球购物
资产评估专业学生的自我鉴定
2013/11/14 职场文书
节能减排倡议书
2014/04/15 职场文书
2019最新校园运动会广播稿!
2019/06/28 职场文书
小学三年级作文之写景
2019/11/05 职场文书
vue.js Router中嵌套路由的实用示例
2021/06/27 Vue.js
Go语言基础map用法及示例详解
2021/11/17 Golang
CSS SandBox应用场景及常见问题
2022/06/25 HTML / CSS