JavaScript详解（7.对话框和DOM、BOM、JavaScript对象）

你的名字 2023-07-01 08:48 29阅读 0赞

### 文章目录 ###

*  一，对话框
 *   *  一，对话框的分类
     *   *  1，警告框
         *  2，询问框
         *  3，确认框
 *  二，DOM对象
 *   *  一，DOM Event 对象
     *  二，DOM Document 对象【window.document.】
     *  三，DOM Element 对象【元素对象】
     *  四，DOM Attribute 对象【访问元素中的属性，先得到元素，再根据元素去访问属性】
 *  三，BOM对象
 *   *  一，Window
     *  二，Screen
     *  三，Location
     *  四，History
     *  五，Cookies【熟悉】
 *  四，JavaScript对象
 *   *  一，Date
     *  二，Math
     *  三，自定义对象

# 一，对话框 #

## 一，对话框的分类 ##

1.  警告框 alert, 常用。
2.  询问框 返回提示框中的值。
3.  确认框 返回true/false.

### 1，警告框 ###

> alert(‘警告的内容’);

### 2，询问框 ###

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

var name = prompt("您没有登录，请输入用户名：");
      alert("your name: " + name);

### 3，确认框 ###

1.               var isLogin = confirm("您确认登录吗？");
    2.                if (isLogin) {
    3.                    alert("您同意登录");
    4.                }
    5.                else {
    6.                    alert("您不同意登录");
    7.                   // alert("您不同意登录2");
    8.                }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjIzNDQ3_size_16_color_FFFFFF_t_70 1]

# 二，DOM对象 #

HTML DOM 树  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjIzNDQ3_size_16_color_FFFFFF_t_70 2]

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

简单的说，就是文档内部的一些”对话“

1.  JavaScript 能够改变页面中的所有 HTML 元素
2.  JavaScript 能够改变页面中的所有 HTML 属性
3.  JavaScript 能够改变页面中的所有 CSS 样式
4.  JavaScript 能够对页面中的所有事件做出反应

## 一，DOM Event 对象 ##

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用，函数不会在事件发生前被执行！

1，事件句柄　(Event Handlers) 也就是事件触发源

HTML 4.0 的新特性之一是能够使 HTML 事件触发浏览器中的行为，比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，可将之插入 HTML 标签以定义事件的行为。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjIzNDQ3_size_16_color_FFFFFF_t_70 3]  
2，鼠标 / 键盘属性  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjIzNDQ3_size_16_color_FFFFFF_t_70 4]  
3，IE 属性

除了上面的鼠标/事件属性，IE 浏览器还支持下面的属性：【基本不怎么用，IE是个奇葩】  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjIzNDQ3_size_16_color_FFFFFF_t_70 5]  
4，相关实例

<html>
    <head>
    <script type="text/javascript"> function whichButton(event) { var btnNum = event.button; if (btnNum==2) { alert("您点击了鼠标右键！") } else if(btnNum==0) { alert("您点击了鼠标左键！") } else if(btnNum==1) { alert("您点击了鼠标中键！"); } else { alert("您点击了" + btnNum+ "号键，我不能确定它的名称。"); } } </script>
    </head>
    <body onmousedown="whichButton(event)">
    <p>请在文档中点击鼠标。一个消息框会提示出您点击了哪个鼠标按键。</p>
    </body>
    </html>

得到客户端的坐标

<html>
    <head>
    <script type="text/javascript"> function show_coords(event) { x=event.clientX y=event.clientY alert("X 坐标: " + x + ", Y 坐标: " + y) } </script>
    </head>
    <body onmousedown="show_coords(event)">
    <p>请在文档中点击。一个消息框会提示出鼠标指针的 x 和 y 坐标。</p>
    </body>
    </html>

得到键盘的事件

<html>
    <head>
    <script type="text/javascript"> function whichButton(event) { alert(event.keyCode) } </script>
    </head>
    <body onkeyup="whichButton(event)">
    <p><b>注释：</b>在测试这个例子时，要确保右侧的框架获得了焦点。</p>
    <p>在键盘上按一个键。消息框会提示出该按键的 unicode。</p>
    </body>
    </html>

得到屏幕的坐标

