web前端学习（四）JavaScript学习笔记部分（8）-- JavaScript 浏览器对象

1、window对象

1.1、window对象：

　　window对象是BOM的核心，window对象指当前的浏览器窗口

　　所有javaScript全局对象、函数以及变量均自动生成为window对象的成员

　　全局变量是window对象的属性

　　全局函数是window对象的方法

　　甚至HTML DOM的document也是window对象的属性之一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    window.document.write("hello");/*这个效果和不写window.是一样的*/
</script>
</body>
</html>

1.2、window尺寸

　　window.onnerHeight - 浏览器窗口的内部高度

　　window.innerWidth - 浏览器窗口的内部宽度

　　备注：这个高度和宽度计算的不包含工具栏和滚动条这一部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    document.write(`高度：`+window.innerHeight+`,宽度：`+window.innerWidth);/*这个效果和不写window.是一样的*/
</script>
</body>
</html>

1.3window方法：

　　window.open() - 打开新窗口

　　window.close() - 关闭当前窗口

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="btn" onclick="btnOnClick()">按钮</button>
<script>
    function btnOnClick(){
        window.open("array1.html","hahaha","width=300,height=300,top=300,left=300,toolbar=yes")
                    /*要打开的窗口名|窗口命名|属性设置|toolbar设置属性如何显示，谷歌浏览器直接没有toolbar*/
        window.close();/*关闭当前窗口*/
    }
</script>
</body>
</html>

2、计时器

2.1、计时事件

　　通过使用JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行，我们称之为计时事件

2.2、计时方法：

　　1、setInterval() - 间隔指定的毫秒数不停地执行指定的代码

　　　　clearInterval() - 方法用于停止setInterval()方法执行的函数代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="btn" onclick="stopTime()">anniu</button>
<p id="ptime"></p>
<script>
    var mytime = setInterval(function(){
        getTime();
    },1000)
    function getTime(){
        var d = new Date();
        var t = d.toLocaleTimeString();
        document.getElementById("ptime").innerHTML = t;
    }
    function stopTime(){
        clearInterval(mytime);
    }
</script>
</body>
</html>

　　2、setTimeout() - 暂停指定的毫秒数后执行指定的代码

　　　　clearTimeout() - 方法用于停止执行setTimeout()方法的函数代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="btn" onclick="myWin()">弹出一次</button>
<button id="btn2" onclick="myWin2()">一直弹出</button>
<button id="btn3" onclick="stopWin()">停止弹出</button>
<script>
    var win;
    function myWin(){
        win = setTimeout(function(){
            alert("hello");
        },3000);
    }
    function myWin2(){
        alert("hello");
        win = setTimeout(myWin2,3000);
        /*方法自己调用自己可以一直执行*/
    }
    function stopWin(){
        clearInterval(win);
    }
</script>
</body>
</html>

区别：第一个方法是一只调用函数，第二种方法是一直自己调用自己