【BOM笔记】基本概述、window对象常见事件、定时器、JS执行机制、location/navigator/history对象

文章目录

    • 1 BOM概述
      • 1.1 什么是BOM
      • 1.2 BOM的构成
    • 2 window 对象的常见事件
      • 2.1 窗口加载事件
      • 2.2 调整窗口大小事件
    • 3 定时器
      • 3.1 `setTimeout()` 定时器
      • 3.2 `setInterval()` 定时器
      • 3.3 this
    • 4 JS 执行机制
      • 4.1 JS 是单线程
      • 4.2 同步和异步
      • 4.3 JS 执行机制
    • 5 `location` 对象
      • 5.1 属性
      • 5.2 方法
    • 6 `navigator` 对象
    • 7 `history` 对象

1 BOM概述

1.1 什么是BOM

  • BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。
  • BOM 由 一系列相关的对象构成 ，并且每个对象都提供了很多方法与属性。
  • BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C，BOM 最初是Netscape 浏览器标准的一部分，兼容性较差。
    在这里插入图片描述

1.2 BOM的构成

BOM 比 DOM 更大，它包含 DOM。

image-20231221113456899

window 对象是浏览器的顶级对象，它具有双重角色。

  1. 它是 JS 访问浏览器窗口的一个接口。
  2. 它是一个全局对象。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法。但是在调用的时候可以省略 window，前面学习的对话框都属于 window 对象方法，如 alert()、prompt() 等。

注意：window下的一个特殊属性window.name本身是有含义的，因此声明变量时最好不用name。

2 window 对象的常见事件

2.1 窗口加载事件

