耗子JavaScript系列学习笔记

古城微笑少年丶 2023-02-16 04:04 12阅读 0赞

## 前言 ##

续前几个月推出的Web开发序列学习笔记，JavaScript一直没能够接着学下去，所以本次将边学习边上交，之前敲烂了一个键盘，具体需要等待新键盘回来才方便写。本系列呢，只放置了一些个人认为比较重点的东西，c语言里面已经有了的，多写无益也浪费时间。好啦，那就开始吧！

## 不废话，直接开始 ##

JavaScript和css一样，也有行内式、内嵌式、外部式。具体请参考之前推出的[web前端开发入门笔记（更新中）][web]进行查看。以下为了便于分析，将会使用内嵌式。

## 入坑例子 ##

先使用一个简单的例子拉大家入坑。

<!DOCTYPE HTML>
    <htm1 lang="en"> 
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title> 
    <script> 
    prompt('请输入耗子喜欢吃的零食');
    alert('我是沙雕');
    console.log('我藏在调试这边哦');
    </script>
    </head>	
    <body> 
    </body>
    </htm1>

上述的prompt(’’)是一个输入框，用于用户输入，效果如下。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyMDc4OA_size_16_color_FFFFFF_t_70]alert(’’)则是一个弹出警示框，输出信息展示给用户，效果如下  
![在这里插入图片描述][20200611212351255.png]  
console.log(’’)是用来打印在控制台上，便于程序员调试用的，效果如下。  
![在这里插入图片描述][20200611212409156.png]

## 变量 ##

与多种编程语言一样，JavaScript的变量也分为整形、字符串型、浮点型、布尔型。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyMDc4OA_size_16_color_FFFFFF_t_70 1]  
typeof可以检测变量类型

var num = 10;
    console. log(typeof num); // number
    var str ='耗子' ;
    console.log(typeof str); // string
    var flag = true;
    console.log(typeof flag); // boolean
    var vari = undefined;
    console. log(typeof vari); // undefined
    var timer = null;
    console.1og(typeof timer); // object
    // prompt 取过来的值是 字符型的
    var age = prompt( '请输入您的年龄');
    console.1og(age);
    console.1og(typeof age); // string

可以使用var这个关键字定义一个新变量，例如：

var myName='耗子';
    var address = '单身程序猿公寓';
    var age = 20;
    var email = '2956148138@iqq.com';
    var gz = 12000;
    console.log (myname);
    console.log(address);
    console.log(age);
    console.log(email);
    console.log(gz);

效果如下：  
![在这里插入图片描述][20200611213827391.png]  
网速不允许我贴图（狗头），我会尽量贴的。。。  
然后使用弹窗输出，当然也可以使用prompt进行后期变量赋值再打印。

var myName='耗子';
    alert(myName);
    var myFood=prompt('请输入耗子喜欢吃的零食');
    alert(myFood);
    var address = '单身程序猿公寓',
        age = 20,
        email = '2956148138@iqq.com';
    var sex;
    console.log(address);
    console.log(age);
    console.log(email);
    console.log(sex);//因为没有赋初始值，所以会打印为undefined。

## 数字型变量 ##

var num = 10; // num
    数字型
    var PI =3.14; // PI数字型
    /* 1.八进制0~7我们程序里面数字前面加0表示八进制 */
    var num1 = 010;
    console.log(num1); // 010 八进制 转换为10进制就是8
    var num2 = 012;
    console.1og(num2);
    /* 2.十六进制0~9 a~f #ffffff 数字的前面加0x表示十六进制 */
    var num3= 0x9;
    console . log(num3);
    var num4 = Oxa ;
    console . log(num4);
    // 3.数字型的最大值
    console . log(Number.MAX_VALUE);
    // 4.数字型的最小值
    console. log(Number.MIN_VALUED);

其中，Number.MAX\_VALUE与Number.MIN\_VALUED是分别判断最大最小值的数学方法，已经封装进一个类里了，可以直接进行使用，后面会讲到如何自己封装自己的类。  
在数字型变量的显示上，过大过小数值将显示如下：

Infinity代表为无穷大，
    -Infinity代表为无穷小，
    NaN代表一个非数值
    null为空值
    isNaN（）用来判断是否为数字型变量，返回为0或者1

