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循环嵌套，外面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控制层作圆周运动的方法,涉及javascript动态操作页面元素的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2016-06-06
下面小编就为大家带来一篇纯js的右下角弹窗实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-03-03
这篇文章主要介绍了javascript定时器完整实现方法,以实例形式分析了定时器的嵌套调用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-02-02
这篇文章主要介绍了iframe里的页面禁止右键事件的方法,需要的朋友可以参考下2014-06-06
作用域指的是一个变量的作用范围,自执行函数是指定义后立即执行的函数,它可以被用来创建一个私有作用域,本文主要来和大家聊聊二者的具体定义与使用,感兴趣的可以了解下2024-03-03
webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)。这篇文章主要介绍了Webpack框架核心概念(知识点整理),需要的朋友可以参考下2017-12-12
二代身份证号码为18位，怎么编写函数实现对身份证号码最后一位的验证功能呢？今天小编通过代码给大家分享下实现方法2016-12-12
这篇文章主要介绍了js实现自定义滚动条的示例，帮助大家制作JS特效，美化自身网页，感兴趣的朋友可以了解下2020-10-10
下面小编就为大家带来一篇JS公共小方法之判断对象是否为domElement的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
在开发echarts的时候我们不得不考虑数据为空的情况,其实有很多种解决办法,下面这篇文章主要给大家介绍了关于echarts图表无数据/空数据如何展示“暂无数据”的相关资料,需要的朋友可以参考下2022-10-10
最新评论