js基础、函数、Window对象、BOM编程的一些总结

向右看齐 2022-04-22 13:30 136阅读 0赞

## js基础、函数、Window对象、BOM编程 ##

=======================为什么要使用JavaScript===========================

JavaScript可以使网页增加互动性，也可以对表单提交进行验证减轻服务器的负担，JavaScript还是后面要学习的Ajax技术中的核心。

=======================JavaScript的基本结构===========================

![20181105153746170.png][]

======================javascript脚本执行原理===========================

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70][]

=========================JavaScript核心语法==========================

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 1][]

============================变量================================

声明变量的关键字：var

注意：在JavaScript中所有类型都可以用var来声明，也可以把var省略

**声明变量语法：**

1.  先声明变量，再给变量赋值

var num;

num = 2;

2、声明变量的同时给变量赋值

var num = 2;

3、同时声明多个变量并赋值

var a=2,b=”abc”,c=5;

4、不使用var直接给变量赋值

num = 2;

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            var a;
            a=3;
            document.write(a+"<br>");
    
            var b= 20 ;
            document.write(b+"<br>");
    
            var c = 2,d=25.6,e=true;
            document.write(c+"-"+d+"-"+c+"<br>");
    
            var f= "abc";
            document.write(f);
    
        </script>
    </head>
    <body>
    
    </body>
    </html>

======================typeof运算符的使用=============================

用于得到变量或值对应的类型返回值(注意：类型返回值是一个字符串)

语法： typeof(变量或值)

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 2][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            var a;
            var b = "hello";
            var c = true;
            var d = 23;
            var e = new Date();
            document.write(typeof(a)+"<br>");
            document.write(typeof(b)+"<br>");
            document.write(typeof(c)+"<br>");
            document.write(typeof(d)+"<br>");
            document.write(typeof(e)+"<br>");
    
        </script>
    </head>
    <body>
    
    </body>
    </html>

==========================运算符==============================

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 3][]

===================逻辑控制语句======================

1、If条件语句

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 4][]

2、switch多分支语句

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 5][]

3、循环结构

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 6][]

循环中断：break、continue

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            var a = null;
            if(a){
                document.write("逻辑为真");
            }else{
                document.write("逻辑为假");
            }
        </script>
    </head>
    <body>
    
    </body>
    </html>

========================消息框和输入框============================

alert()：提示框

prompt()：输入框(能够获取用户的输入)

用法：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 7][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            //提示框
            //alert("hello");
            var name = prompt("请输入您的姓名","姓名在此输入");
            document.write(name);
        </script>
    </head>
    <body>
    
    </body>
    </html>

========================JavaScript的使用方式=============================

1、内嵌JS代码

在网页的<script>标签中编写JS代码

Javascript代码

</script>

2、外部JS文件

在网页中引入外部的JS文件来使用

引入的语法：<script type="text/javascript" src="js文件的路径"></script>

如果js代码很少，可以使用简短缩写方式

1.创建一个js文件夹、创建my.js的javascript文件

var a;
    a=3;
    document.write(a+"<br>");
    
    var b= 20 ;
    document.write(b+"<br>");
    
    var c = 2,d=25.6,e=true;
    document.write(c+"-"+d+"-"+c+"<br>");
    
    var f= "abc";
    document.write(f);

2.创建.html文件

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/my.js"></script>
    </head>
    <body>
    <input name="btn" type="button" value="弹出消息框" onclick="javascript:alert('欢迎你');"/>
    </body>
    </html>

===================函数========================

函数类似于Java中的方法，是完成特定任务的代码语句块

函数分为：系统函数、自定义函数

====================常用的系统函数=======================

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 8][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            var a = "23"
            a = parseInt(a);
            document.write(a+1);
            document.write("<br>"+a+"<br>");
    
            var b = "26abc";
            b = parseInt(b);
            document.write(b);
    
            var c = "a37bc";
            c = parseInt(c);
            document.write("<br>"+c);//NaN(not a number);
        </script>
    </head>
    <body>
    
    </body>
    </html>

2.NaN函数的使用

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            var a = 32;
            if(isNaN(a)){
                document.write("a不是数字");
            }else{
                document.write("a是数字");
            }
        </script>
    </head>
    <body>
    
    </body>
    </html>

========================自定义函数===========================

自定义函数是由自己定义函数，分为无参函数、有参函数

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 9][]

函数调用一般和表单元素的事件一起使用，调用格式：**事件名＝“函数名****( )"**