## 字符串型变量 ##

例子1：简单示例

varstr1="我是一个'高富帅'的\n程序员";
    //字符串转义字符 都是用\开头，可以允许有双引号，单引号并存，但得“内双外单、内单外双”。
    console.log(str1);

例子2：length来获取字符串变量的长度

var str ='我是 耗子' ;
    console.log(str.length); // 6

例子3：字符串拼接

console.1og('耗子' + '哒哒哒'); //耗子哒哒哒
    console.log('耗子' +18+'岁'); // 耗子岁
    console.1og( '耗子' + true); // 耗子true
    console.1og(12 + 12); // 24
    console.1og('12' + 12); // ' 1212 '
    var myName=undefined;
    console.log(myName+1);//NaN

例子4：查找字符串中特殊字的所有位置以及次数  
核心算法:

先查找第一个o出现的位置，然后只要indexOf返回的结果不是-1
    就继续往后查找。因为indexOf只能查找到第一个，所以后面的 
    查找，一定是当前索引加1，从而继续查找。

//"abcoefoxyozzopp"中所有o出现的位置以及次数
    var str ="abcoefoxyozzopp" ;
    var index = str.indexOf('o');
    var num = 0;
    //console.log(index);
    while (index !== -1) { 
    	console.log(index); 
    	num++;
    	index = str.indexOf('o', index + 1);
    }

例子5：求出现次数最多的字符  
核心算法:

利用charAt() 遍历这个字符串，把每个字符都存储给对象， 如果对象没有该属性，就为1，如果存在了就+1。遍历对象，得到最大值和该字符。

字符串操作方法  
![在这里插入图片描述][20200612174157528.png]  
大小写转换

toUpperCase()   //转换大写
    toLowerCase()   //转换小写

## 数字与字符串类型的互换 ##

1.  数字型转换为字符串型变量

// 1.把数字型转换为字符串型变量. toString()
    var num = 10;
    var str = num . toString(); 
    console.log(str);
    console.log(typeof str);
    // 2.我们利用String(变量)
    console.log(String(num));
    // 3.利用+拼接字符串的方法实现转换效果隐式转换
    console.log(num + '');

1.  字符串转换为数字型

//parseInt
    console.log(parseInt('3.14'));//3
    console.log(parseInt('3.94'));//3
    console.log(parseInt('120px'));//120
    console.log(parseInt('rem120px'));//NaN
    //parseFloat
    console.log(parseFloat('3.94'));//3.94
    console.log(parseFloat('120px'));//120.00
    console.log(parseFloat('rem120px'));//NaN
    //Number
    console.log(Number('120'));
    //利用算术运算+ - 隐式转换
    console.log('120'-0);//12
    console.log('120'-'119');
    console.log('120'-1);

## 布尔值的转换 ##

凡是为空的、否定的都会转为false，如‘’、0、NaN、null、undefined。

console.log(Boolean(''));

## 变量前后自增 ##

// 1.前置自增和后置自增如果单独使用效果是样的 
    //2.后置自增口诀:先返回原值后自加1
    var age = 10;
    console.log(age++ + 10);//20
    console.log(age);//11
    var a=11;
    var b=++a +12;
    console.log(b);//24

## 数组 ##

与其他编程语言所不同，一个数组内可以存放不同类型的变量。如：

var arrStus = ['你是老王吧',12,true,5.20];

下面继续上例子。  
例子1：利用new Array（）创建数组

var arr1 = new Array(); //创建了一个空的数组
    var arr2 = new Array(2) ;
    //这个2表示数组的长度为2里面有2个空的数组元素
    var arr3 = new Array(2, 3); //等价于[2,3] 这样写表示里面有2个数组元素是2和3
    console.log(arr3);

例子2：利用数组字面亮创建数组

//数组长度数组名. length
    var arr = ['关羽','张飞','马超','赵云','黄忠','刘备','姜维','耗子'];
    for(vari=0;i<7;i++){ 
    	console.log(arr[i]);
    }
    console.log(arr .length);
    for(vari=0;i<arr.length;i++){ 
    	console.log(arr[i});
    }

注意:

1.  数组的长度是元素个数 不要跟索引号混淆。
2.  arr.length 动态监测数组元素的个数。  
    例子2

