var Cen = 6;//定义菱形中部为第几行(起始值为0)

         //for循环输出菱形
document.write("<button onclick='xh()'>点我for循环</button>");//在HTML里输出一个按钮,点击后执行输出菱形的操作
document.write("<p id='xunhuan'></p>");//在HTML里输出一个段落p来容纳菱形
function xh() {
var kong = "";
var x = 0;//控制margin的数值增加减少的值
for (i = 0 ; i <= Cen * 2 ; i++) {
if (i == 0 || i == Cen * 2) {
kong += "<p style='margin-left:" + (Cen * 20 + 5) + "px'>8</p>";
};
if (i != 0 && i <= Cen) {
x += 20
kong += "<p style='margin-left:" + (Cen * 20 - x) + "px'> <span style='margin-right:" + (2 * x) + "px'>8</span> <span>8</span> </p>";
};
console.log(x);
if (i != Cen * 2 && i > Cen) {
x -= 20
kong += "<p style='margin-left:" + (Cen * 20 - x) + "px'> <span style='margin-right:" + (2 * x) + "px'>8</span> <span>8</span> </p>";
};
};
document.getElementById("xunhuan").innerHTML = kong; }; //while循环输出菱形
document.write("<button onclick='xh2()'>点我while循环</button>");
document.write("<p id='xunhuan2'></p>");
function xh2() {
var kong = "";
var i = 0, x = 0;
while (i <= Cen * 2) {
if (i == 0 || i == Cen * 2) {
kong += "<p style='margin-left:" +( Cen * 20 + 5) + "px'>8</p>";
};
if (i != 0 && i <= Cen) {
x += 20;
kong += "<p style='margin-left:" + (Cen * 20 - x) + "px'> <span style='margin-right:" + (2 * x) + "px'>8</span> <span>8</span> </p>";
};
if (i != Cen * 2 && i > Cen) {
x -= 20;
kong += "<p style='margin-left:" + (Cen * 20 - x) + "px'> <span style='margin-right:" + (2 * x) + "px'>8</span> <span>8</span> </p>";
};
i++
};
document.getElementById("xunhuan2").innerHTML = kong; };

逻辑分析:

1、我们用html建立一个中部处于第三行时的小的菱形,来分析它的构成和规律

2. (1)输出段落,菱形中部=3,段落p=5,因此我们首先用for||while循环输出5个段落;

(2)第一个p和最后一个p为菱形的顶点,仅需要在<p>里输入一个8即可,因此首先我们做一个判断,让其先输入两个顶点;

(3)中部为菱形的两条边,其中菱形为对称图图形,因此我们发现其和分为两个部分需递增和递减其margin-left和两条边相隔的margin-right就可以实现了,因此我们做了两个判断;

(4)最后我们来发现这个菱形的中部其实就是他对称分隔的两个判断的值,而最后一个顶点就是他输出的总的段落值,因此我们来根据这个中部值去定义每一个判断值

(5)最后我们来分析他的margin-left和两条边相隔的margin-right的规律,发现除了一头一尾一样,上面和下面出现规律递增递减,因此我们这里定义一个x=0
,通过其递增递减来实现菱形边距离的变化。

综上所述,步骤就几个:
html里输入一个菱形,分析他的结构,找出规律
判断两个顶点的位置和
判断中部和中部以上的边的位置
判断中部以上的边的位置
最后根据这个死的菱形去分析如何变成中部可以活动的菱形,分析其中不值与其的关联

