JavaScript 的BOM对象

JavaScript 的BOM对象

1、BOM对象的概念

  1、BOM对象——Browser Object Model，浏览器对象模型
  2、BOM提供了一个核心对象——window
  3、window核心属性

  4、window方法 alert（）、prompt（）等
  5、注意：在调用window的属性或方法是，window可以省略不写

2、window中的对话框

  1、警告框alert（）
  2、输入框prompt（）
  3、确认框confirm（），按确定按钮则返回true，其他操作均返回false

if(confirm("是否确定")){
alert("确定");
}else {
alert("取消");
}

3、window中的定时器

  1、周期性定时器
  作用：每隔一段时间后，执行一遍指定的程序
  声明：var ret = setInterval（fun，time）

  返回值：已创建好的定时器对象
  clearInterval（timer）：清除周期性定时器，timer 为已创建好的定时器

var ret;   // 全局变量
function start() {
ret = setInterval(function () {
var now = new Date();
console.log(now.toLocaleString())
},2000)
}
function stop() {
clearInterval(ret);
}
<button onclick="start()">开始定时器</button>
<button onclick="stop()">结束定时器</button>

  2、一次性定时器
  作用：在指定的时间间隔后，执行一次指定的程序
  声明：var ret = setTimeout（fun，time）

  返回值：已启动的定时器对象
  clearTimeout（timer）：清除一次性定时器，timer 为已启动的定时器

var timer;
function timeoutStart() {
if(confirm("确认打印输出吗？")){
alert("请等待5秒");
timer = setTimeout(function () {
document.write("hello world")
},5000)
}else{
alert("取消")
}
}
function timeoutStop() {
clearTimeout(timer)
}
<button onclick="timeoutStart()">开始定时器</button>
<button onclick="timeoutStop()">结束定时器</button>

4、window中的属性

  1、screen：获取客户端显示器相关信息

function screenInfo() {
var w = screen.width;
var h = screen.height;
console.log("宽度：" + w + "，高度：" + h);   // 宽度：1366，高度：768
var aw = screen.availWidth;
var ah = screen.availHeight;
console.log("可用宽度：" + aw + "，可用高度：" + ah);  // 可用宽度：1304，可用高度：768
}
<button onclick="screenInfo()">屏幕信息</button>

  2、history：包含当前串口所访问的url地址

  3、location：浏览器地址栏上的信息

function SCDN() {
location.href = "https://www.csdn.net/"
}
<button onclick="SCDN()">去往CSDN</button>

  4、navigator：浏览器的相关信息

function UA() {
console.log(navigator.userAgent);
// Mozilla/5.0 (Windows NT 6.1; Win64; x64) ....
}
<button onclick="UA()">浏览器UA</button>

  5、document ：Document Object Model，文档对象模型