例子3：新增数组元素 修改索引号 追加数组元素

var arr1 = ['red','green','blue'];
    arr1[3] = 'yellow';
    console.log(arr1);
    arr1[4] = 'grep';
    console.log(arr1);
    arr1[0] = 'black';//这里是替换原来的数组元素
    console.log(arr1);
    arr1 = '报错专用语法'; //不能直接给数组名赋值，否则里面的数组元素都没有了
    console.log(arr1);

例子4：翻转数组

例子5：删除数组元素  
利用pop() 可以删除数组的最后一个元素。

1.  pop是可以删除数组的最后一个元素记住一次只能删除一个元素。
2.  pop() 没有参数。
3.  pop完毕之后，返回的结果是删除的那个元素。
4.  原数组也会发生变化。

利用shift() 它可以删除数组的第一个元素。

1.  shift是可以删除数组的第一个元素记住次只能删除-个元素。
2.  shift() 没有参数。
3.  shift完毕之后， 返回的结果是删除的那个元素。
4.  原数组也会发生变化。

console.log(arr.pop());
    console.log(arr);
    console.log(arr.shift());
    console.log(arr);

例子6：返回数组元素索引号

1. indexOf(数组元素):返回该数组元素的索引号。它只返回第一个满足条件的索引号，它如果在该数组里面找不到
    元素，则返回的是-1。
    2. 返回数组元素索引号方法lastIndexOf( 数组元素)作用 就是返回该数组元素的索引号从后面开始查找。

//var arr=['red','green','blue','pink', 'blue'];
    var arr = [ 'red','green', 'pink'];
    console.log(arr.indexOf('blue'));//-1
    var arr = ['red','green','blue','pink', 'blue'];
    console.log(arr.1astIndexOf('blue')); // 4

例子7：数组转换为字符串

1. toString() 将我们的数组转换为字符串
    2. join( 分隔符)

var arr = [1, 2, 3];
    console .log(arr .toString()); // 1,2,3
    var arr1 = ['green', 'blue', 'pink'];
    console.log(arr1.join()); // green, blue , pink
    console.log(arr1.join('-')); // green-blue-pink 
    console.log(arr1.join('&' )); // green&blue&pink

此外，还有这几样函数可以进行使用。

concat()   连接两个或者多个数组 不影响数组  返回一个新的数组。
    slice()    数组截取slice(begin,end)    返回被截取的新数组。
    splice()  数组删除splice(第几个开始，要删除的个数)   返回被删除项目的新数组 注意，这个会影响原数组。

## 函数 ##

return 可以返回值并终止函数，函数中return的后面的代码将不会被执行。

// return 终止函数
    function getSum(num1, num2) { 
    	return num1 + num2; // return 后面的代码不会被执行
    	alert('我是不会被执行的哦! ');
    }
    console.log(getSum(1, 2));
    // 2. return 只能返回一个值
    function fn(num1, num2) { 
    	return num1, num2; //返回的结果是最后一个值
    }
    console.log(fn(1, 2));
    // 3. 我们求任意两个数的加减乘数结果，返回的多个值使用数组包装
    function getResult(num1, num2) { 
    return[ num1+num2 ,num1-num2,num1*num2, num1/ num2] ;
    }
    varre=getResult(1, 2); //返回的是一个数组
    console.1og(re);

# 运算符优先级 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyMDc4OA_size_16_color_FFFFFF_t_70 2]

## 断点调试 ##

断点调试是指自己在程序的某一行设置-个断点 ,调试时,程序运行到这一行就会停住,然后你可以一步一步往下调试,
    调试过程中可以看各个变当前的值,出错的话,调试到出错的代码行即显示错误,停下。断点调试可以帮我们观察程序的
    运行过程浏览器中按F12--> sources -->找到需要调试的文件-->在程序的某一行设置断点Watch:监视,通过watch
    可监视变量的值的变化,非常的常用。F11:程序单步执行,让程序-行-行的执行,这个时候,观察watch中变量的值的变
    化。代码调试的能力非常重要,只有学会了代码调试,才能学会自己解决bug的能力。初学者不要觉得调试代码麻烦就不
    去调试,知识点花点功夫肯定学的会,但是代码调试这个东西,自己不去练,永远都学不会。