<html>
    <head>
    <script type="text/javascript"> function coordinates(event) { x=event.screenX y=event.screenY alert("X=" + x + " Y=" + y) } </script>
    </head>
    <body onmousedown="coordinates(event)">
    <p>
    在文档中点击某个位置。消息框会提示出指针相对于屏幕的 x 和 y 坐标。
    </p>
    </body>
    </html>

## 二，DOM Document 对象【window.document.】 ##

每个载入浏览器的 HTML 文档都会成为 Document 对象。

Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

提示: Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

Document 对象集合  
![在这里插入图片描述][20200120155627977.png]  
Document 对象属性  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjIzNDQ3_size_16_color_FFFFFF_t_70 6]  
Document 对象方法  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjIzNDQ3_size_16_color_FFFFFF_t_70 7]  
Document 对象描述

HTMLDocument 接口对 DOM Document 接口进行了扩展，定义 HTML 专用的属性和方法。

很多属性和方法都是 HTMLCollection 对象（实际上是可以用数组或名称索引的只读数组），其中保存了对锚、表单、链接以及其他可脚本元素的引用。

这些集合属性都源自于 0 级 DOM。它们已经被 Document.getElementsByTagName() 所取代，但是仍然常常使用，因为他们很方便。

write() 方法值得注意，在文档载入和解析的时候，它允许一个脚本向文档中插入动态生成的内容。

注意，在 1 级 DOM 中，HTMLDocument 定义了一个名为 getElementById() 的非常有用的方法。在 2 级 DOM 中，该方法已经被转移到了 Document 接口，它现在由 HTMLDocument 继承而不是由它定义了。

以上说明的使用方法是document.xxxx 或者 window.document.xxx

## 三，DOM Element 对象【元素对象】 ##

在 HTML DOM 中，Element 对象表示 HTML 元素。

Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。

NodeList 对象表示节点列表，比如 HTML 元素的子节点集合。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjIzNDQ3_size_16_color_FFFFFF_t_70 8]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjIzNDQ3_size_16_color_FFFFFF_t_70 9]

## 四，DOM Attribute 对象【访问元素中的属性，先得到元素，再根据元素去访问属性】 ##

在 HTML DOM （文档对象模型）中，每个部分都是节点：

文档本身是文档节点

所有 HTML 元素是元素节点

所有 HTML 属性是属性节点

HTML 元素内的文本是文本节点

注释是注释节点cookie

注意，要访问属性必须是document文档加载完成才能访问，也就是script代码必须写到body之后

属性  
![在这里插入图片描述][20200120160136626.png]

> document.getElementsByTagName(“button”)\[0\].attributes\[0\].name;

# 三，BOM对象 #

前言

1.  定义：浏览器对象模型（Browser Object Model）尚无正式标准。
2.  作用：浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”。

由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是 BOM 的方法和属性。

1.  以下是所有的BOM对象

*  Window【掌握】
 *  Screen【掌握】
 *  Location【掌握】
 *  History【掌握】
 *  Navigator
 *  PopupAlert
 *  Timing
 *  Cookies【熟悉】

## 一，Window ##

注意：Window 和window不是同一个东西

1.window.name=1;  
    2.console.log(Window.name);//Window  
    3.console.log(window.name);//1  
    4.console.log(window instanceof  Window);//true

从上面的代码可以看出来Window并不等于window 通过instanceof进行判断window是Window的实例

1，所有浏览器都支持 window 对象。它表示浏览器窗口。

*  所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
 *  全局变量是 window 对象的属性。
 *  全局函数是 window 对象的方法。
 *  甚至 HTML DOM 的 document 也是 window 对象的属性之一：

> window.document.getElementById(“header”);

与下面的代码相同：

> document.getElementById(“header”);

2，Window 尺寸

有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

window.innerHeight - 浏览器窗口的内部高度

window.innerWidth - 浏览器窗口的内部宽度

对于 Internet Explorer 8、7、6、5：

document.documentElement.clientHeight

document.documentElement.clientWidth

或者

document.body.clientHeight

document.body.clientWidth

实用的 JavaScript 方案（涵盖所有浏览器）：

1.<!DOCTYPE html>
    2.<html>
    3.<body>
    4.
    5.<p id="demo"></p>
    6.
    7.<script> 8.var w=window.innerWidth 9.|| document.documentElement.clientWidth 10.|| document.body.clientWidth; 11. 12.var h=window.innerHeight 13.|| document.documentElement.clientHeight 14.|| document.body.clientHeight; 15. 16.x=document.getElementById("demo"); 17.x.innerHTML="浏览器的内部窗口宽度：" + w + "，高度：" + h + "。" 18.</script>
    19.
    20.</body>
    21.</html>

