js實現(xiàn)黑白div塊畫空心的圖形
更新時間：2018年12月13日 09:03:06 作者：wds207207
這篇文章主要介紹了js實現(xiàn)黑白div塊畫空心的圖形，畫出矩形、三角形、菱形、圓形，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)黑白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) + 換行符實現(xiàn)打印n行；
內部for循環(huán)實現(xiàn)打印n個星號； */
function juxing(n){ //打印矩形，傳入參數(shù)為行數(shù)（矩形高），作用域預解析時會聲明傳入參數(shù)，無需 var n = a; 聲明多余的變量
for(var i=1; i<=n; i++){
for(var j=1; j<=n; j++){ //for循環(huán)嵌套實現(xiàn)，每行打印n個'*';
document.write('<div class="black"></div>');
}
document.write('<br/>'); //打印換行符，實現(xiàn)換行,不然全部在一行
}
}
juxing(4);
/* 打印空心矩形，
****
* *
* *
****
思路：內部for循環(huán)打印信號時加上序號判斷，
具體情況：
1、第一行 或 最后一行的所有序號 打印星號
2、第二行至倒數(shù)第二行的第一個序號 或 最后一個序號 打印星號
3、第二行至倒數(shù)第二行中間全部序號 打印空格
' ' 注意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)實現(xià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、第一行至倒數(shù)第二行中 第一個 或 最后一個 打印星號
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++){ //打印上半個三角形，行數(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++){ //打印下半個倒三角形，行數(shù)為(n+1)/2-1 要比上半個少一行
for(var m=1; m<=l; m++){
document.write('<div class="white"></div>');
}
//再繼續(xù)打印星號，每行是的星號個數(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>'); //每行第一個序號 或 最后一個序號打印星號
}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控制層作圓周運動的方法,涉及javascript動態(tài)操作頁面元素的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2016-06-06
下面小編就為大家?guī)硪黄僯s的右下角彈窗實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
這篇文章主要介紹了javascript定時器完整實現(xiàn)方法,以實例形式分析了定時器的嵌套調用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了iframe里的頁面禁止右鍵事件的方法,需要的朋友可以參考下2014-06-06
簡單聊聊JavaScript中作用域與自執(zhí)行函數(shù)的使用
作用域指的是一個變量的作用范圍,自執(zhí)行函數(shù)是指定義后立即執(zhí)行的函數(shù),它可以被用來創(chuàng)建一個私有作用域,本文主要來和大家聊聊二者的具體定義與使用,感興趣的可以了解下2024-03-03
webpack 是一個現(xiàn)代 JavaScript 應用程序的模塊打包器(module bundler)。這篇文章主要介紹了Webpack框架核心概念(知識點整理),需要的朋友可以參考下2017-12-12
JS編寫函數(shù)實現(xiàn)對身份證號碼最后一位的驗證功能
二代身份證號碼為18位，怎么編寫函數(shù)實現(xiàn)對身份證號碼最后一位的驗證功能呢？今天小編通過代碼給大家分享下實現(xiàn)方法2016-12-12
這篇文章主要介紹了js實現(xiàn)自定義滾動條的示例，幫助大家制作JS特效，美化自身網頁，感興趣的朋友可以了解下2020-10-10
下面小編就為大家?guī)硪黄狫S公共小方法之判斷對象是否為domElement的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
echarts圖表無數(shù)據/空數(shù)據如何展示"暫無數(shù)據"
在開發(fā)echarts的時候我們不得不考慮數(shù)據為空的情況,其實有很多種解決辦法,下面這篇文章主要給大家介紹了關于echarts圖表無數(shù)據/空數(shù)據如何展示“暫無數(shù)據”的相關資料,需要的朋友可以參考下2022-10-10