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

2024-07-28 17:58:30

本文实例为大家分享了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+html5实现canvas绘制圆形图案的方法

本文实例讲述了js+html5实现canvas绘制圆形图案的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> Your browser does not sup
javascript 绘制矩形框

如果不考虑把整个代码封装起来, 大约5分钟里也可以写出类似的效果,为了把整个代码封装成一个对象,稍微借鉴了Pro Javascript Techniques书中的代例子的风格.Pro Javascript Techniques书中推荐的drag and drop 例子:http://boring.youngpup.net/2001/domdrag Rect var Rect = { //当前正在画的矩形对象 obj: null, //画布 container: null, //初始化函数 ini
js绘制圆形和矩形的方法

本文实例讲述了js绘制圆形和矩形的方法.分享给大家供大家参考.具体如下: 这里使用js来绘制圆形和矩形,支持选择图形的背景颜色,同时可设置圆角矩形.半径.正圆.矩形.正方形这几个选项.或许这些图形你不需要,但重要的是让你学会JavaScript绘制图形的方法,这是要表达的核心. 运行效果如下图所示: 具体代码如下: <!doctype html> <html> <head> <title>js来绘制圆形和矩形</title> <style&
js实现黑白div块画空心的图形

本文实例为大家分享了js实现黑白div块画空心图形的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>starts picture</title> <link rel="stylesheet" href="main.css"
JS实现的DIV块来回滚动效果示例

本文实例讲述了JS实现的DIV块来回滚动效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="t
JS代码实现百度地图画圆删除标注

把下面这段代码复制到百度地图的demo中运行,效果就是我想设计的效果. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-sc
js实现随机div颜色位置类似满天星效果

本文实例为大家分享了js实现随机div颜色位置的具体代码,供大家参考,具体内容如下效果如下: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>MTX</title> <style> div{width: 50px;height: 50px;position: absolute;}
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】

本文实例讲述了jQuery实现通过方向键控制div块上下左右移动的方法.分享给大家供大家参考,具体如下: 在CSS中当DOM元素的position属性为absolute或relative时,我们可以通过改变这个元素的left和top属性的具体值来控制元素在页面中显现的位置. 利用上述属性,我们可以简单实现一个元素在页面中的移动效果,这里我们采用JQuery的animate方法来实现动画效果,利用keydown监听方向键按下的事件(这里采用keydown而不是keyup,是为了能够在方向键被一直按
js实现踩五彩块游戏

本文实例为大家分享了js实现踩五彩块游戏的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta htt
js实现获取div坐标的方法

本文实例讲述了js实现获取div坐标的方法.分享给大家供大家参考,具体如下: html中最常使用的控件就是div了,那么如何获取div的坐标呢? 如下方法可以实现: /*** * 获取div的坐标 * @param divObj * @returns {{width: number, height: number, left: *, top: Window}} */ com.whuang.hsj.divCoordinate=function(divObj){ if(typeof divObj =
js 动态添加元素(div、li、img等)及设置属性的方法

把一串 html 标签赋给一个 javascript 变量,除属性的值要用转义的双引号外,某些时候字符串还很长,显得有些复杂.如果用 js 动态添加元素,就不会有那么复杂的字符串出现,代码阅读性强一点,也容易理解. 网页是由 html 标签一层层组成的,js 也可以动态添加一层层的诸如 div.li.img 这样的标签.其实,不管是什么 html 标签,js 动态创建的方法都差不多,接着就先从动态添加 div 开始. 一.js 动态添加元素div <div id="parent"
JS添加删除DIV的简单实例

JS添加删除DIV的简单实例 function addDiv(w,h){ //如果原来有"divCell"这个图层,先删除这个图层 deleteDiv(); //创建一个div var my = document.createElement("divCell"); //添加到页面 document.body.appendChild(my); //通过样式指定该div的位置方式,若是想要自己设置div的位置,这句话必须有,把它注释掉你就可以知道效果拉~试试看 my.s
JS+CSS实现Div弹出窗口同时背景变暗的方法

本文实例讲述了JS+CSS实现Div弹出窗口同时背景变暗的方法.分享给大家供大家参考.具体实现方法如下: 复制代码代码如下: <html> <head> <title>JS+CSS实现的Div弹出窗口,同时背景变暗</title> <script> function locking(){ document.all.ly.style.display="block"; document.all.

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

相关推荐

随机推荐