JavaScript学习笔记-循环输出菱形,并可菱形自定义大小的更多相关文章

  1. Java程序猿JavaScript学习笔记(2——复制和继承财产)

    计划和完成在这个例子中,音符的以下序列: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaSc ...

  2. Java程序猿的JavaScript学习笔记(3——this/call/apply)

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  3. Java程序猿JavaScript学习笔记(4——关闭/getter/setter)

    计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...

  4. JavaScript学习笔记之数组(二)

    JavaScript学习笔记之数组(二) 1.['1','2','3'].map(parseInt) 输出什么,为什么? ['1','2','3'].map(parseInt)//[1,NaN,NaN ...

  5. JavaScript学习笔记[0]

    JavaScript学习笔记[0] 使用的是廖雪峰JavaScript教程. 数据类型 Number 表示数字,不区分浮点整形. === 比较时不转化数据类型. == 反之. NaN与任何值都不想等, ...

  6. JavaScript:学习笔记(9)——Promise对象

    JavaScript:学习笔记(9)——Promise对象 引入Promise Primose是异步编程的一种解决方案,比传统的解决方案回调函数和事件更加合理和强大.如下面为基于回调函数的Ajax操作 ...

  7. JavaScript:学习笔记(7)——VAR、LET、CONST三种变量声明的区别

    JavaScript:学习笔记(7)——VAR.LET.CONST三种变量声明的区别 ES2015(ES6)带来了许多闪亮的新功能,自2017年以来,许多JavaScript开发人员已经熟悉并开始使用 ...

  8. JavaScript:学习笔记(5)——箭头函数=>以及实践

    JavaScript:学习笔记(5)——箭头函数=>以及实践 ES6标准新增了一种新的函数:Arrow Function(箭头函数).本文参考的链接如下: MDN箭头函数:https://dev ...

  9. Java程序猿的JavaScript学习笔记(12——jQuery-扩展选择器)

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

随机推荐

  1. Autofac全面解析系列(版本:3.5) – [使用篇(推荐篇):1.类型注册]

    前言 Autofac Autofac是一套高效的依赖注入框架. Autofac官方网站:http://autofac.org/ Autofac在Github上的开源项目:https://github. ...

  2. strlen和sizeof的区别

    1.sizeof操作符的结果类型是size_t,它在头文件中typedef为unsigned int类型.该类型保证能容纳实现所建立的最大对象的字节大小.   2.sizeof是算符,strlen是函 ...

  3. lsattr, chattr

    lsattr $lsattr #查看文件的隐藏属性 $lsattr -------------e- ./bookmarks-2016-10-11.json -------------e- ./rxvt ...

  4. su认证失败&文件夹里打开终端的方法&atom安装

    很久没用笔记本上的ubuntu,用不顺手,比在公司调教了半年多的电脑差远了.一步一步来.先解决最不顺手的三件事 1.su认证失败. 新安装的ubuntu系统是无法切换到root账户的,得做一番修改 s ...

  5. 描述Linux shell中单引号,双引号及不加引号的简单区别(计时2分钟)

    简要总结: 单引号: 可以说是所见即所得:即将单引号内的内容原样输出,或者描述为单引号里面看到的是什么就会输出什么. 双引号: 把双引号内的内容输出出来:如果内容中有命令.变量等,会先把变量.命令解析 ...

  6. Python 标准异常

      异常名称 描述 BaseException 所有异常的基类 SystemExit 解释器请求退出 KeyboardInterrupt 用户中断执行(通常是输入^C) Exception 常规错误的 ...

  7. ResultSet rs = stmt.executeQuery(sql); 返回值问题判断

      JAVA  ResultSet rs = stmt.executeQuery(sql);  //查询返回的结果集不管是否查到,rs都不是null,那么问题是怎么判断查找不到来执行一个提示“账号或者 ...

  8. sql查询一天内的where写法,sql写法

    sql查询一天内的写法: 1. where createtime BETWEEN (select date_format(now(),'%Y-%m-%d 00:00:00')) and (select ...

  9. [转]ASP.NET MVC IOC 之AutoFac攻略

    本文转自:http://www.cnblogs.com/WeiGe/p/3871451.html 一.为什么使用AutoFac? 之前介绍了Unity和Ninject两个IOC容器,但是发现园子里用A ...

  10. 第15章 设备无关位图_15.3 DIB和DDB的结合

    第15章 设备相关位图_15.3 DIB和DDB的结合 15.3.1 从DIB创建DDB (1)hBitmap =CreateDIBitmap(…)——注意这名称会误导,实际上创建的是DDB 参数 说 ...