下面利用一个for循环进行演示  
代码部分

for(var i=0;i<=100;i++)
    { 
    	console.log('你在想屁吃!');
    }

保存后刷新页面，找到Sources这里，点击html文件，就可以显示出代码页面，如果比较小可以拉大点。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyMDc4OA_size_16_color_FFFFFF_t_70 3]  
点击行数左边部分，进行断点（点击后系统会自动标红点，大多数断点调试都会有这样的功能），并进行刷新，会发现由于断点，页面会不断地缓冲。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyMDc4OA_size_16_color_FFFFFF_t_70 4]  
点击上下箭头，可以看到for循环中的方框前后移动，代表着步骤进行。  
![在这里插入图片描述][20200612112639626.png]  
![在这里插入图片描述][20200612112655324.png]  
运行第一圈  
![在这里插入图片描述][20200612112732487.png]  
第二圈  
![在这里插入图片描述][20200612112759199.png]  
也可以在watch窗口这里输入想要搜索的变量，如i，查看当前值。  
![在这里插入图片描述][20200612112851816.png]

## 对象 ##

1.  变量单独声明并赋值，使用的时候直接写变量名单独存在。
2.  属性在对象里面的不需要声明的使用的时候必须是对象.属性。
3.  函数和方法的相同点都是实现某种功能 做某件事。
4.  函数是单独声明并且调用的函数名()单独存在的。
5.  方法在对象里面调用的时候对象.方法()。

构建新对象方法1

//利用var声明一个新的对象
    
    var num = 10;
    var obj={ 
      age: 18,
      fn:
      function() 
      { 
      }
    }
    function fn() { 
    }
    console .log(obj.age);
    // console . 1og(age);报错

利用for循环语句，以及in关键字遍历对象

for(var key in obj){ 
      console .log(key);//输出得到的是属性名
      console .log(obj.[key]);//输出得到的是属性值
    }

构建新对象方法2

//利用new object 创建对象
    
    var obj = new Object(); //创建了一个空的对象
    obj.uname = '张江男' ;
    obj.age = 28;
    obj.sex = '男';
    obj.sayHi =function() { 
    console.log('hi~');
    }
    // (1)我们是利用等号=赋值的方法添加对象的属性和方法
    // (2)每个属性和方法之间用分号结束
    console . log(obj . uname); 
    console.log(obj[ 'sex']); 
    obi. sayHi( ) ;

构建新对象方法3

1. 构造函数名字首字母要大写。
    2. 我们构造函数不需要return就可以返回结果。
    3. this指针指向的是本次的对象。

//new
    function Human(uname,age,sex){ 
    	this.name = uname;
    	this.age = age;
    	this.sex = sex;
    	this.hoby = function(){ 
    		console.log(hoby);
    	}
    }
    var mouse = new Human('耗子',20,'男');//调用函数返回的是一个对象
    //console.log(typeof mouse);
    console.log(mouse.name);
    console.log(mouse['sex']);
    mouse.hoby('爱北鼻');
    var girlfriend = new Human('北鼻',21,'女');
    console.log(girlfriend.name);
    console.log(girlfriend['sex']);
    girlfriend.hoby('爱耗子');

## 冒泡排序法 ##

//利用函数冒泡排序sort 排序
    function sort(arr) { 
    	for(vari=0;i<arr.length-1;i++){ 
    		for(varj=0;j<arr.length-i-1;j++){ 
    			if (arr[5i] > arr[j + 1]) { 
    				var temp = arr[i];
    				arr[j] = arr[j + 1];
    				arr[j + 1] = temp;
    		}
    	}
    }
    return arr ;
    }
    var arr1 = sort([1, 4, 2, 9]);
    console.1og(arr1);
    var arr2 = sort([11,7,22,999]); 
    console . log(arr2);

## 三元表达式 ##

1.  有三元运算符组成的式子我们称为三元表达式。
2.  \++num 3+5?:
3.  语法结构  
    条件表达式?表达式1 ;表达式2。
4.  执行思路  
    如果条件表达式结果为真则返回表达式1的值如果条件表达式结果为假则返回表达式2的值。

例子1

var num = 10;
    var result = num > 5 ? '是的': '不是的'; //我们知道表达式是有返回值的
    console.log(result);
    
    //相当于
    if(num>5){ 
    result = ' 是的' ;
    }else{ 
    result = '不是的';
    }

