JS BOM对象 History对象 Location对象

一.BOM对象

BOM（浏览器对象模型），可以对浏览器窗口进行访问和操作

window对象
    所有浏览器都支持 window 对象。
    概念上讲.一个html文档对应一个window对象.
    功能上讲: 控制浏览器窗口的.
    使用上讲: window对象不需要创建对象,直接使用即可.

//浏览器全局变量windows

alert()            显示带有一段消息和一个确认按钮的警告框。
confirm()          显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt()           显示可提示用户输入的对话框。

open()             打开一个新的浏览器窗口或查找一个已命名的窗口。
close()            关闭浏览器窗口。
setInterval()      按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval()    取消由 setInterval() 设置的 timeout。
setTimeout()       在指定的毫秒数后调用函数或计算表达式。
clearTimeout()     取消由 setTimeout() 方法设置的 timeout。
scrollTo()         把内容滚动到指定的坐标。

<script>
    //alert 弹出内容
    alert("hello");  //弹出hello

    //confirm
    var ret = confirm("hello");
    console.log(ret)  //点确认 ret值为true 取消是false


    //setTimeout(定时执行的函数，定时的时间间隔[毫秒]) 只能执行一次
    setTimeout(func, 3000);

    function func() {
        alert("吓你一跳");
    }

    //setInterval(定时执行的函数，定时的时间间隔[毫秒]) 每隔多久执行一次
    //示例（每隔0.5秒a进行自加1）
    var a = 1;
    setInterval(func, 500);

    function func() {
        console.log(a)
        a++;
    }


    //时间定时器
    //<input id="ID1" type="text" onclick="begin()">
    //<button onclick="end()">停止</button>
    function showTime() {
        var nowd2 = new Date().toLocaleString();
        var temp = document.getElementById("ID1");
        temp.value = nowd2;

    }
    var clock;
    function begin() {
        if (clock == undefined) {
            showTime();
            clock = setInterval(showTime, 1000);
        }
    }
    function end() {
        clearInterval(clock);
        clock = undefined;
    }


    //clearInterval
    //清除反复执行的定时器。
    //示例（倒计时，从10开始，倒计到0结束。）
    //<h1 id="box">10</h1>
    var box=document.getElementById("box");
    var ret=setInterval(func,1000);
    function func(){
        //到0了停止倒计时
        if(box.innerHTML==0){
            clearInterval(ret);
            alert("新年快乐！！！")
        }else{
            //没有到0,继续减
            box.innerHTML=parseInt(box.innerHTML)-1;
        }
    }

</script>

二.History对象

History对象

History 对象包含用户（在浏览器窗口中）访问过的 URL。

History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。

History 对象方法

back()    加载 history 列表中的前一个 URL。
forward()    加载 history 列表中的下一个 URL。
go()    加载 history 列表中的某个具体页面。

<a href="rrr.html">click</a>
<button onclick=" history.forward()">>>></button>
<button onclick="history.back()">back</button>
<button onclick="history.go()">back</button>

3.Location对象

Location 对象包含有关当前 URL 的信息。

Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。

对象方法

location.assign(URL)
location.reload()
location.replace(newURL)//注意与assign的区别

参考：

https://www.cnblogs.com/yuanchenqi/articles/5980312.html

https://www.cnblogs.com/chichung/p/9696187.html

JS BOM对象 History对象 Location对象

猜你喜欢