BOM浏览器对象模型_bom对象模型alert-优快云博客

本文详细介绍了浏览器对象模型BOM，包括如何操作窗口、弹出对话框、定时器、浏览器尺寸、历史操作及滚动事件。通过示例展示了window对象的方法，如open()、close()、alert()、confirm()、prompt()等，并探讨了定时器setTimeout()和setInterval()的使用。此外，还涵盖了页面滚动、回退前进操作以及location对象在页面跳转和刷新中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!-- BOM 浏览器对象模型
其实就是操作浏览器的一些能力我们可以操作哪些内容:- 获取一些浏览器的相关信息（窗口的大小）- 操作浏览器进行页面跳转- 获取当前浏览器地址栏的信息- 操作浏览器的滚动条- 浏览器的信息（浏览器的版本）- 让浏览器出现一个弹出框（alert/confirm/prompt
BOM 的核心就是 window 对象window 是浏览器内置的一个对象，里面包含着操作浏览器的方法
window窗口核心对象
           常用方法
              open()   
=> 打开一个新窗口
window.open("http://www.baidu.com","",""); 
close()
               
对话框
- alert(message)  消息提示框
- confirm(提示信息) 消息确认
=> 确定和取消，提示信息
=> true  false
             prompt()
- 弹出输入框，接收你输入的信息并返回

注： window窗口对象是浏览器根对象，使用它的属性方法或子对象时，可以不加window        
  
                

     -->
</head>

<body>
    <script>
        // window.alert('消息提示框')
        // alert('消息提示框1')

        // var isDelete = confirm('确定要删除此信息吗?')
        // if(isDelete){
        //     console.log('确定删除');
        // }else{
        //     console.log('取消删除');
        // }

        //    var username = prompt('请输入用户名') // null
        //    console.log(username);

           var year = prompt('输入闰年')
           alert(year)

定时器

<!-- 
        定时器
           setTimeout()
           语法: 
             var timer = setTimeout(function(){
                  //执行的代码
              },1000) 
              
              => 倒计时定时器
                   =>到了指定时间执行回调函数中代码
                   =>返回定时器对象
            
            setInterval()
             循环执行定时器
               语法:
            var timer = setInterval(function(){
                  //执行的代码  
            },1000)       

              作用： 按照指定时间循环执行回调函数中代码

     -->

//启动循环执行的定时器
        var timerInterval = setInterval(function () {
            console.log(i--);  //先输出，再减一  5 , 4 ,3, 2, 1 
            if (i == 0) { // i:5,4,3,2,1 , 0 
                clearInterval(timerInterval) //结束指定定时器
            }
            
        }, 1000)

浏览器窗口尺寸获取

//启动循环执行的定时器
        var timerInterval = setInterval(function () {
            console.log(i--);  //先输出，再减一  5 , 4 ,3, 2, 1 
            if (i == 0) { // i:5,4,3,2,1 , 0 
                clearInterval(timerInterval) //结束指定定时器
            }
            
        }, 1000)

倒计时时间事实更新

<script src="./utils.js"></script>
    <script>
        setInterval(function () {
            var currentTime = formateCurrentDate()
            //设置div元素内容
            document.querySelector('div').innerHTML = currentTime
        }, 1000)

function formateCurrentDate() {
    var time = new Date() //当前日期时间对象
    var year = time.getFullYear() //年
    var month = time.getMonth() //月
    var date = time.getDate() //日期
    var hours = time.getHours() //小时
    var minues = time.getMinutes() //分钟
    var seconds = time.getSeconds() //秒

    //2021-12-02 15:24:49
    var dateStr = `${year}-${month+1}-${date} ${hours}:${minues}:${seconds}`
    return dateStr
}

滚动事件

window.onscroll = function(){
            // 滚动触发执行
            console.log('滚动事件 》》》》  ');
        }


//滚动事件-当滚动条滚动事触发
        window.onscroll = function(){
            // console.log('document.documentElement.scrollTop :  ', document.documentElement.scrollTop  ); //chrome 有 doctype
            // console.log('document.body.scrollTop  :', document.body.scrollTop  ); //  chrome  没doctype
            console.log('getScrollTop  :', getScrollTop()  ); //  chrome  没doctype
        }

        // 兼容性学习，获取滚动距离  0->  false  
        function getScrollTop(){
            if(document.documentElement.scrollTop){
                return document.documentElement.scrollTop
            }else{
                return document.body.scrollTop
            }

            // return document.body.scrollTop || document.documentElement.scrollTop
        }


<button onclick="backTop()">回到顶部</button>

    <script>
        /*
          回到顶部
        */
        function backTop(){
            document.documentElement.scrollTop = 0
        }

location

详情页
<h2>详情页</h2>
    <button onclick="onBack()">回退</button>

    <script>
        /*
            回退
        */
        function onBack(){
            history.back() 
        }


<h2>首页</h2>
    <!-- <a href="./detail.html">到详情页</a> -->
    <button onclick="onDetail()">查看详情页</button>
    <button  onclick="onForward()">前进 </button>
    <script>
        function onForward(){
            history.forward()
        }

        function onDetail(){
            location.href = './detail.html'
        }

 <h2>首页</h2>
    <button onclick="onBaidu()">百度</button>
    <button onclick="onLoad()">刷新页 </button>
    <script>
        console.log( location.href );
 
        function onBaidu(){
            location.href = 'http://www.baidu.com' // 执行这行人码跳转百度
        }

        function onLoad() {
            location.reload() 
          }

总结

1.获取浏览器窗口尺寸 
        宽度 window.innerWidth
        高度 window.innerHeight

2.浏览器弹出层
        提示框 window.alert()
        询问框 window.confirm()
        输入框 window.prompt()

3.开启和关闭标签页
        开启:window.open()
        关闭:window.close()

4.浏览器的历史操作
        回退:window.history.back()
        前进:window.history.forward()

5.浏览器的常见事件
        资源加载完毕:window.onload = function(){}
        页面尺寸改变:window.onresize = function(){}
        滚动条位置改变:window.onscroll = function(){}

6.浏览器卷去的尺寸 
        高度:document.documentElement.scrollTop || document.body.scrollTop
        宽度:document.documentElement.scrollLeft || document.body.scrollLeft

7.浏览器滚动到
    window.scrollTo() 
    两种方法：
    1.window.scrollTo(left,top)
    2.window.scrollTo({
        left:xx,
        top:yy,
        behavior:'smooth' 平滑模式
    })        


1.开启定时器 
间隔定时器:setInterval(函数,事件)
延时定时器:setTimeout(函数,事件)

2.定时器返回值
不区分定时器种类  表示页面上的第几个定时器 作用关闭定时器

3.关闭定时器
clearInterval(定时器返回值)
clearTimeout(定时器返回值)