前端的第二十一天(BOM 浏览器对象模型)

前端的第二十一天(BOM 浏览器对象模型)

一、BOM 浏览器对象模型

在这里插入图片描述

1.BOM 概述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.window 对象的常见事件

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.定时器

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

4.JS执行机制

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

5.location 对象

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

    <style>
        div {
    
    
            width: 100px;
            height: 50px;
            border: 1px solid black;
            text-align: center;
            line-height: 50px;
        }
        span {
    
    
            display: none;
        }
    </style>
</head>
<body>
    <div>点击跳转</div>
    <span></span>
    <script>
        var div = document.querySelector('div');
        var span = document.querySelector('span');
        var time = 5;
        fn();
        div.addEventListener('click',function(){
    
    
            span.style.display = 'block';
            setInterval(fn,1000);
        })

        function fn(){
    
    
            if(time==0){
    
    
                location.href = 'http://www.baidu.com' ;
            }else{
    
    
                span.innerHTML = '页面将在'+ time +'跳转' ;
                time--;
            }
        }
    </script>

在这里插入图片描述

6.navigator 对象

在这里插入图片描述

7.history 对象

在这里插入图片描述
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/m0_56901161/article/details/121545376
今日推荐