JavaWeb-01-JavaScript

今天药忘吃喽~ 2023-10-06 11:00 9阅读 0赞

**Table of Contents**

1:JavaScript基础

1.1：JavaSctipt语言特点

1.2：Java和JavaScript的区别

1.3：语言基础

1.3.1：编写 JavaScript 程序

1.3.2:基本数据类型

1.3.3：变量

1.3.4：变量的作用域

1.3.5：运算符

1.3.6：表达式

1.4：控制结构

1.4.1：if语句

1.4.2：switch语句

1.4.3：for语句

1.4.5：while语句

1.5：函数

1.5.1：函数定义

1.5.2：调用函数

1.5.3：函数参数

1.6：系统函数

1.6.1：eval( 字符串表达式)

1.6.2：escape 和 和 unescape

1.6.3:parseFloat( 字符串)

1.6.4:parseInt 返回int数据

1.6.5:isNaN(x)

1.6.6:isFinite(number)

1.7:事件驱动和事件处理

1.7.1：事件

1.7.2：事件与函数关联

2：JavaScript内置对象

2.1： 数组对象类型 Array

2.1.1：创建数组的方法

2.1.2：数组的属性

2.1.3：数组的方法

2.2:字符串

2.2.1：字符串长度属性

2.2.2：字符串方法

2.2.3：正则使用

2.3：数学类Math

2.3.1:Math 对象的常量

2.3.2:Math对象的方法

2.4：日期时间类

2.4.1：创建日期对象的几种办法

2.4.2：日期对象的方法

3：窗口window对象

3.1:window属性

3.2:window对象的方法

3.3:常用方法

3.3.1：打开和关闭窗口

3.3.2：模态窗口 showModalDialog

3.3.3:对话框

4:文档 document

4.1:document对象概述

4.2:document 对象事件

5：History 对象

5.1 history 对象属性 对象属性

5.2:history对象方法

--------------------

# 1:JavaScript基础 #

## 1.1：JavaSctipt语言特点 ##

脚本编写  
JavaScript 是一种脚本语言，它采用小程序段的方式实现编程。它作为一种解释性语言，不需要进行编译，而是在程序运行过程中逐行地被解释。

基于对象  
JavaScript 是一种基于对象的语言，这意味着它能运用自己已经创建的对象。因此，许多功能可能来自于 JavaScript 运行环境（即浏览器本身）中对象的方法与 JavaScript 的对象相互作用。

简单性  
JavaScript 的简单性首先主要体现在它基于 Java 的基本语句和控制流，是一种简单而紧凑的语言，对于学习 Java 是一种非常好的过度；其次，它的变量类型是采用“弱类型”，并未使用严格的数据类型。

安全性  
JavaScript 是一种安全性语言，它不允许访问本地的硬盘，而且不能将数据存入到服务器上；不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互，从而有效地防止数据的丢失。

动态性  
JavaScript是动态的，它可以直接对用户或客户输入做出响应而无需经过Web服务程序。它对用户的响应是采用以事件驱动的方式进行的。所谓事件驱动，就是指在页面中执行某种操作所产生的动作，比如按下鼠标、移动窗口或选择菜单等都可以视为事件，当事件发生后就会引起相应的事件响应。

跨平台性  
JavaScript 仅依赖于浏览器本身，与操作系统无关，只要是能运行浏览器的计算机，并支持 JavaScript 的浏览器就可以正确执行。从而实现“编写一下，走遍天下” 的梦想。

## 1.2：Java和JavaScript的区别 ##

1 、基于对象和面向对象  
Java 是一种真正的面向对象的语言，即使是开发简单的程序，必须设计对象。JavaScript 是种脚本语言，它可以用来制作与网络无关的，与用户交互作用的复杂软件。它是一种基于对象（Object Based）和事件驱动（Event Driver）的编程语言。

2 、解释和编译  
两种语言在其浏览器中所执行的方式不一样。Java 的源代码在传递到客户端执行之前，必须经过编译，因而客户端上必须具有相应平台 上的仿真器或解释器，它可以通过编译器或解释器实现独立于某个特定的平台编译代码的束缚。JavaScript 是一种解释性编程语言，其源代码在发往客户端执行之前不需经过编译，而是将文本格式的字符代码发送给客户编由浏览器 解释执行。

3 、强变量和弱变量  
两种语言所采取的变量是不一样的。Java 采用强类型变量检查，即所有变量在编译之前必须作声明。JavaScript 中变量声明，采用其弱类型。即变量在使用前不需作声明，而是解释器在运行时检查其数据类型，

## 1.3：语言基础 ##

