热爱WebGIS的博客

原创 js计算器实现

给每个按钮添加点击事件，使用。

原创 js的qq换肤效果

/ //使用this(this:谁调用我,我代表谁.this就代表点击的那个图片)// //设置body的背景为点击的图片。使用 forEach 进行循环，可以省略 i。// //添加点击事件。使用 for 进行循环。

原创 js猜拳游戏

将点击事件进行动态绑定。将点击事件进行行内绑定。

原创 js手持小风扇

【代码】js手持小风扇。

原创 JS的DOM事件

js 对象：本质是一个对象(类的实例)，不能在网络上传输(后台经常将对象转成 js 字符串，通过网络发给前台)。json 字符串：本质上是一个字符串，可以用于网络传输(从后台接收到的数据大部分都是 json)。是 JavaScript 内置的专门用于 DOM 的对象，该对象包含了若干的属性和方法，**match()**方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。使用字符串的 match 方法判断图片的 src 属性值，进行切换。方法来判断图片的 src 属性值，进行切换。

原创 js计算出生天数

使用一元运算符+转成毫秒值，再相减。转成毫秒值，再相减。

原创 js分发扑克牌

底牌最后三张扑克牌。

原创 js的Number对象和全局对象

把数字转换为字符串，结果的小数点后有指定位数的数字。对象，在 nodejs 中代表 global 对象。使用 Function 构造函数创建一个无参的函数。使用 Function 构造函数创建一个带参的函数。它的属性和方法都不需要加上对象名(window)。页面中最大对象(顶级对象)，在浏览器的环境中代表。Number 对象是原始数值的包装对象。检测指定参数是否为整数。指示某个值是不是数字值。函数本质是对象类型，由。

原创 js的String对象

正则表达式用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具。用于处理文本（字符串）的对象。这个插件，用来生成正则表达式。写一个方法校验 qq 号。

原创 js的Date对象

使用带参构造(传数字类型的参数)，创建出来的就是指定的时间对象(月份是从 0 开始计算的)。使用带参构造(传字符串类型的参数)，创建出来的也是指定的时间对象。使用无参构造，创建出来的就是当前的时间对象。只想或当前的时间对象，使用方式一即可。想要获取指定时间对象，使用方式三即可。Date 对象用于处理日期与时间。

原创 js的对象

对具有相同属性和行为的事物的统称。这里创建一个最简单的类(只有类名，没有属性和方法)。

原创 js的数组

定义数组，数据中可以存放真正的数据，如小白、小黑、小胖等这些都是数组中的数据，我们这些数据称为数组单元，数组单元之间使用英文逗号分隔。获取用户的输入的数据，求这个数据在数组中第一次出现的索引，如果不存在,得到的结果为-1。属性，它的含义是获取数组的长度，数组属于对象类型。向数组的末尾添加一个或更多元素，并返回新的长度。向数组的开头添加一个或更多元素，并返回新的长度。数组的数组，二维数组里面的元素都是一维数组。连接两个数组 (不改变原数组的内容)。从尾巴删除一个元素并返回删除的元素。从数组中添加或删除元素。

原创 js选择语句

case 穿透会从满足条件的那个语句开始，依次执行，即使后面的 case 不满足条件，也会执行，直到出现 break 才会跳出 switch 语句。输入一个月份，判断月份属于哪个季节: 12，1，2 冬季 3，4，5 春季 6，7，8 夏季 9，10，11 秋季。从上往下，依次判断每一个条件，如果满足，就会执行对应的语句体，剩下的即使满足也不会执行。中的条件，符合条件，就执行下面的代码块，每个代码块用。如果你的工作年限小于 1 年，你的年假是 5 天。，就执行大括号的代码块，如果为。

原创 js流程控制

流程控制就是来控制代码按照一定结构顺序来执行。是最简单的，从上往下，依次执行的。

原创 js运算符

如果左边表达式不成立(已经确定了整个表达式是 false)，右边就没有必要执行，就发生了短路，可以提高效率。如果左边表达式成立(已经确定了整个表达式是 true)，右边就没有必要执行，就发生了短路，可以提高效率。与：&&当且仅当两边都为 true 才返回 true，同真为真，一假为假。或：||一边为 true,返回 true，一真为真，同假为假。js 小数在某些情况下，显示的是一个无限接近的数。弹框录入一个 3 位数，求每一位上的数相加的和。取反，真变假，假变真。++在后，先运算再自增。

原创 js概念及入门

