javascript BOM 浏览器对象模型

前端精进 专栏收录该内容
32 篇文章 1 订阅
BOM (Browser Object Model,即浏览器对象模型) 页面以外事物所拥有的对象(即浏览器窗口和桌面屏幕)
BOM是一个用于访问浏览器和计算机屏幕的对象集合

//一、window对象
//window对象可提供各自关于浏览器环境的私有数据
//1.window.navigator
/**
 * navigator是一个用于反映浏览器本身以及功能信息的对象
 * navigator.userAgent是一个用于浏览器识别的长字符串
 */
//浏览器版本识别代码
js代码示例
//用户代理检测法应该尽少使用,因为在某些浏览器中,用户是可以对该字符串进行修改,并伪装成其他浏览器
if(window.navigator.userAgent.indexOf('MSIE') !== -1){
    //this is IE
}else if(window.navigator.userAgent.indexOf('Chrome') !== -1){
    //this is Chrome
}else if(window.navigator.userAgent.indexOf('Firefox') !== -1){
    //this is Firefox
}else{
    //this not 三大浏览器
}
//特性监听法(功能检测法)
js代码示例
if(typeof window.addEventListener === 'function'){
    //Chrome、Firefox下为true
}else{
    //IE为false
}

/**
 * window下的一些对象
 * window.location 一个用于当前载入页面url信息的对象
 * window.history 允许我们在同一个浏览器会话中存储有限数量的访问记录
 */

//2.window.setTimeout():用于在指定的毫秒数后执行某段既定代码
//功能:用于在指定的毫秒数后调用函数或计算表达式。
//语法:setTimeout(code,millisec)
//参数:
//code:在定时时间到时要执行的JavaScript代码串。
//millisec:设定的定时时间,用毫秒数表示。
//返回值:定时器的ID值,可用于clearTimeout()方法停止指定的定时器。
//注:setTimeout()只执行code一次。如果要多次调用,可使用setInterval()或者让code自身再次调用setTimeout()。
js代码示例
function boo(){
    alert('Boo!');
}
window.setTimeout(boo,200);

//3.window.clearTimeOut():
//功能:取消由setTimeout()方法设置的定时器。
//语法:clearTimeout(id_of_settimeout)
//参数:
//id_of_settimeout:由setTimeout()返回的ID值。该值标识了一个setTimeout定时器。
js代码示例
function timeCount(){
    timeId = window.setTimeout(boo,200);
}
function stopCount(){
    window.clearTimeout(timeId);
}

//4.window.setInterval():用于每隔一段毫秒数重新执行这段代码
/*
 功能:按照指定的周期(以毫秒计)来调用函数或计算表达式。
 语法:setInterval(code,millisec)
 解释:code:在定时时间到时要执行的JavaScript代码串。
 millisec:设定的定时时间,用毫秒数表示。
 返回值:定时器的ID值,可用于clearInterval()方法停止指定的定时器
*/
js代码示例
function boo(){
    alert('Boo!');
}
window.setInterval(boo,200);

//5.window.clearInterval()
/*
 功能:取消由setInterval()方法设置的定时器。
 语法:clearInterval(id_of_setinterval)
 解释:id_of_setinterval:由setInterval()返回的ID值。该值标识了一个setInterval定时器。
 也就是:window.setInterval()返回的就是window.clearInterval的参数
*/
js代码示例
function timeCount(){
    timeId = window.setInterval(boo,200);
}
function stopCount(){
    window.clearInterval(timeId);
}
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 精致技术 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值