其他 Window 方法

一些其他方法：

window.open(‘http://www.baidu.com’) - 打开新窗口

window.close() - 关闭当前窗口 只能关闭使用window.open的窗口

window.moveTo(x,y) - 移动当前窗口

window.resizeTo(width,height) - 调整当前窗口的尺寸

window.setInterval(code,millisec\[,“lang”\])

1.<html>
    2.<body>
    3.
    4.<input type="text" id="clock" size="35" />
    5.<script language=javascript> 6.var int=self.setInterval("clock()",50) 7.function clock() 8. { 9. var t=new Date() 10. document.getElementById("clock").value=t 11. } 12.</script>
    13.<button onclick="int=window.clearInterval(int)">Stop interval</button>
    14.
    15.</body>
    16.</html>

window.setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。

一个时钟

1.<!DOCTYPE html>
    2.<html>
    3.    <head>
    4.        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    5.        <title>Untitled Document</title>
    6.        <script> 7. function showtime(){ 8. var d=new Date(); 9. var year=d.getFullYear(); 10. var month=d.getMonth(); 11. var day=d.getDay(); 12. var hours=d.getHours(); 13. var min=d.getMinutes(); 14. var sec=d.getSeconds(); 15. var misec=d.getMilliseconds(); 16. var str=year+"-"+month+"-"+day+" "+hours+":"+min+":"+sec+":"+misec; 17. var mytime=window.document.getElementById("mytime"); 18. mytime.innerHTML=str; 19. window.setTimeout('showtime()',1000); 20. } 21. </script>
    22.    </head>
    23.    <body onload="showtime()">
    24.       	<div id="mytime" style="border: 2px solid; border-color: green;color: red;">
    25.       	</div>
    26.    </body>
    27.
    28.</html>

![在这里插入图片描述][20200120162203574.png]

## 二，Screen ##

window.screen 对象包含有关用户屏幕的信息。

window.screen 对象在编写时可以不使用 window 这个前缀。

一些属性：

screen.availWidth - 可用的屏幕宽度

screen.availHeight - 可用的屏幕高度

可以宽度 screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏。

可用高度 screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如窗口任务栏。

## 三，Location ##

window.location 对象在编写时可不使用 window 这个前缀。

对象属性  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjIzNDQ3_size_16_color_FFFFFF_t_70 10]  
对象方法  
![在这里插入图片描述][20200120162359696.png]