例如：  οnclick=”show()”

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            function show() {
                for(var i=1;i<=5;i++){
                    document.write("hello"+"<br>");
                }
            }
    
            function show2(num) {
                for(var i = 0;i<num;i++){
                    document.write(i);
                }
            }
        </script>
    </head>
    <body>
    <input type="button" value="输出5次hello" onclick="show()" />
    <input type="button" value="输出0-num" onclick="show2(prompt('请输入num'))"/>
    
    </body>
    </html>

=======================什么是BOM===============================

Browser Object Model的缩写，简称浏览器对象模型

![20181105154139636.png][]

window表示浏览器对象

history表示浏览器历史记录对象

document表示文档对象

location表示地址栏对象

window对象常用属性：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 10][]

screen的使用

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            document.write("电脑屏幕的高度"+window.screen.height+"<br>");
            document.write("电脑屏幕的宽度"+window.screen.width+"<br>");
    
            document.write("电脑屏幕的有效高度"+window.screen.availHeight+"<br>");
            document.write("电脑屏幕的有效宽度"+window.screen.availWidth+"<br>");
        </script>
    </head>
    <body>
    
    </body>
    </html>

常用事件：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 11][]

window对象常用方法：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 12][]

confirm的使用

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            var result = confirm("确定删除吗？");
            if(result){
                document.write("已删除");
            }else{
                document.write("未删除");
            }
        </script>
    </head>
    <body>
    
    </body>
    </html>

open()方法的使用：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 13][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            window.open("9_screen.html","","height=300,width=300,left=200,top=200");
        </script>
    </head>
    <body>
    
    </body>
    </html>

定时函数：

setTimeout(“调用的函数”,毫秒数)：多少毫秒后执行函数

setInterval(“调用的函数”,毫秒数)：每隔多少毫秒执行一次函数

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            function greet() {
                alert("hello");
            }
            function startTimeout(){
                window.setTimeout("greet()",2000);
            }
            var interval;
            function startInterval(){
                interval = window.setInterval("greet()",2000);
            }
            function deleteInterval() {
                window.clearInterval(interval);
            }
    
        </script>
    </head>
    <body>
        <input type="button" value="setTimeout的使用" onclick="startTimeout()" /><br>
        <input type="button" value="setInterval的使用" onclick="startInterval()" /><br>
        <input type="button" value="移除setInterval" onclick="deleteInterval()" />
    </body>
    </html>

=====================匿名函数==========================

匿名函数就是指没有函数名的函数

匿名函数的两种写法：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 14][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            window.onload = function () {
                alert("hello")
            }
            function greet(){
                alert("hello");
            }
            window.onload = greet;
    
            var m = function(){
                alert("hello");
            }
    
        </script>
    </head>
    <body>
        <input type="button" value="问候" onclick="m()"/>
    </body>
    </html>

=====================Date日期的使用=============================

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 15][]

日期各个单位的取值范围如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 16][]

getYear()：获取当前年份与1900年相差的年份数

getFullYear()：获取当前年份

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            var date = new Date();
            document.write(date.getYear()+"<br>");
            document.write(date.getMonth()+1+"<br>");
            document.write(date.getDate()+"<br>");
            document.write(date.getHours()+"<br>");
            document.write(date.getMinutes()+"<br>");
            document.write(date.getSeconds()+"<br>");
        </script>
    </head>
    <body>
    
    </body>
    </html>

=======================document的使用=============================

document常用属性：

![2018110515443238.png][]

document常用方法：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 17][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
           function changeText() {
               var d = document.getElementById("divMessage");
               d.innerHTML = "才是真的好";
           }
           function showName(){
               var result = "";
               var subjects=document.getElementsByName("subject");
               for(var i=0;i<subjects.length;i++){
                   result +=subjects[i].innerHTML;
               }
               alert(result);
           }
           function showDiv() {
               var result = "";
               var divs=document.getElementsByTagName("div");
               for(var i=0;i<divs.length;i++){
                   result +=divs[i].innerHTML;
               }
               alert(result);
           }
        </script>
    </head>
    <body>
        <div id="divMessage">大家好</div>
        <input type="button" value="getElementById" onclick="changeText()" />
        <br>
        <div name="subject">C#</div>
        <div name="subject">java</div>
        <div name="subject">Html</div>
        <div name="subject">javascript</div>
        <input type="button" value="getElementByName" onclick="showName()" />
        <input type="button" value="getElementByTagName" onclick="showDiv()" />
    </body>
    </html>

======================visibility和display================================

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 18][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 19][]

