js实现黑白div块画空心的图形
作者:wds207207 发布时间:2023-08-29 07:24:21
标签: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>
来源:https://blog.csdn.net/wds207207/article/details/70306221
0
投稿
猜你喜欢
- 简介概念散列算法(Hash Algorithm),又称哈希算法,杂凑算法,是一种从任意文件中创造小的数字「指纹」的方法。与指纹一样,散列算法
- 本文的文字及图片来源于网络,仅供学习、交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理。以下文章来源于Pyth
- 在利用python进行flask等开发过程中经常需要配置虚拟环境以方便针对不同的项目需求配置不同的生产环境。在python3.3之前,需要利
- 如下是简单cookie操作,当前仅限前端实例,具体内容如下要注意的有两点:1、cookie内容存贮的名称2、删除cookie是通过设置过期为
- IPython是Python的交互式Shell,提供了代码自动补完,自动缩进,高亮显示,执行Shell命令等非常有用的特性。特别是它的代码补
- W3C DOM-Level-2 定义如下W3C DOM 写道During mouse events caused by the depres
- 1: 遍历并输出Table中值<table id="tb"><tr><td><
- 本文介绍Python3使用PyMySQL连接数据库,并实现简单的增删改查。什么是PyMySQL?PyMySQL是Python3.x版本中用于
- 如何显示SQL数据库所有表的名称?<%strSQLDSN = "xxxx"strSQLUser
- python开发中经常遇到报错的情况,但是warning通常并不影响程序的运行,而且有时特别讨厌,下面我们来说下如何忽略warning错误。
- 背景基于现在微服务或者服务化的思想,我们大部分的业务逻辑处理函数都是长这样的:比如grpc服务端:func (s *Service) Get
- 问题描述 项目使用的vue2.0开发,项目中需要一个富文本编辑器,楼主经过一番心理挣扎选择了vue-quill-editor。具体如何引用
- 1、从官网下载64位zip文件。2、把zip解压到一个位置,此位置为安装为安装位置3、如果有以前的mysql 如果是instal
- 简称oop复习面向对象编程,简称oop [object oriented programming] 是一种python的编程思想面向过程:按
- 说明本文根据https://github.com/liuchengxu/blockchain-tutorial的内容,用python实现的,
- 背景在校园里认证上网很麻烦需要web输入账号密码有时还会忘记web地址此时就需要一个人或者程序帮我们实现,这时我想到用python制作这个程
- 1. 程序背景之前做文件批量移动的时候不小心多加了一个pdf后缀,但问题不大,几行代码就可以搞定~2. 程序要求将以下目录中文件夹中的有问题
- 前言Python可以操作Excel的模块不止一种,我习惯使用的写入模块是xlwt(一般都是读写模块分开的)python中使用xlwt操作ex
- 和设计师打过交道的人一定也见到过少数极品,不是扎着小辫子留着小胡子,就是剃了光头抽根烟,通常说起来一套一套的人作品都很一般般,而作品一般般的
- 有时候,预先不知道函数需要接受多少个实参,好在Python允许函数从调用语句中调用语句中收集任意数量的实参。在参数前加上*号。来看一个制作披