### 1.3.1：编写 JavaScript 程序 ###

1 、JavaScript 直接嵌入 HTML 文件中，写在 head 或 body 标记对之间，要加标记如下：

2 、JavaScript 程序存放在单独的.js 文件中，再在 HTML

### 1.3.2:基本数据类型 ###

在 JavaScript 中有五种基本的数据类型：

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>数值类型(整数和实数)</td> 
   <td>number</td> 
  </tr> 
  <tr> 
   <td>字符串（用 " "或者 ' ' 括起来）</td> 
   <td>String</td> 
  </tr> 
  <tr> 
   <td>布尔型（true和false）</td> 
   <td>Boolean</td> 
  </tr> 
  <tr> 
   <td>空值（null）</td> 
   <td>Null</td> 
  </tr> 
  <tr> 
   <td>Undefined (表示这个变量没有值，类似空指针)</td> 
   <td>undefined</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

可以通过 typeof 运算符返回变量的数据类型。

### 1.3.3：变量 ###

在程序执行过程中值可变的量，是系统内存中的一个命名的存储单元。变量的命名：变量名以字母开头，中间可以出现数字，下划线。变量名不能有空格、+或其他符号  
区分大小写，不能使用 JavaScript 的关键字作为变量。JavaScript 中的保留字（关键字）：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70][]

### 1.3.4：变量的作用域 ###

在javaScript中有全局变量和局部变量之分。全局变量时定义在所有函数体之外，其作用范围是所有函数；而局部变量是定义在函数体之内，只对该函数是可见的。

用 var 修饰的变量是局部变量，不用 var 修饰的变量是全局变量。

### 1.3.5：运算符 ###

运算符是完成某种操作的符号。

*  算术运算符：+, -, \*, /, %, ++, --
 *  比较运算符：==, >, >=, <, <=, !=
 *  逻辑运算符：&&, ||, !
 *  在 注意：在 JavaScript 的逻辑运算中，0 、”” 、false 、null 、undefined 、NaN 均表示false 。除此以外，都表示 true 。
 *  位运算符：&, |, ^, >>, <<, >>>
 *  赋值运算符：=, +=, -=, \*=, /=,

### 1.3.6：表达式 ###

表达式通常是由变量、常量和函数通过运算符构成的有意义的算式。如：a, a\*2/3, (x+y)\*10+(z-3)\*20, x==y

## 1.4：控制结构 ##

### 1.4.1：if语句 ###

if (表达式){
        语句块 1 ;
    }else{
        语句块 2 ;
    }

### 1.4.2：switch语句 ###

switch(表达式) {
        case 值 1：语句 1; break;
        case 值 2：语句 2; break;
        case 值 3：语句 3; break;
        default: 语句 4;
    }

### 1.4.3：for语句 ###

for (初值表达式; 条件表达式; 更新语句) {
    //循环体语句
    }

### 1.4.5：while语句 ###

while(条件表达式) {
        //循环体语句
    }
        break 语句：结束当前的循环或 switch 语句。
        continue 语句：用于 for 或 while 语句中，结束本次循环，继续下一次循环。

## 1.5：函数 ##

### 1.5.1：函数定义 ###

function 函数名([参数列表]) {
    
        语句块;
        [return 表达式;]
    }

### 1.5.2：调用函数 ###

函数被调用时函数内的代码才真正被执行。调用函数的方法就是使用函数的名称并赋给全部参数相应的值。

script language="javascript">
        max(20,30);
    </script>
    或
    <input type="button" onClick="max(23,45);">

### 1.5.3：函数参数 ###

函数的参数在JavaScript中调用函数时，**可以向函数传递比在函数定义时参数数目要少的参数**。在这种情况下，只要不是试图去读那些没有传递过来的参数就行。  
用 typeof 运算符可以得到参数的类型。对于未传递的参数，用 typeof 运算符得到的结果是“undefined”。示例如下：

## 1.6：系统函数 ##

### 1.6.1：eval( 字符串表达式) ###

返回字符串表达式中的运算结果值。例 1：test=eval( " x=8+9+5/2 " );

### 1.6.2：escape 和 和 unescape ###

**escape( 字符串)**

返回字符串的一种简单编码，将非字母数字的符号转换为%加其 unicode 码的十六进制表示。  
例如: escape("你好世界") --- "%u4F60%u597D%u4E16%u754C"

**unescape( 字符串)**

将已编码的字符串还原为纯字符串。  
例如: unescape("%u4F60%u597D%u4E16%u754C") --- "你好世界"

### 1.6.3:parseFloat( 字符串) ###

返回浮点数 --- 例如: parseFloat( "10.5" ) 返回数字：10.5

