2. 程式人生 > >js實現黑白div塊畫空心的矩形、三角形、菱形、圓形

js實現黑白div塊畫空心的矩形、三角形、菱形、圓形

阿新 • • 發佈：2019-01-30
/* 列印實心矩形，思路：兩個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、第二行至倒數第二行中間全部序號 列印空格 '&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迴圈巢狀；外部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);

相關推薦

js實現黑白div塊畫空心的矩形、三角形、菱形、圓形

/* 列印實心矩形，思路：兩個for迴圈巢狀，外面for迴圈 + 換行符實現列印n行； 內部for迴圈實現列印n個星號； */ function juxing(n){ //列印矩形，傳入引數為行數（矩形高），

原生js實現一個DIV的碰撞反彈運動

絕對定位 doc type har tle ntb inpu wid PE 原生js實現一個DIV的碰撞反彈運動： 　　關鍵在於DIV的邊界檢測，進而改變運動方向，即可實現碰撞反彈效果。 <!DOCTYPE html> <html

js實現單個div閃爍

function changeBorder(obj){ var timer = null; var i = 0; clearInterval(timer); obj.

前端演算法：用js實現楊輝三角（帕斯卡三角形）程式設計

楊輝三角，是二項式係數在三角形中的一種幾何排列，在中國南宋數學家楊輝1261年所著的《詳解九章演算法》一書中出現。 在歐洲，帕斯卡（1623-1662）在1654年發現這一規律，所以這個表又叫做帕斯卡三角形。 帕斯卡的發現比楊輝要遲393年，比賈憲遲600年。

Vue.js實現雙向資料繫結（表單自動賦值、表單自動取值）

1、使用Vue.js實現雙向表單資料繫結，例子 <!--html程式碼--> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta

JS實現div塊的拖放，調換位置

主要是HTML5 的拖放（Drag 和 Drop） 例子（不需要對div設定ID）： <!DOCTYPE HTML> <html> <head> &l

原生js實現拖動滑塊驗證

cnblogs tcc mvt wms 網站 hnu 按鈕 itl rip 拖動滑塊驗證是現在的網站隨處可見的，各式各樣的拖動法都有。 下面實現的是某寶的拖動滑塊驗證： <!DOCTYPE html> <html lang="en"> <he

node.js利用captchapng模塊實現圖片驗證碼

parse math style ase 圖片驗證碼 all pre 驗證 parseint 安裝captchapng模塊 npm install captchapng nodejs中使用 var express = require(‘express‘); v

python+opencv選出視頻中一幀再利用鼠標回調實現圖像上畫矩形框

open cap 圖像 ide http 這樣的 vedio lease 等待 　　最近因為要實現模板匹配，需要在視頻中選中一個目標，然後框出（即作為模板），對其利用模板匹配的方法進行檢測。於是需要首先選出視頻中的一幀，但是在利用攝像頭讀視頻的過程中我唯一能想到的方法就是：

js實現緩動效果-讓div運動起來

rect() prop star this line ret rtti logs start var tween = { linear:function(t,b,c,d){ return c*t/d + b; }, eas

js實現點擊下拉框選中對應的div

ted bsp tel 範圍 selected onchange 大學 left nbsp <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&

js實現div吸頂效果

src ons posit 全局變量 mar document padding addclass type <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script

JS實現跟隨鼠標移動的div，和一串跟隨鼠標的div，鼠標移入移出實現圖片的顏色淡入淡出

nload nts timer inf ntb doc tel ctype target 1.一直跟著鼠標移動的div：原理是div的left和top值有oEvent.clientX+scrollLeft鼠標指針向對於瀏覽器頁面（或客戶區）的水平坐標+元素中滾動條的水平偏移

canvas 實現滑鼠畫出矩形

    <!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <m

js實現滑鼠移動到div背景顏色變換，移開還原

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js重溫</title> </head> <div id="sss"

個人筆記005--原生JS實現簡單的拖動滑塊驗證

早上起來後瀏覽網站時看到別人的拖動滑塊驗證，就想著做一個demo，等到有時間把這個優化到到現在的專案（用的是圖片驗證碼）。以下程式碼就是百度之後再修改一下的： <!DOCTYPE html> <html> <head> <meta charset

原生JS實現點選一個按鈕顯示一個div，再點選按鈕div隱藏，或點選除div外其它空白處div隱藏

<!DOCTYPE html> <html style="font-size: 24px"> <head> <title>js點選按鈕顯示再點選空白地方隱藏</title> <style type="text/css"&g

用 js 實現 div高度與瀏覽器高度相同

一、讀取瀏覽器高度        可以利用 window.innerHeight 獲得當前瀏覽器的高度 var height = window.innerHeight;   二、獲取 div 物件 var myDiv = docu

js實現點選div區域外來隱藏/移除div

今天學了事件流，但是除了事件委託以外感覺沒有其它應用，難以記住其中概念。恰好今天調整網站打算弄個類似於“點選登入-->彈出登入窗-->點選登入窗外移除登入窗”的功能。嘗試使用jq的blur（失去焦點），但無效（可能是自己的程式碼問題）。而今天學了事件流，參照了網上

高德地圖web js實現畫多邊形，圓。判斷一個點是否在多邊形或圓裡

<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">