> window.location.replace(“http://www.w3school.com.cn”)

> window.location.assign(“http://www.w3school.com.cn”)

## 四，History ##

History 对象包含用户（在浏览器窗口中）访问过的 URL。

History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。

注释：没有应用于 History 对象的公开标准，不过所有浏览器都支持该对象。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjIzNDQ3_size_16_color_FFFFFF_t_70 11]  
**例子**

下面一行代码执行的操作与单击后退按钮执行的操作一样：

> history.back()

下面一行代码执行的操作与单击两次后退按钮执行的操作一样：

> history.go(-2)

## 五，Cookies【熟悉】 ##

1，创建Cookie

JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookie。

JavaScript 中，创建 cookie 如下所示：

document.cookie=“username=Leijh”;

您还可以为 cookie 添加一个过期时间（以 UTC 或 GMT 时间）。默认情况下，cookie 在浏览器关闭时删除：document.cookie=“username=Leijh; expires=Thu, 18 Dec 2017 12:00:00 GMT”;

您可以使用 path 参数告诉浏览器 cookie 的路径。默认情况下，cookie 属于当前页面。

document.cookie=“username=Leijh; expires=Thu, 18 Dec 2017 12:00:00 GMT; path=/”;

2,读取 Cookie

在 JavaScript 中, 可以使用以下代码来读取 cookie：

var x = document.cookie;

注意：document.cookie 将以字符串的方式返回所有的 cookie，类型格式： cookie1=value; cookie2=value; cookie3=value;

3，修改 Cookie

在 JavaScript 中，修改 cookie 类似于创建 cookie，如下所示：

document.cookie=“username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/”;

旧的 cookie 将被覆盖。

4，删除 Cookie

删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可，如下所示，设置为 Thu, 01 Jan 1970 00:00:00 GMT:

document.cookie = “username=; expires=Thu, 01 Jan 1970 00:00:00 GMT”;

注意，当您删除时不必指定 cookie 的值。

5，完整实例

1.<!DOCTYPE html>
    2.<html>
    3.<head>
    4.<meta charset="utf-8">
    5.<title>Cookies的使用</title>
    6.</head>
    7.<head>
    8.<script> 9.function setCookie(cname,cvalue,exdays){ 10. var d = new Date(); 11. d.setTime(d.getTime()+(exdays*24*60*60*1000)); 12. var expires = "expires="+d.toGMTString(); 13. document.cookie = cname+"="+cvalue+"; "+expires; 14.} 15.function getCookie(cname){ 16. var name = cname + "="; 17. var ca = document.cookie.split(';'); 18. for(var i=0; i<ca.length; i++) { 19. var c = ca[i].trim(); 20. if (c.indexOf(name)==0) return c.substring(name.length,c.length); 21. } 22. return ""; 23.} 24.function checkCookie(){ 25. var user=getCookie("username"); 26. if (user!=""){ 27. alert("Welcome again " + user); 28. } 29. else { 30. user = prompt("Please enter your name:",""); 31. if (user!="" && user!=null){ 32. setCookie("username",user,30); 33. } 34. } 35.} 36.</script>
    37.</head>
    38.	
    39.<body onload="checkCookie()"></body>
    40.	
    41.</html>

# 四，JavaScript对象 #

## 一，Date ##

[http://www.w3school.com.cn/jsref/jsref\_obj\_date.asp][http_www.w3school.com.cn_jsref_jsref_obj_date.asp]

## 二，Math ##

[http://www.w3school.com.cn/jsref/jsref\_obj\_math.asp][http_www.w3school.com.cn_jsref_jsref_obj_math.asp]

## 三，自定义对象 ##

1.<script type="text/javascript"> 2. function Person(name,age){ 3. this.name=name; 4. this.age=age; 5. } 6. Person.prototype.sayHello=function(){ 7. alert("使用原型得到Name："+this.name); 8. } 9. var per=new Person("马小倩",21); 10. per.sayHello(); //输出：使用原型得到Name:马小倩 11. 12. 13. function Student(){ } 14. Student.prototype=new Person("洪如彤",21); 15. var stu=new Student(); 16. Student.prototype.grade=5; 17. Student.prototype.intr=function(){ 18. alert(this.grade); 19. } 20. stu.sayHello();//输出：使用原型得到Name:洪如彤 21. stu.intr();//输出：5 22.</script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjIzNDQ3_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200120153658469.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjIzNDQ3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjIzNDQ3_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200120153829398.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjIzNDQ3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjIzNDQ3_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200120154019944.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjIzNDQ3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjIzNDQ3_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200120154409855.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjIzNDQ3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjIzNDQ3_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200120154440751.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjIzNDQ3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjIzNDQ3_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200120154519426.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjIzNDQ3,size_16,color_FFFFFF,t_70
[20200120155627977.png]: https://img-blog.csdnimg.cn/20200120155627977.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjIzNDQ3_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/2020012015571623.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjIzNDQ3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjIzNDQ3_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20200120155744699.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjIzNDQ3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjIzNDQ3_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20200120155924299.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjIzNDQ3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjIzNDQ3_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20200120155955506.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjIzNDQ3,size_16,color_FFFFFF,t_70
[20200120160136626.png]: https://img-blog.csdnimg.cn/20200120160136626.png
[20200120162203574.png]: https://img-blog.csdnimg.cn/20200120162203574.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjIzNDQ3_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20200120162336156.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjIzNDQ3,size_16,color_FFFFFF,t_70
[20200120162359696.png]: https://img-blog.csdnimg.cn/20200120162359696.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjIzNDQ3_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20200120162509214.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjIzNDQ3,size_16,color_FFFFFF,t_70
[http_www.w3school.com.cn_jsref_jsref_obj_date.asp]: http://www.w3school.com.cn/jsref/jsref_obj_date.asp
[http_www.w3school.com.cn_jsref_jsref_obj_math.asp]: http://www.w3school.com.cn/jsref/jsref_obj_math.asp