js實現黑白div塊畫空心的圖形

更新時間：2018年12月13日 09:03:06 作者：wds207207

這篇文章主要介紹了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循環(huán)嵌套，外面for循環(huán) + 換行符實現打印n行；
       內部for循環(huán)實現打印n個星號； */

 function juxing(n){    //打印矩形，傳入參數為行數（矩形高），作用域預解析時會聲明傳入參數，無需         var n = a; 聲明多余的變量
  for(var i=1; i<=n; i++){
   for(var j=1; j<=n; j++){  //for循環(huán)嵌套實現，每行打印n個'*';
    document.write('<div class="black"></div>');
   }
   document.write('<br/>');  //打印換行符，實現換行,不然全部在一行
  }
 }
 juxing(4);




 /* 打印空心矩形，
  ****
  * *
  * *
  ****
  思路：內部for循環(huán)打印信號時加上序號判斷，
  具體情況：
   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循環(huán)嵌套；外部for循環(huán)實現n行；
    內部第一個for循環(huán)，先打印n-i個空格
    內部第二個for循環(huán)，再繼續(xù)打印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循環(huán)打印星號時判斷序號
 具體情況：
   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>');
   }  
   //再繼續(xù)打印星號，每行是的星號個數是行數倒序的二倍減一，即(((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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

淺談javascript中的Function和Arguments
下面小編就為大家?guī)硪黄獪\談javascript中的Function和Arguments。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-08-08
關于layui 實現點擊按鈕添加一行(方法渲染創(chuàng)建的table)
今天小編就為大家分享一篇關于layui 實現點擊按鈕添加一行(方法渲染創(chuàng)建的table)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
微信小程序常見頁面跳轉操作簡單示例
這篇文章主要介紹了微信小程序常見頁面跳轉操作,結合簡單實例形式總結分析了微信小程序保留頁面跳轉、關閉頁面跳轉、返回上一級頁面等各種常見的跳轉操作實現技巧,需要的朋友可以參考下
2019-05-05
ajax 同步請求和異步請求的差異分析
ajax 同步請求和異步請求的差異分析，需要的朋友可以參考下。
2011-07-07
觸屏中的JavaScript事件分析
這篇文章主要介紹了觸屏中的JavaScript事件,實例分析了觸屏事件的種類、原理與相關使用技巧,需要的朋友可以參考下
2015-02-02
谷歌地圖打不開的解決辦法
這篇文章主要介紹了谷歌地圖打不開的解決辦法,本文給出了一個可以正常使用的谷歌地圖調用案例,需要的朋友可以參考下
2014-08-08
JavaScript的for循環(huán)中嵌套一個點擊事件的問題解決
本文主要介紹了JavaScript的for循環(huán)中嵌套一個點擊事件點擊一次彈出多個相同的值的解決方法，具有很好的參考價值。下面跟著小編一起來看下吧
2017-03-03
用Javascript數組處理多個字符串的連接問題
小技巧用Javascript數組處理多個字符串的連接問題，大家可以參考下。
2009-08-08
javascript下有關dom以及xml節(jié)點訪問兼容問題
javascript下有關dom以及xml節(jié)點訪問兼容問題...
2007-11-11
按下Enter焦點移至下一個控件的實現js代碼
正如標題所言使用js操作按下Enter焦點移至下一個控件，具體的實現示例如下，需要的朋友可以參考下
2013-12-12