例子2

//用一个变量接受这个返回值，输出
    var time = prompt('请您输入一个0 ~ 59之间的一个数字');
    //三元表达式 表达式?表达式1 :表达式2
    var result = time< 10?'0'+time:time;//把返回值赋值给一个变量
    alert(result);

## 资料文档查询 ##

学习一个内置对象的使用,只要学会其常用成员的使用即可,我们可以通过查文档学习,可以通过MDN/W3C来查询。  
Mozilla开发者网络( MDN )提供了有关开放网络技术( OpenWeb )的信息,包括HTML、CSS 和万维网及HTML5应用的API。  
相关链接如下：  
MDN: https://developer.moilla.org/zh-CN

## 数学对象Math ##

Math对象不是构造函数,它具有数学常数和函数的属性和方法。跟数学相关的运算(求绝对值,取整、最大值等)可以使用Math中的成员。

Math.PI//圆周率
    Math.floor ()  //向下取整
    Math.ceil ()   //向上取整
    Math.round()   //四舍五入版就近取整 注意-3.5 结果是-3。
    Math.abs ()    //绝对值
    Math.max ()    //Math.min() 91求最大和最小值。

Math数学对象不是个构造函数，所以我们不需要new 来调用而是直接使用里面的属性和方法即可。

例子1：Math最大值方法

console.log(Math.PI); //一个属性圆周率
    console.log(Math.max(1, 99， 3)); // 99
    console.log(Math.max(-1, -10)); // -1
    console.log(Math.max(1, 99,'陈浩南')); // NaN
    console.log(Math.max()); // - Infinity

例子2：Math对象取随机数方法

console.1og(Math. random());
    // 4.我们想要得到两个数之间的随机整数并且包含这2个整数
    // Math.floor(Math . random()*(max-min+1))+min;
    function getRandom(min, max) { 
    	return Math. floor (Math. random() *(max - min + 1))+min; 
    }
    console.log( getRandom(10));
    // 5.随机点名
    var arr = ['关羽','张飞','马超','赵云','黄忠','刘备','姜维','耗子'];
    // console.1og(arr[0]);
    console.log(arr [getRandom(1, 10)]);

## 自己封装数学对象 ##

var myMath{ 
    	min: function() { 
    		var min = arguments[0]; 
    		for (var i = 1; i < arguments.length; i++) { 
    			if (arguments[i] < min) { 
    				min = arguments[i];
    			}
    		}
    		return min;
    	}
    }
    console.log(myMath.PI);
    console.log(myMath. max(1, 5, 9));
    console.log(myMath. min(1, 5, 9));

## Date日期对象 ##

Date()日期对象是一个构造函数必须使用new来调用创建我们的日期对象。  
注意：

1. 使用Date 如果没有参数返回当前系统的当前时间。
    2. 参数常用的写法 数字型  2019, 10, 01 或者是 字符串型 '2020-06-12 4：12：8'。

例子1：调用日期年月日

var arr=newArray();//创建个数组对象
    var obj = new Object(); //创建了一个对象实例
    var date = new Date ();
    console.1og(date);
    var date1 = new Date (2019， 10, 1);
    console.log(date1); //返回的是11月不是10月
    var date2 = new Date('2020-06-12 4：12：8');
    console.log(date2);

例子2：格式化日期年月日