### 1.6.4:parseInt 返回int数据 ###

parseInt( 字符串,radix)  
parseInt( 字符串,radix)

其中 radix 是数的进制，默认是十进制数 parseInt(字符串)  
例如:

*  parseInt( "10.5" ) 返回数字：10
 *  parseInt( "10" ) 返回数字：10
 *  parseInt( "abc" ) 返回值：NaN

### 1.6.5:isNaN(x) ###

该函数可用于判断其参数是否是NaN，NaN表示一个非法的数字。如果把 NaN 与任何值（包括其自身）相比得到的结果均是 false，所以要判断某个值是否是 NaN，不能使用 == 运算符。正因为如此，isNaN()函数是必需的。

### 1.6.6:isFinite(number) ###

该函数用于检查其参数是否是无穷大，如果 number 是有限数字（或可转换为有限数字），那么返回 true。否则，如果 number 是 NaN（非数字），或者是正、负无穷大的数，则返回false。

## 1.7:事件驱动和事件处理 ##

在JavaScript中编写的函数，通常是在其他代码进行调用时才会执行。不过我们也可以将某个函数与某个事件（Event，通常是鼠标或热键的动作）联系起来，使得当事件发生时执行该函数。这个方法称之为 **事件驱动**（Event Driver）。而对事件进行处理的函数，称之为**事件处理程序**（Event Handler 事件句柄）。

### 1.7.1：事件 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 1][]

### 1.7.2：事件与函数关联 ###

要将一个函数与某个 HTML 元素的事件关联起来，需要设置相应的 HTML 标记中的属性值。例如，对于一个button元素的click事件的处理函数为MyProc()，则可以用如下的形式将事件与函数关联起来：

# 2：JavaScript内置对象 #

## 2.1： 数组对象类型 Array ##

数组可以存放很多相同类型的数据。有数组名代表所有这些数据，而用数组名\[下标\]表示其中某个元素（下标从 0 开始）。  
如：var myA=\["张三","李四","王五"\];

myA\[0\]指向第一个元素“张三”

### 2.1.1：创建数组的方法 ###

*  (1) 使用方括号，创建数组的同 时赋初值

var myA=\["张三", "李四","王五"\];  
var b=\[10,20,30,40\];

*  （2) 使用 new 操作符，创建数组的同时赋初值

var myA=new Array("张三", "李四","王五");  
注意圆括号和方括号的区别，不能任意使用。

*  （3）先创建数组，后面再赋值

var anArray = new Array();  
anArray\[0\]= "张三";  
anArray\[1\]= "李四";  
anArray\[2\]= "王五";

### 2.1.2：数组的属性 ###

length  
数组名.length 返回数组中元素的个数如：myA.length 为 3

### 2.1.3：数组的方法 ###

**join( 分割符)**  
该方法的功能是把数组中所有数据用指定的分割符连接起来，以一个字符串的形式表达出来。例如：  
myA.join("/") 返回一个字符串 "张三/李四/王五"

**reverse()**  
该方法的功能是将数组中的元素整个反转顺序。例如：

**sort()**  
该方法的功能是将数组元素排序（汉字按拼音的字母顺序）。 例如：

**concat()**  
方法用于连接两个或多个数组。

**pop()**  
方法用于删除并返回数组的最后一个元素。  
删除数组的最后一个元素，把数组长度减 1，并且返回它删除的元素的值。如果数组已经为空，则 pop() 不改变数组，并返回 undefined 值。

**push()**  
方法可向数组的末尾添加一个或多个元素，并返回新的长度。

push() 方 法 可 把 它 的 参 数 顺 序 添 加 到 arrayObject 的 尾 部 。 它 直 接 修 改arrayObject，而不是创建一个新的数组。push() 方法和 pop() 方法使用数组提供的先进后出栈的功能 。

**shift()**  
方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。

**unshift()**   
方法可向数组的开头添加一个或更多元素，并返回新的长度。  
unshift() 方法将把它的参数插入 arrayObject 的头部，并将已经存在的元素顺次地移到较高的下标处，以便留出空间。该方法的第一个参数将成为数组的新元素 0，如果还有第二个参数，它将成为新的元素 1，以此类推。

**slice(start,end)**

从已有的数组中返回选定的元素。

**splice()**  
方法用于插入、删除或替换数组的元素。

splice() 方法可删除从 index 处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 2][]

## 2.2:字符串 ##

### 2.2.1：字符串长度属性 ###

myStr.length 返回字符串中字符的个数 9，一个汉字算一个字符。

### 2.2.2：字符串方法 ###

1：格式设置方法

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 3][]