但在操作页面上的元素和操作浏览器方面各有各自独特的方法，因而 BOM 和 DOM 的实现各个厂商是不一样的。JavaScript,JScript 等脚本语言都是基于 ECMAScript 标准实现的，因此在。JavaScript 由 ECMAScript，DOM 和 BOM 三者组成的。一般将 JavaScript 代码写在独立的以 .js 结尾的文件中，然后通过。一种运行在客户端的脚本语言(也可以运行在服务端,比如 nodejs)。输入任意内容会以弹窗形式出现在浏览器中，一般提示用户输入一些内容。

原创 HTML入门总结

原创 CSS时钟案例

* 向左上移动自身的50% *//* 沿底部旋转 *//* 沿底部旋转 *//* 沿底部旋转 *//* 中间黑点 *//* 添加动画 *//* 定义动画 */

原创 个人简历项目准备

完整列表请参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media。完整列表请参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media。离它最近的一个拥有“滚动机制”的祖先元素，即便这个祖先不是最近的真实可滚动祖先。相对长度，相对于根元素 html 里面的字体尺寸，不会继承父级的尺寸大小。相对长度，默认相对于浏览器的默认字体尺寸，会继承父级元素的字体大小。从上往下，从左往右，从外向里。

原创 grid布局

网格间距（Column Gap）指的是两个网格单元之间的网格横向间距或网格纵向间距。网格是一组相交的水平线和垂直线，它定义了网格的列和行。网格引入了 fr 单位来帮助我们创建灵活的网格轨道。一个 fr 单位代表网格容器中可用空间的一等份。网格元素的垂直线方向称为列（Column）。网格元素的水平线方向称为行（Row）。通常我们用 gap 表示元素的间隙。/* fr代表可用空间的1等分 */列与列，行与行之间的交接处。/* 开启grid布局 *//* 设置行和列的间隙 */

原创 flex布局

文章目录1. 概念2. 和浮动的区别3. 伸缩容器和伸缩项目3.1. 伸缩容器3.2. 伸缩项目4. 主轴与侧轴5. 主轴属性6. 纵轴属性6.1. align-self 示例7. flex 实现水平垂直居中7.1. 方法一7.2. 方法二8. 伸缩性8.1. flex-basis8.2. flex-shrink8.3. flex-grow（伸）8.4. flex 复合属性9. 布局技巧10. gap 属性11. 小米模块实现11.1. 演示效果11.2. 分析思路11.3. 代码实现11.4. 补充11.

原创 CSS其他属性

注意：这里给图片宽度 100px，是因为图片过大，适当地缩小图片，没有影响的，因为父元素没有设置宽高，内容是由子元素撑开的。用于指定同一行元素之间，或表格单元格内文字的垂直对齐方式。图片和文字在一行显示的时候，图片底部和文字的底部并没有对齐。如果父元素只有图片，没有文字的话，可以给父元素设置。，除了 baseline 外，其他值都可以解决。如果单单解决空白问题，而不是文字对齐底端，如果父元素只有一张图片，可以给图片加。之后，文字居中了但是图片没有居中。，把子元素放置在父元素的中部。，文字就能对齐底端了。

原创 CSS字体图标

也有样式，如下，如果使用元素选择器修改字体图标的字体大小，会修改不了，因为样式类选择器优先级比元素选择器优先级高。本质就是一个字体，可以灵活修改它的样式，降低服务器请求的次数，同时相比图片更加清晰。在修改字体图标的时候，不要用元素选择器进行修改，建议用对应的。属于在线字体库，不需要下载字体包，直接在线引入。下载的文件也有使用方法，可以按照教程来。引入字体包中的 css 样式。将下载好的字体包拖到项目中。挑选类名来展示图标。

原创 CSS定位

也是一种布局方式，可以让子元素自由摆放在页面中的任意位置(叠加效果)。/* 对cover，通过伪元素模拟生成,子绝父相来实现 *//* 使用transform向上移动自身100% */相对于浏览器进行的定位，让盒子固定在屏幕的某一个位置。定位(定位的优先级是最高的，可以叠加在其他元素之上)，不会脱离文档流，这样对页面的布局的影响是最小的。子元素设置绝对定位，父元素设置相对定位。可以让子元素相对于父元素进行自由移动。相对于最近有定位的祖先元素进行移动。/* 对c2进行相对定位 *//* 可写可不写 */

原创 CSS盒子模型

！！（content）、（padding）、（border）、（margin））四个属性。

原创 CSS浮动

