BOM

骑猪看日落 2022-06-10 10:19 195阅读 0赞

概念：BOM browser object model 浏览器对象模板  
1 常用对象  
Window：窗口，浏览器窗口  
我们定义的全局变量和全局函数都是window对象的属性和方法

var a = 1;
    function test(){ 
        var a = 2;
        alert(a);
        alert(window.a);
    }

全局变量是window的属性。全局函数时window的方法。  
窗口body的高度：window.innerWidth  
窗口body的高度：window.innerHeight  
常用的方法：  
Open：打开一个新的窗口。要传三个参数，第一个为将要打开窗口的路径，第二个为打开的方式，第三个为对于新开窗口的描述（宽和高等）

function openWin(){ 
        var myWindow = window.open("http://www.baidu.com"/*url(新的路径)*/,"_blank"/*新的页面打开*/,"width=200，height=300")
    }

close：关闭一个窗口

function closeWin(){ 
        myWindow.close()
    }

moveTo：移动一个窗口，以窗口的左上角为坐标起点

function removeWin(){ 
        //一个窗口的左上角为移动窗口的坐标
        myWindow.moveTo(200,200);
        myWindow.focus();//窗口获得焦点
    }

focus：使窗口获得焦点  
resizeTo：改变窗口的大小

function resizeWin(){ 
        myWindow.resizeTo(1000,1500);
        myWindow.focus();
    }

screen：屏幕 也是Window下面的一个对象 在使用的时候可以用window.screen，也可以把window省略掉  
屏幕的常用属性：宽，高；可用高和可用宽（可用高不包括任务栏）

var scrwidth = window.screen.width;
 var scrheight = window.screen.height;
 document.write("屏幕的宽：" + scrwidth + "屏幕的高：" + scrheight + " ");
 var scrAviWidth = screen.availWidth;
 var scrAviHeight = screen.availHeight;
 document.write("屏幕的宽：" + scrAviWidth + "屏幕的高：" + scrAviHeight + " ")

location：地址  
常用属性：href完整路径 port端口 pathname路径名字 protocol协议

var href = location.href;
 document.write("完整的路径：" + href + " ");
 var port = location.port;
 document.write("端口：" + port +" ");
 var poth = location.pathname;
 document.write("路径名：" + poth +" ");
 var pro = location.protocol;
 document.write("协议：" + pro +" ");

常用方法：  
打开一个新的路径（窗口）

function newLocation() { 
        location.assign("http://www.runoob.com")
    }

刷新：普通刷新和强制刷新

function reloaddoc(){ 
        location.reload();//如果传值为true那么就是强制刷新
    }

History：历史记录  
记录当前窗口的历史，可以进行页面的转换  
back：返回上一页  
forward：进入下一页  
go：进入某一页（-1返回上一页）

function goBack(){ 
        history.back();
    }
    function newDoc(){ 
        location.assign("http://www.runoob.com");
    }
    function goForward(){ 
        history.forward()
    }
    function goTo(){ 
        history.go(-1)
    }

2 弹窗  
Alert（）；警告提示框也是window对象下的方法，window可以省略不写  
Prompt（“提示的信息”，”默认值”）；信息提示输入框也是window对象下的方法，window可以省略不写 当点击确定后才把值返回，否则返回为空  
![这里写图片描述][SouthEast]  
Confirm（“提示的信息”）确认框，也是window对象的方法，window可以省略不写，当点击确定的时候，返回true。如果点取消返回false  
![这里写图片描述][SouthEast 1]  
3 cookie  
Cookie的作用：在本地浏览器存储数据。常用于记住账号等。  
Cookie的组成：  
键值对的形式  
存储的数据：“ID=123456; psd=123345”  
有效期：“expires=今天到以后的时间”  
存储cookie：  
按照cookie的格式写好一个字符串 然后将它赋值给document.cookie，浏览器就存了这个cookie，可以存储多个键值对，但是键的名字的名字不能重复

function saveCookie(){
        var ID = document.getElementById("ID").value;
        var date = new Date();
        date.setDate(date.getDate() + 7);
        var cookieText = "ID="+ID + ";" + "expires=" + date;
        document.cookie = cookieText;
    
        var psd = document.getElementById("psd").value;
        var date = new Date();
        date.setDate(date.getDate() + 7);
        var cookieText = "psd="+psd + ";" + "expires=" + date;
        document.cookie = cookieText;
    }

获取cookie：  
通过document.cookie就能得到浏览器之前存储的cookie是一个字符串。将这个字符串进行解析，得到自己想要的内容

function getCookie(){
        //获取cookie的内容比如:ID=1234; psd=11;
        var data = document.cookie;
        //以"; "进行分割,得到数组
        var result = data.split("; ");
        //拆分用户的信息 用"="进行分割，,得到"1234"
        var idData = result[0].split("=")[1];
        var ID = document.getElementById("ID");
        ID.value = idData;
    
        var psd = document.getElementById("psd");
        //拆分得到用户密码,得到"11"
        psd.value = result[1].split("=")[1];
    }

清除cookie：  
将你存储的cookie的有效期改为过去的某一天，就清除了cookie：

function removeCookie(){ 
         var date = new Date();
         date.setDate(date.getDate() - 7);
         var cookieText = "psd=;expires=";
         document.cookie = cookieText;
     }

4 计时事件  
setInterval（“函数”，“毫秒数”）//计时器，就是每隔多长时间就调用一次函数。例如时钟的演示：

var p = document.getElementById("time");
    var timer = setInterval("getTime()",1000);
    function getTime(){
        var time = new Date();
        var hour = time.getHours();
        var minute = time.getMinutes();
        var second = time.getSeconds();
        var p1 = document.getElementById("p1");
        p1.innerHTML = hour + ":" + minute + ":" + second;
    }

clearInterval（计时器）：//停止一个计时器  
setTimeout（“函数名”，“毫秒数”）：//演示器，就是隔了多长时间后使用一次函数

您的电话已欠费（3秒后关闭）
 </body>
 <script> var timer = setTimeout("alarmClock()",2000); function alarmClock(){ var p1 = document.getElementById("p1"); p1.innerHTML = ""; }

[SouthEast]: /images/20220610/88f555a923214f11b4816af623fa395e.png
[SouthEast 1]: /images/20220610/066786553dad4cf39933d516e321150b.png