2：通用字符操作

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 4][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 5][]

### 2.2.3：正则使用 ###

//年龄验证：1-99 的数字
    var age=document.getElementById("age").value;
    var patrn=/^[1-9][0-9]?$/;
    if (!patrn.exec(age)) {
    //设置提示信息为红色
    document.getElementById("err_age").style.color='red';
    flag=false;
    }else{
    //设置提示信息为黑色
    document.getElementById("err_age").style.color='black';
    }

## 2.3：数学类Math ##

### 2.3.1:Math 对象的常量 ###

*  Math.E 返回 2.718
 *  Math.PI 返回 3.14159

### 2.3.2:Math对象的方法 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 6][]

## 2.4：日期时间类 ##

### 2.4.1：创建日期对象的几种办法 ###

![20200613220006422.png][]

### 2.4.2：日期对象的方法 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 7][]

# 3：窗口window对象 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 8][]

*   window 整个浏览器窗口的统称，是最上层的唯一对象。这一级可以省略，是系统默认值。
 *   history 包含用户（在浏览器窗口中）访问过的 URL
 *   document 是 window 的一个子对象，包含**当前文档(HTML 文件)**中所有的对象。
 *   location 窗口中当前显示的文档的 Web 地址。
 *   navigator 包含有关浏览器的信息。
 *   以上对象都是系统预定义好的。

## 3.1:window属性 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 9][]

## 3.2:window对象的方法 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 10][]

![20200613221004573.png][]

### 3.3:常用方法 ###

### 3.3.1：打开和关闭窗口 ###

open 打开一个浏览器窗口来显示新的页面。window.open(URL,窗口名称,配置参数);

*  URL:用来指定新窗口要显示的文档的 URL。
 *  窗口:用来向设置新窗口的 title。

配置参数:用来描述新窗口的外观等信息，可以使用以下的一个或几个，用分号“;”隔开。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 11][]

close() 关闭用 Open 方法打开的窗口，或关闭当前窗口

注：这个脚本只能关闭他打开的窗口；

### 3.3.2：模态窗口 showModalDialog ###

通过 dialog 对象创建一个新的窗口。  
window.showModalDialog(URL,传递参数,配置参数)  
URL:用来指定对话框要显示的文档的 URL。  
传递参数:用来向对话框传递参数。传递的参数类型不限，对于字符串类型，最大为4096个字符。也可以传递对象、数组等。对话框通过 window.dialogArguments 来取得传递进来的参数。

这个了解就行，现在谷歌停用了，推荐用window.open()

### 3.3.3:对话框 ###

**alert ( 提示字符串)**  
在屏幕中显示一个消息框，显示一个提示信息，单击“确定”按钮关闭消息框

**confirm ( 提示字符串)**  
显示一个可以接受用户输入的确定框，当选择确定或取消，**返回值**为 true 或 false。

**prompt( 提示字符串，初始值)** 让用户在对话框中输入

# 4:文档 document #

## 4.1:document对象概述 ##

ocument 对象最强大的一个特性在于它的组织性。如果给页面中的元素起个名字，则可以把该元素当成 document 对象的一个属性来处理。例如，如果在 form 元素“form1”中有一个名 叫 “ txtbox” 的 文 本 框 ， 则 可 以 像 下 面 这 样 去 引 用 该 文 本 框 中 的 文 本 ：document.form1.txtbox.value。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 12][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 13][]

## 4.2:document 对象事件 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 14][]

# 5：History 对象 #

history 对象包含用户（在浏览器窗口中）访问过的 URL。  
history 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。

## 5.1 history 对象属性 对象属性 ##

![20200613230406761.png][]

## 5.2:history对象方法 ##

![20200613230433790.png][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020061315003720.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200613151630859.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200613214053262.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200613214510434.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200613214532560.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200613214603160.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200613215328704.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2,size_16,color_FFFFFF,t_70
[20200613220006422.png]: https://img-blog.csdnimg.cn/20200613220006422.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20200613220040221.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20200613220407470.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20200613220545756.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20200613220740620.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2,size_16,color_FFFFFF,t_70
[20200613221004573.png]: https://img-blog.csdnimg.cn/20200613221004573.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20200613223340599.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 12]: https://img-blog.csdnimg.cn/2020061323000448.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 13]: https://img-blog.csdnimg.cn/20200613230106706.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 14]: https://img-blog.csdnimg.cn/20200613230145767.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2,size_16,color_FFFFFF,t_70
[20200613230406761.png]: https://img-blog.csdnimg.cn/20200613230406761.png
[20200613230433790.png]: https://img-blog.csdnimg.cn/20200613230433790.png