文章目录文档流浮动简介浮动元素特点浮动属性浮动小练习练习 1练习 2练习 3练习 4导航条案例改进改进前浮动改进后浮动练习个人简历页面布局方式一方式二清除浮动影响解决方式文档流也叫标准流，行内元素可以水平排布，块级元素一般垂直排布。浮动简介在最初，浮动是用来实现文字环绕图片效果的，也就是图文混排，现在浮动是主流的页面布局方式之一。浮动元素特点脱离文档流(浏览器的标准流)，在文档流中不占位置，相当于飘起来。不管浮动前是什么元素，浮动后的默认宽与高都是被内容撑开（尽可能小），而且可以设置宽高。

原创 AntV L7深圳智慧城市

本案例使用库和构建深圳智慧城市。

原创 AntV L7构建中地大楼

本案例使用库和构建中地大楼。

原创 CSS其他属性

注意：这里给图片宽度 100px，是因为图片过大，适当地缩小图片，没有影响的，因为父元素没有设置宽高，内容是由子元素撑开的。用于指定同一行元素之间，或表格单元格内文字的垂直对齐方式。图片和文字在一行显示的时候，图片底部和文字的底部并没有对齐。如果父元素只有图片，没有文字的话，可以给父元素设置。，除了 baseline 外，其他值都可以解决。如果单单解决空白问题，而不是文字对齐底端，如果父元素只有一张图片，可以给图片加。之后，文字居中了但是图片没有居中。，把子元素放置在父元素的中部。，文字就能对齐底端了。

原创 emment语法

本质使用的就是元素选择器，例如div p a标签等等。

原创 CSS扩展选择器

选中多个选择器对应的元素。一般用来设置表格的边框。语法：选择器1, 选择器2, 选择器3, … 选择器n {}

原创 AntV L7的填充图

本案例使用L7库和Mapbox GL JS绘制填充图。2. 引入组件我们导入的库和组件有：3. 创建场景在这里，我们创建基于高德地图的地图场景。4. 绘制填充图使用 fetch 函数从服务器获取数据：4.2. 定义颜色数组4.3. 创建多边形图层4.4. 创建线图层4.5. 添加图层将图层添加到场景中：4.6. 绘制填充图代码5. 演示效果

原创 CSS基本选择器

基本选择器特点通配选择器选择所有的元素元素选择器选中同种标签的元素类选择器根据元素的类进行选择id选择器根据元素的id进行选择。

原创 CSS概念及入门

CSS 的全称为：层叠样式表 ( Cascading Style Sheets )。CSS 也是一种标记语言，用于给 HTML 结构设置样式，例如：文字大小、颜色、元素宽高等等。主流的布局方式:div+css。

原创 HTML表格标签

表格单元格间距，HTML5 不支持了。取值为 1，有边框。

原创 HTML表单相关标签

文章目录1. 基本结构1.1. form 表单1.2. input 输入框1.3. button 标签2. 常用表单控件2.1. 文本输入框2.2. 密码输入框2.3. 单选框2.4. 复选框2.5. 文本域2.6. 下拉框2.7. 提交按钮2.8. 通用属性3. label 标签4. 练习5. 练习改进1. 基本结构主要有三个：form 表单、input 输入框、button 按钮。1.1. form 表单action：用于提交表单的地址。target：和 a 标签的一样，_self ：

原创 HTML超链接标签

浏览器特性：如果能够识别访问资源的格式，就自动打开，如果不能就会自动下载。站内链接：跳转到本网站的另外一个页面或者资源。链接前面一定要加协议，不加协议跳转不了！在顶部用 div 定义一个锚点(定位点)点击跳转到压缩包后，会自动下载压缩包。站外链接：跳转到其他网站或者应用。锚链接：跳转到当前页面的其他部分。第二步：快速生成两个章节的内容。模拟小米 logo 点击效果。主要作用：实现页面的跳转。第一步：生成两个目录。

原创 HTML图片和多媒体标签

属性是一个布尔属性。如果属性存在，它指定视频控件的显示方式。标签是用来加载图片的，比如我们加载一张喜羊羊的照片。标签用来定义视频，它是双标签，属性和音频一样。标签用来定义音频，它是双标签。的位置为参考点，去建立路径。要实现自动播放,需要加上。为参考点，去建立路径。音频预加载，如果使用。

原创 HTML布局标签

没有任何样式,，主要用于划分不同的区域，便于页面布局。

原创 HTML列表标签

HTML列表标签