**visibility****和display****的区别：元素设置visibility****为不可见后该元素还是会占用空间，元素设置display****为不可见后该元素不会占用空间。**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="div1">第一个div</div>
        <div id="div2">第二个div</div>
        <div id="div3">第三个div</div>
        <input type="button" value="使用visilibility隐藏第二个div" onclick="document.getElementById('div2').style.visibility='hidden'" />
        <input type="button" value="使用display隐藏第二个div" onclick="document.getElementById('div2').style.display='none'" />
    </body>
    </html>

显示和隐藏

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            function showAndHidden() {
                var d = document.getElementById("mydiv");
                if(d.style.display=="none"){
                    d.style.display="block";
                }else {
                    d.style.display="none";
                }
            }
        </script>
    </head>
    <body>
        <div id = "mydiv">大家好</div>
        <input type="button" value="显示／隐藏" onclick="showAndHidden()" />
    </body>
    </html>

======================history对象===========================

history：用来操作浏览器的历史记录

常用方法如下：

back()：返回上一个页面

forward()：进入下一个页面

go()：到哪个页面去  go(-1)表示上一个页面，相当于back()

go(1)表示下一个页面，相当于forward()

go(-2)表示上上个页面

1.创建第一个页面

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    这是第一个页面<br>
    <a href="page2.html">进入第二个页面</a>
    </body>
    </html>

2.创建第二个页面

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    这是第二个页面<br>
    <a href="page3.html">进入第三个页面</a><br>
    <input type="button" value="进入历史记录的上个页面" onclick="history.back(-1)" /><br>
    <input type="button" value="进入历史记录的下个页面" onclick="history.forward(1)" />
    
    </body>
    </html>

3.创建第三个页面

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    这是第三个页面<br>
    <input type="button" value="进入第一个页面" onclick="history.go(-2)" />
    </body>
    </html>

======================location对象==========================

location：用来操作浏览器的地址

常用属性href：用来设置浏览器的地址

例如：location.href=”http://www.baidu.com” 浏览器将显示百度网页

常用方法reload()：用于刷新页面

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <input type="button" value="baidu" onclick="location.href='http://www.baidu.com'" /><br>
        <input type="button" value="reload()" onclick="location.reload()" />
    </body>
    </html>

未完待续。。。

[20181105153746170.png]: /images/20220422/35d802bae03846499f9bffc1a78fb812.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70]: /images/20220422/094368878445405aade4a60a5e34a74a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 1]: /images/20220422/ea15bc2e5e62489a86b782efcf1ad179.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 2]: /images/20220422/56f8a98d85724098bae80e260eb488ce.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 3]: /images/20220422/d9374f69054d46fb9a91352c120b2e06.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 4]: /images/20220422/948c9bc872d348999f041bdc94558162.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 5]: /images/20220422/6b043cff305a431984ffe3866fbc6f89.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 6]: /images/20220422/7d81d87bbe05462a9d4ba275ba997aa6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 7]: /images/20220422/9baa84f0bd7f4ae9adb7025edb953116.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 8]: /images/20220422/d5d76e2454ee440c8378b00d94248339.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 9]: /images/20220422/ef642825669d41479b228c828bff28ae.png
[20181105154139636.png]: /images/20220422/b421a67ed6cb4224b6e3bc3e03e9dcd1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 10]: /images/20220422/4589766660d9445c91a3a06410ac9fc0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 11]: /images/20220422/5eb0c0a222934808bdce4f08c8181a0a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 12]: /images/20220422/ea399bf21c604e4588f795cd049e6f3f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 13]: /images/20220422/a900226efc984348b77504fcf0a57c6b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 14]: /images/20220422/e3cbe428aceb4d84978b8f7ff77cea48.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 15]: /images/20220422/88e837978e014e519d6f0089bb901cda.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 16]: /images/20220422/f28d5a4a6825487e8e1ca31cbd14c1de.png
[2018110515443238.png]: /images/20220422/7b89a66539de408280aac962fd1da399.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 17]: /images/20220422/96a91c56ff2543dc96b15fb9ffcc311c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 18]: /images/20220422/778f667097b940dfa3f5153b4a9823ba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 19]: /images/20220422/fb47283845e74e639ef91a30d4d38e67.png