Javascript的知识总结（13）-BOM

最新推荐文章于 2024-08-10 21:46:55 发布

Harry-iu

最新推荐文章于 2024-08-10 21:46:55 发布

阅读量95

点赞数

分类专栏： # JavaScript

本文链接：https://blog.csdn.net/www1577791638/article/details/113837394

版权

JavaScript 专栏收录该内容

40 篇文章 1 订阅

订阅专栏

JavaScript

来源博客：【Harryの心阁】

思维导图

什么是BOM

顶级对象是window
window.name 是特殊的属性

窗口加载事件

窗口加载事件 window.onload = function(){}等页面加载完毕，具有唯一性，层叠性，使用addEventListener则没有限制
document.addEvenListener('DOMContentLoaded',function(){})

区别：load事件是页面内容全部加载完毕，包括dom元素，图片，css等，DOMContentLoaded是DOM加载完毕就执行,不包括其他的图片等等

window.onresize()只要窗口发生变化，像素点发生变化，就执行，响应式布局
window.innerWidth可以检测屏幕的宽度
`window.setTimeout(调用函数，延时时间)，window调用可以省略，只调用一次

        setTimeout(function(){
            console.log('时间到了');
        },2000)
        function calk(){
            console.log('爆炸了');
        }
        var time1 = setTimeout(calk,3000);
        var time2 = setTimeout('calk()',3000);

回调函数callback window.SetTimeout()
清除定时器 clearSetTimeout(定时器的名称)
定时器 window.setInterval()反复调用函数
清除重复的定时器widow.clearInterval

    <span>1</span>
    <li>2</li>
    <script>
        var span = document.querySelector('span');
        var timer = function(){
            console.log('真好');
        }
        var li = document.querySelector('li');
        li.addEventListener('click',function(){
            clearTimeout(times);
        })
        var times = setTimeout(timer,5000);
    </script>

    <style>
        .box {
            width: 140px;
            height: 30px;
            margin: 100px auto;
        }

        .countdown {
            width: 100%;
            height: 100%;
            display: inline-flex;
        }

        .countdown span {
            flex: 25%;
            margin-left: 5px;
            background-color: #000;
            color: #fff;
            font-size: 14px;
            font-weight: 550;
            text-align: center;
            line-height: 30px;
            border-radius: 7px;
        }

        .countdown span:nth-child(1) {
            margin-left: 0;
        }
    </style>
</head>


<body>
    <div class="box">
        <div class="countdown">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
    <script>
        var count = document.querySelector('.countdown');
        var inputdate = +new Date('2019-12-31 0:0:0')
        countdown();
        setInterval(countdown, 1000);
        function countdown() {
            var nowdate = +new Date();
            var times = (nowdate - inputdate) / 1000;
            var d = parseInt(times / 60 / 60 / 24);
            count.children[0].innerHTML = d < 10 ? '0' + d : d;
            var h = parseInt(times / 60 / 60 % 24);
            count.children[1].innerHTML = h < 10 ? '0' + h : h;
            var m = parseInt(times / 60 % 60);
            count.children[2].innerHTML = m < 10 ? '0' + m : m;
            var s = parseInt(times % 60);
            count.children[3].innerHTML = s < 10 ? '0' + s : s;
        }
    </script>

    <input type="number" name="" id=""><button>发送</button>
    <script>
        var btn = document.querySelector('button');
        var timer = 60;
        btn.addEventListener('click', function () {
            btn.disabled = true;
            var times = setInterval(function () {
                if (timer == 0) {
                    clearInterval(times);
                    btn.disabled = false;
                    btn.innerHTML = '发送'
                    timer = 60;
                } else {
                    btn.innerHTML = '还剩下' + timer + 's'
                    timer--;
                }
            }, 1000)
        })
    </script>

this指向

方法调用中谁调用this指向谁
全局作用下的this指向window

同步和异步

执行的顺序不同
同步任务都在主线程上
异步任务是通过回调函数实现的
事件循环 event loop

loaction对象

https://www.xxxx.cn/index.html?name=andy&age=18#link
query 是以键值对的形式通过&符号分隔开
location.href 获取url
location.search 返回参数
location.hash 返回片段 #
location.pathname 返回路径
location.port 返回端口号
location.host 返回主机域名
location.assign()和href一样，能记录浏览历史
location.replace(),无法记录浏览历史
location.reload() 如果+ true 页面可强制刷新

使用location对象将一个页面的数据传送到另一个页面

var div = document.querySelector('div');
console.log(location.search);
var a = location.search.substr(1);
console.log(a);
var arr = a.split('=');
console.log(arr);
div.innerHTML = arr[1] + '博客欢迎你'

navidator对象

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 = "";     //电脑
 }

history对象

history.back 后退
history.forword 前进
history.go(1/-1) 实现页面的前进后退

Harry-iu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Javascript的知识总结（13）-BOM

JavaScript思维导图什么是BOM窗口加载事件this指向同步和异步loaction对象navidator对象history对象来源博客：【Harryの心阁】思维导图什么是BOM顶级对象是windowwindow.name 是特殊的属性窗口加载事件窗口加载事件 window.onload = function(){}等页面加载完毕，具有唯一性，层叠性，使用addEventListener则没有限制document.addEvenListener('DOMContentLoa
复制链接

扫一扫