//格式化日期年月日
    var date = new Date();
    console.log(date . getFullYear()); //返回当前日期的年2020
    console.log(date. getMonth() + 1); //月份返回的月份小1个月 记得月份+1呦
    console.log(date.getDate()); //返回的是几号
    console.log(date.getDay()); // 5 周一 返回的是1周六返回的是6但是周日返回的是0
    //我们写一个2019年5月1日星期三
    var year = date.getFullYear();
    var month = date.getMonth()+1;
    var dates = date.getDate();
    var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
    var day=date.getDay();
    console.log('今天是:'+year+'年'+month+'月'+dates+'日
    '+arr[day]);

例子3：封装一个函数返回当前的时分秒,数字补0

console.log(date . getHours()); //时
    console.log(date. getMinutes()); //分
    console.log(date. getSeconds()); //秒
    //要求封装一个函数返回当前的时分秒格式04：12：08
    function getTime() { 
    	var time = new Date ();
    	var h = time.getHours();
    	h=h<10?'0'+h:h;
    	var m = time . getMinutes();
    	m= m<10?'0'+ m: m;
    	var s = time . getSeconds();
    	s=s<10?'0'+s:s;
    	return h +':'+m+':'+s;
    }
    console.log(getTime());

例子4：获得Date总的毫秒数(时间戳)不是当前时间的毫秒数而是距离1970年1月1号过了多少毫秒数。

// 1.通过valueOf() getTime( )
    var date = new Date();
    console. log(date.valueOf()); //就是我们现在时间距离1970.1.1 总的亳秒数
    console .1og(date . getTime());
    
    // 2.简单的写法(最常用的写法)
    var date1 = +new Date (); //
    +new Date()返回的就是 总的毫秒数
    console.log(date1);
    
    // 3. H5新增的获得总的亳秒数
    console . log(Date . now());

例子5：倒计时

1.核心算法:输入的时间减去现在的时间就是剩余的时间，即倒计时，但是不能拿着时分减去25分，结果会是负数的。
    2.用时间戳来做。用户输入时间总的亳秒数减去现在时间的总的亳秒数，得到的就是剩余。
    3.把剩余时间总的亳秒数转换为天、时、分、秒(时间戳转换为时分秒)。
    4.转换公式如下:
    计算天数:d = parseInt(总秒数/ 60/60 /24); 
    计算小时:h = parseInt(总秒数/ 60/60 %24)    
    计算分数: m = parseInt(总秒数/60 %60 ) ;    
    计算当前秒数:s = parseInt( 总秒数%60);

function conutDown(time ) { 
    	var nowTime = +new Date(); //返回的是当前时间总的亳秒数
    	var inputTime = +new Date(time); //返回的是用户输入时间总的毫秒数
    	var times = (inputTime-nowTime) / 1000; // time 是剩余时间总的秒数
    }

例子6:倒计时转为时分秒状态

function countDown(time) { 
    	var nowTime = +new Date(); //返回的是当前时间总的亳秒数
    	var inputTime = +new Date(time); //返回的是用户输入时间总的毫秒数
    	var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数
    	var d = parseInt(times / 60 / 60 / 24); //天
    	d = d<10?'0'+ d: d;
    	var h = parseInt(times / 60 / 60 % 24); //时
    	h=h<10?'0'+h:h;
    	var m = parseInt(times / 60 % 60); //分
    	m= m<10?'0'+m:m;
    	var s = parseInt( times% 60); //当前的秒
    	s =s<10?'0's:s;
    	returnd+'天'+h+'时’+m+'分'+s + '秒';
    }
    console.log( countDown( '2020-06-12 4：12：8'));
    var date = new Date ();
    console.log(date);

## 后文 ##

千里之行，始于足下。后继系列的推出，还仰仗各位童鞋们的多多支持。

[web]: https://blog.csdn.net/weixin_46020788/article/details/105383500
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyMDc4OA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200611212141965.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyMDc4OA==,size_16,color_FFFFFF,t_70
[20200611212351255.png]: https://img-blog.csdnimg.cn/20200611212351255.png
[20200611212409156.png]: https://img-blog.csdnimg.cn/20200611212409156.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyMDc4OA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200611212838144.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyMDc4OA==,size_16,color_FFFFFF,t_70
[20200611213827391.png]: https://img-blog.csdnimg.cn/20200611213827391.png
[20200612174157528.png]: https://img-blog.csdnimg.cn/20200612174157528.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyMDc4OA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200611225649278.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyMDc4OA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyMDc4OA_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200612112314120.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyMDc4OA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyMDc4OA_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200612112423276.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyMDc4OA==,size_16,color_FFFFFF,t_70
[20200612112639626.png]: https://img-blog.csdnimg.cn/20200612112639626.png
[20200612112655324.png]: https://img-blog.csdnimg.cn/20200612112655324.png
[20200612112732487.png]: https://img-blog.csdnimg.cn/20200612112732487.png
[20200612112759199.png]: https://img-blog.csdnimg.cn/20200612112759199.png
[20200612112851816.png]: https://img-blog.csdnimg.cn/20200612112851816.png