js實(shí)現(xiàn)黑白div塊畫(huà)空心的圖形

本文實(shí)例為大家分享了js實(shí)現(xiàn)黑白div塊畫(huà)空心圖形的具體代碼，供大家參考，具體內(nèi)容如下

成都創(chuàng)新互聯(lián)公司主要從事網(wǎng)頁(yè)設(shè)計(jì)、PC網(wǎng)站建設(shè)（電腦版網(wǎng)站建設(shè)）、wap網(wǎng)站建設(shè)（手機(jī)版網(wǎng)站建設(shè)）、成都響應(yīng)式網(wǎng)站建設(shè)公司、程序開(kāi)發(fā)、網(wǎng)站優(yōu)化、微網(wǎng)站、微信小程序開(kāi)發(fā)等，憑借多年來(lái)在互聯(lián)網(wǎng)的打拼，我們?cè)诨ヂ?lián)網(wǎng)網(wǎng)站建設(shè)行業(yè)積累了豐富的網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、網(wǎng)站設(shè)計(jì)、網(wǎng)絡(luò)營(yíng)銷經(jīng)驗(yàn)，集策劃、開(kāi)發(fā)、設(shè)計(jì)、營(yíng)銷、管理等多方位專業(yè)化運(yùn)作于一體。

<!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">

 /* 打印實(shí)心矩形，思路：兩個(gè)for循環(huán)嵌套，外面for循環(huán) + 換行符實(shí)現(xiàn)打印n行；
       內(nèi)部for循環(huán)實(shí)現(xiàn)打印n個(gè)星號(hào)； */

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




 /* 打印空心矩形，
  ****
  * *
  * *
  ****
  思路：內(nèi)部for循環(huán)打印信號(hào)時(shí)加上序號(hào)判斷，
  具體情況：
   1、第一行 或 最后一行的所有序號(hào) 打印星號(hào)
   2、第二行至倒數(shù)第二行的第一個(gè)序號(hào) 或 最后一個(gè)序號(hào) 打印星號(hào)
   3、第二行至倒數(shù)第二行中間全部序號(hào) 打印空格

   '&nbsp;' 注意HTML中字符實(shí)體都是以 &開(kāi)頭 ;結(jié)尾 */

 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);

 /* 打印實(shí)心正三角形
   ..*
   .***
   *****
   思路：兩個(gè)for循環(huán)嵌套；外部for循環(huán)實(shí)現(xiàn)n行；
    內(nèi)部第一個(gè)for循環(huán)，先打印n-i個(gè)空格
    內(nèi)部第二個(gè)for循環(huán)，再繼續(xù)打印2*i-1個(gè)星號(hào)
  */
  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/>');


 /*打印空心三角形
  *
  * *
  * *
  *******
 思路：內(nèi)部第二個(gè)for循環(huán)打印星號(hào)時(shí)判斷序號(hào)
 具體情況：
   1、最后一行每個(gè)序號(hào)都打印星號(hào)
   2、第一行至倒數(shù)第二行中 第一個(gè) 或 最后一個(gè) 打印星號(hào)
   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){     //判斷如果是最后一行就每個(gè)序號(hào)都打星號(hào)
     document.write('<div class="black"></div>');
    }else if(k==1 || k==2*i-1){  //判斷如果是第一個(gè) 或 最后一個(gè)序號(hào)，打印星號(hào)
     document.write('<div class="black"></div>');
    }else{       //其他為序號(hào)打印空格
     document.write('<div class="white"></div>');
    }
   }
   document.write('<br/>');
  }
 }
 kongxinzhengsanjiaoxing(9);

 /*
  打印實(shí)心菱形
  思路：先打印上面 (n+1)/2 行的正三角形，再打印下面 (n+1)/2-1 行的倒過(guò)來(lái)的正三角形
 */
 function lingxing(n){
  for(var i=1; i<=(n+1)/2; i++){    //打印上半個(gè)三角形，行數(shù)為(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++){   //打印下半個(gè)倒三角形，行數(shù)為(n+1)/2-1 要比上半個(gè)少一行
   for(var m=1; m<=l; m++){
    document.write('<div class="white"></div>');
   }  
   //再繼續(xù)打印星號(hào)，每行是的星號(hào)個(gè)數(shù)是行數(shù)倒序的二倍減一，即(((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>'); //每行第一個(gè)序號(hào) 或 最后一個(gè)序號(hào)打印星號(hào)
    }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);

 /*
  打印實(shí)心圓形
 */
 function circle(r){
  for(var i=1; i<=r; i++){         //畫(huà)上半個(gè)圓
   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++){         //畫(huà)上半個(gè)圓
   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實(shí)現(xiàn)黑白div塊畫(huà)空心的圖形

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

本文標(biāo)題：js實(shí)現(xiàn)黑白div塊畫(huà)空心的圖形
本文地址：http://muchs.cn/article22/ghshjc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供、企業(yè)網(wǎng)站制作、微信小程序、建站公司、品牌網(wǎng)站設(shè)計(jì)、電子商務(wù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

h5響應(yīng)式網(wǎng)站建設(shè)