窗口 (页面）加载事件：当**文档内容完全加载完成**后会触发该事件(包括图像、脚本文件、CSS…)，调用后面的处理函数，方法有以下两种：

// 传统方法
window.onload = function(){}  // 只能写一次
// 新方法
window.addEventListener("load",function(){});  // 没有次数限制

只要DOM加载完毕（不包含图片、falsh、CSS…）就可以触发该事件，调用后面的处理函数，加载速度比load更快一些（Ie9以上才支持，图片较多时用）

// 只加载完DOM就开始调用处理函数
window.addEventListener('DOMContentLoaded',function(){});   // 图片较多时用

例子：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>   // 有了窗口 (页面）加载事件，就可以把script标签放在head中或其他地方了// 一、传统方法 `window.onload = function(){}`window.onload = function() {var btn = document.querySelector('button');btn.addEventListener('click', function() {alert('点击我');})}window.onload = function() {   // 出现多个`window.onload`后，上面的'点击我事件'会被覆盖，只出现'22'alert(22);}// 二、新方法 `window.addEventListener("load",function(){});`window.addEventListener('load', function() {var btn = document.querySelector('button');btn.addEventListener('click', function() {alert('点击我');})})window.addEventListener('load', function() {alert(22);    // '点击我'和'22'两个事件都有效，不会覆盖})// 三、DOM加载完毕就可以执行，图片较多时用 						`window.addEventListener('DOMContentLoaded',function(){});`document.addEventListener('DOMContentLoaded', function() {alert(33);    // 最先弹出，加载时间最快})</script>
</head><body><button>点击</button>
</body></html>

注意：

  1. 有了窗口 (页面）加载事件就可以把 JS 代码写到页面元素的上方（head中），该事件是等页面内容全部加载完毕，再去执行处理函数。
  2. window.onload = function(){} 传统注册事件方式只能写一次，如果有多个，会以最后一个为准。
  3. window.addEventListener("load",function(){});没有使用次数限制
  4. 如果页面的图片很多的话，从用户访问到onload触发可能需要较长的时间，交互效果就不能实现，必然影响用户的体验，此时用window.addEventListener('DOMContentLoaded',function(){});事件比较合适

2.2 调整窗口大小事件

我们经常利用这个窗口大小事件完成 响应式布局。 使用window.innerWidth得到当前窗口的宽度，当窗口小于某个值，就让页面中某个（列）元素进行隐藏。

window.onresize = function(){}    // 只要窗口大小发生像素变化，就会触发这个事件
window.addEventListener("resize",function(){});

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div {width: 200px;height: 200px;background-color: pink;}</style>
</head><body><script>window.addEventListener('load', function() {   // script写在了div上面，因此要loadvar div = document.querySelector('div');window.addEventListener('resize', function() {  // 窗口发生变化就触发以下内容console.log(window.innerWidth);  // 窗口宽度实时变化if (window.innerWidth <= 800) {div.style.display = 'none';  // 窗口宽度<800px，div隐藏} else {div.style.display = 'block';}})})</script><div></div>
</body></html>

3 定时器

window 对象下有2个非常好用定时器：

  • window.setTimeout(function() {...}, 2000); 在2s后执行function
  • setInterval(function() {...}, 2000); 每隔2s就执行一次function

3.1 setTimeout() 定时器

window.setTimeout(function() {}, [延迟的毫秒数]);    // 在定时器到期后执行调用函数,[...]内的参数可以省略，默认为0立马执行

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><script>// 函数写法一：直接写函数（window可以省略）setTimeout(function() {    console.log('时间到了');  // 2s后出现该语句}, 2000);function callback() {    console.log('爆炸了');}// 函数写法二setTimeout(callback, 3000); // 函数写法三：不提倡（比二啰嗦）setTimeout('callback()', 3000);  var timer1 = setTimeout(callback, 3000);  // 页面中可能有很多的定时器，需要给定时器加标识符（名字)var timer2 = setTimeout(callback, 5000);</script>
</body></html>

回调函数：

  • 普通函数是按照代码顺序直接调用。 而setTimeout() 需要等待时间，时间到了才去调用这个函数，因此称为回调函数callback 。
  • 以前我们讲的 element.onclick = function(){}或者 element.addEventListener(“click”, fn); 里面的函数也是回调函数。

案例：5秒后广告自动关闭

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><img src="images/ad.jpg" alt="" class="ad"><script>var ad = document.querySelector('.ad');setTimeout(function() {ad.style.display = 'none';   // 5s后图片隐藏}, 5000);</script>
</body></html>

停止setTimeout() 定时器:

window.clearTimeout(timeoutID)  // 取消先前通过调用`setTimeout()`建立的定时器，`timeoutID`参数为定时器名字

案例：点击按钮，关闭定时炸弹

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><button>点击停止定时器</button><script>var btn = document.querySelector('button');var timer = setTimeout(function() {console.log('爆炸了');}, 5000);btn.addEventListener('click', function() {clearTimeout(timer);  // 点击按钮，停止`timer`(window 可以省略)})</script>
</body></html>

3.2 setInterval() 定时器

window.setInterval(function() {}, [间隔的毫秒数]);  // 每间隔一段时间，就反复调用一次函数

案例：秒杀倒计时，数字不断自动变化

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div {margin: 200px;}span {display: inline-block;width: 40px;height: 40px;background-color: #333;font-size: 20px;color: #fff;text-align: center;line-height: 40px;}</style>
</head><body><div><span class="hour">1</span><span class="minute">2</span><span class="second">3</span></div><script>// 1. 获取元素 var hour = document.querySelector('.hour'); // 小时的黑色盒子var minute = document.querySelector('.minute'); // 分钟的黑色盒子var second = document.querySelector('.second'); // 秒数的黑色盒子var inputTime = +new Date('2024-1-1 12:00:00'); // 秒杀活动截至时间countDown(); // 我们先提前调用一次这个函数（不等那1s），防止第一次刷新页面有空白// 2. 开启定时器setInterval(countDown, 1000);   // 每隔1s调用一次cutDown，刷新页面后要等1S才调用，这样用户体验不好，因此要在上面提前调用一次`countDown();`function countDown() {   // 时间差var nowTime = +new Date();  // 返回的是当前时间总的毫秒数var times = (inputTime - nowTime) / 1000;  // times是剩余时间总的秒数，inputTime是全局变量可以调用var h = parseInt(times / 60 / 60 % 24); // 时h = h < 10 ? '0' + h : h;hour.innerHTML = h;  // 把剩余的小时给`小时黑色盒子`var m = parseInt(times / 60 % 60);  // 分m = m < 10 ? '0' + m : m;minute.innerHTML = m;var s = parseInt(times % 60);  // 剩余的秒s = s < 10 ? '0' + s : s;second.innerHTML = s;}</script>
</body></html>

效果（时、分、秒 实时变化）：image-20231221162329203

停止setInterval() 定时器:

window.clearInterval(intervalID); // 取消先前通过调用`setInterval()`建立的定时器，`timeoutID`参数为定时器名字

案例1：点击按钮，开启 / 停止定时器

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><button class="begin">开启定时器</button><button class="stop">停止定时器</button><script>var begin = document.querySelector('.begin');var stop = document.querySelector('.stop');var timer = null; // 全局变量，null是一个空对象，要赋值否则undefinedbegin.addEventListener('click', function() {timer = setInterval(function() {  // 局部变量，下面函数调用不了，因此在前面声明一下变成全局变量，值都指向堆中，改同一个对象值console.log('我每秒都要叫一次');}, 1000);})stop.addEventListener('click', function() {clearInterval(timer);  // 吵死，把timer停掉！})</script>
</body></html>

案例2：发送完短信60s内不能再次点击

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body>手机号码： <input type="number"> <button>发送</button><script>var btn = document.querySelector('button');var time = 60; // 定义剩下的秒数btn.addEventListener('click', function() {btn.disabled = true;  // 按钮点击之后要对按钮禁用，disabled为true var timer = setInterval(function() {if (time == 0) {    // 倒计时结束clearInterval(timer);  // 清除定时器btn.disabled = false;  // 复原按钮点击功能btn.innerHTML = '发送';  // 复原按钮内容time = 60;    // 复原时间} else {btn.innerHTML = '还剩下' + time + '秒';  //button里面的内容通过innerHTML修改time--;}}, 1000);})</script>
</body></html>

3.3 this

this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，一般情况下this的最终指向的是那个调用它的对象 ，注意：

  1. 全局作用域，普通函数，定时器中this指向全局对象window
  2. 方法调用中this指向谁调用该方法
  3. 构造函数中this指向构造函数的实例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><button>点击</button><script>// 1. `全局作用域`，`普通函数`，`定时器`中this指向`全局对象window`console.log(this);   // Window{...}，`全局作用域`function fn() {console.log(this); }window.fn();   // Window{...}，`普通函数`window.setTimeout(function() {console.log(this);   // Window{...}，`定时器`}, 1000);// 2. 方法调用中this指向`谁调用该方法`var o = {sayHi: function() {console.log(this);}}o.sayHi();   // {sayHi:f}，`o这个对象`var btn = document.querySelector('button');btn.onclick = function() {console.log(this);  // <button>点击</button>，`btn这个按钮对象`}btn.addEventListener('click', function() {console.log(this);  // <button>点击</button>，`btn这个按钮对象`})// 3. 构造函数中this指向`构造函数的实例`function Fun() {console.log(this); // `fun实例对象`}var fun = new Fun();</script>
</body></html>

4 JS 执行机制

4.1 JS 是单线程

单线程：JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。前一个任务结束，才会执行后一个任务。

问题： 如果中间有一块代码JS执行的时间过长，这样会影响后面代码的执行，造成页面的渲染不连贯。

解决办法：利用多核 CPU 的计算能力，HTML5 提出 Web Worker 标准，允许 JavaScript 脚本创建多个线程。于是，JS 中出现了同步和异步的概念。

4.2 同步和异步

  1. 同步

前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。（同步任务：都在主线程上执行，形成一个执行栈）

  1. 异步

程序的执行顺序与任务的排列顺序通常不一致。（异步任务 ：JS 的异步是通过回调函数实现的。相关回调函数添加到任务队列/消息队列中）

一般异步任务有以下三种类型:

  • 普通事件，如 click、resize 等
  • 资源加载，如 load、error 等
  • 定时器，包括 setInterval、setTimeout 等

image-20231221172746436

4.3 JS 执行机制

  1. 先执行执行栈中的同步任务。
  2. 异步任务（回调函数）放入任务队列中。
  3. 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

打印顺序：123

image-20231221164626964

由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为**事件循环（event loop）**。

5 location 对象

location对象：window 对象下的 location 属性用于获取或设置窗体的URL，并且可以用于解析URL。 因为这个属性返回的是一个对象，所以我们将这个属性也称为 location 对象。

**URL：**统一资源定位符 (Uniform Resource Locator, URL) 是互联网上标准资源的地址。互联网上的每个文件都有 一个唯一的 URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。

// URL的一般语法格式：
protocol://host[:port]/path/[?query]#fragment
// 例如：
http://www.itcast.cn/index.html?name=andy&age=18#link

image-20231221164754850

5.1 属性

image-20231221184743827

案例1：5秒钟之后自动跳转页面

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><button>点击</button><div></div><script>var btn = document.querySelector('button');var div = document.querySelector('div');btn.addEventListener('click', function() {// console.log(location.href);location.href = 'http://www.itcast.cn';  // 点击按钮后跳转到新页面})var timer = 5;   // 5秒后自动跳转到新页面setInterval(function() {if (timer == 0) {location.href = 'http://www.itcast.cn';} else {div.innerHTML = '您将在' + timer + '秒钟之后跳转到首页';timer--;}}, 1000);</script>
</body></html>

案例2：URL参数数据在不同页面传递

第一个页面：登陆页面 login.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><form action="index.html">  <!-- 用action，把表单提交到index.html -->用户名： <input type="text" name="uname"><input type="submit" value="登录"></form>
</body></html>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

在login.html页面中输入用户名前：image-20231221190440085

输入andy后，跳往index.html，保存了uname：外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

第二个页面：欢迎页面 index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><div></div><script>console.log(location.search); // ?uname=andyvar params = location.search.substr(1); // 先去掉'？'，substr('起始的位置'，截取几个字符);substr(1)为从索引号1开始，取到剩下所有字符console.log(params);  // uname=andyvar arr = params.split('='); // 利用=把字符串分割为数组 split('=');console.log(arr); // ["uname", "andy"]var div = document.querySelector('div');div.innerHTML = arr[1] + '欢迎您';  // 把数据写入div中</script>
</body></html>

跳转后效果：image-20231221190806098

5.2 方法

image-20231221185335249

6 navigator 对象

navigator 对象： 包含有关浏览器的信息（用户用的PC端还是移动端？什么浏览器？浏览器版本号？电脑的系统版本号？），它有很多属性，我们最常用的是userAgent，该属性可以返回由客户机发送服务器的user-agent头部的值。

下面前端代码可以判断用户那个终端打开页面，实现跳转

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {window.location.href = "";   // 手机
} else { window.location.href = "";   // 电脑
}

7 history 对象

history 对象： 与浏览器历史记录进行交互，对象包含用户（在浏览器窗口中）访问过的 URL。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

history 对象一般在实际开发中比较少用，但是会在一些 OA 办公系统中见到

image-20231221185551354

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/541716.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【bioinformation 6】分子对接

【bioinformation 6】分子对接

&#x1f31e;欢迎来到机器学习的世界 &#x1f308;博客主页&#xff1a;卿云阁 &#x1f48c;欢迎关注&#x1f389;点赞&#x1f44d;收藏⭐️留言&#x1f4dd; &#x1f31f;本文由卿云阁原创&#xff01; &#x1f4c6;首发时间&#xff1a;&#x1f339;2024年3月15日&…
阅读更多...
APP自动化测试-Appium Inspector入门操作指南

APP自动化测试-Appium Inspector入门操作指南

上一篇博客APP自动化测试-入门示例-CSDN博客介绍了APP自动化测试的入门示例，下面详细介绍下Appium 实现的页面元素查看器工具：Appium Inspector的使用方法。 Appium Inspector简介 Appium Inspector 是 Appium 测试框架中的一个工具，用于可视化和调试移动应用程序的 UI 结…
阅读更多...
关系代数-练习

关系代数-练习

设有一个SPJ数据库&#xff0c;包括4个关系模式S、P、J和 SPJ。 S(SNO, SNAME,STATUS,CITY) ; P(PNO,PNAME,COLOR,WEICHT) ; J(JNO,JNAME,CITY); SPJ(SNO,PNO,JNO,QTY)。 供应商表S由供应商代码(SNO)、供应商姓名(SNAME)、供应商状态(STATUS)、供应商…
阅读更多...
苍穹外卖问题记录（持续更新）

苍穹外卖问题记录（持续更新）

Day01_3.2.4前后端联调 1. 前端无法登录 &#xff08;1&#xff09;确保nginx服务器已经启动 &#xff08;2&#xff09;查看自己数据库的用户名和密码是否和老师的一样&#xff0c;不一样的话需要在application-dev.yml文件中把老师的用户名密码修改成自己的 老师的用户名…
阅读更多...
Spring-1

Spring-1

目录 概念 优点 Autowired和Resource关键字 相同点 不同点 依赖注入的三种方式 概念 Spring 是个java企业级应用的开源开发框架。Spring主要用来开发Java应用&#xff0c;但是有些扩展是针对构建J2EE&#xff08;Java平台企业版&#xff09;平台的web应用。Spring 框架目…
阅读更多...
【C++】实现红黑树

【C++】实现红黑树

目录 一、认识红黑树1.1 概念1.2 定义 二、实现红黑树2.1 插入2.2 与AVL树对比 一、认识红黑树 1.1 概念 红黑树是一个二叉搜索树&#xff0c;与AVL树相比&#xff0c;红黑树不再使用平衡因子来控制树的左右子树高度差&#xff0c;而是用颜色来控制平衡&#xff0c;颜色为红色…
阅读更多...
VS2022一个项目中运行多个c++程序

VS2022一个项目中运行多个c++程序

VS2022一个项目中运行多个c程序设置 问题情况解决 问题 一般使用vs2022都需要配置好一些路径依赖&#xff0c;但一个项目中只能使用一个源文件&#xff0c;这也是为了避免找不到那些依赖&#xff0c;可是我们就是想为了可以快速编写&#xff0c;而不是浪费在那些配置环境的时间…
阅读更多...
面试常问：你在项目中遇到了哪些比较棘手的问题?怎么解决的？

面试常问：你在项目中遇到了哪些比较棘手的问题?怎么解决的？

你在项目中遇到了哪些比较棘手的问题?怎么解决的&#xff1f;这个问题是面试官经常会问的一个问题。 如果你回答我在项目中没有怎么遇到&#xff0c;那么面试官会觉得你什么都不会&#xff0c;对项目了解也不够深入也没有负责什么项目。 面试官其实还挺关心的是应聘者的问题…
阅读更多...
【IJCAI】CostFormer即插即用的MVS高效代价体聚合Transformer，FaceChain团队出品

【IJCAI】CostFormer即插即用的MVS高效代价体聚合Transformer，FaceChain团队出品

一、论文题目&#xff1a; CostFormer: Cost Transformer for Cost Aggregation in Multi-view Stereo&#xff0c;https://arxiv.org/abs/2305.10320 二、论文简介&#xff1a; 多视角立体是三维重建的一种重要实现方式&#xff0c;该方式会从一系列同一场景但不同视角的二维…
阅读更多...
Navicat破解 Navicat下载安装 附教程 免费

Navicat破解 Navicat下载安装 附教程 免费

百度网盘&#xff1a;https://pan.baidu.com/s/1wRRN_18_uXxPiIWCS4l43A 麻烦各位师傅帮忙填写一下问卷&#xff0c;提取码在问卷填写结束后显示~ 【https://www.wjx.cn/vm/mBBTTKm.aspx# 】 &#xff08;资料来源于网络&#xff0c;侵告删&#xff09;
阅读更多...
【Spring IOC/DI】bean 的 5 种注册 与 5 种注入

【Spring IOC/DI】bean 的 5 种注册 与 5 种注入

什么是 bean 一个 bean 就是一个实例化对象 User user new User() 上面这行代码中的 user&#xff0c; 就是 User 类的实例化对象&#xff0c;即一个 bean&#xff08;User Bean&#xff09; 什么是 IOC Inversion of Control 控制反转&#xff08;反转对 bean 的控制&#…
阅读更多...
虚拟机开机字体变大，进入系统后字体模糊

虚拟机开机字体变大，进入系统后字体模糊

问题 虚拟机开机字体变大&#xff0c;进入系统后字体模糊。 原因 虚拟机配置问题。 解决办法 修改配置为如下:
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023