BOM-白红宇

BOM

阅读量：6969 次

发布时间：2019-06-27

本文共 5879 字，大约阅读时间需要 19 分钟。

BOM

概念：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

var p1 = document.getElementById("p1");

var width = window.innerWidth;

var height = window.innerHeight;

p1.innerHTML = "窗口的宽度为：" + width + "窗口的高度为：" + height;

常用的方法：

（1）open：打开一个新的窗口。要传三个参数：第一个参数为将要打开窗口的路径；第二个参数为打开的方式；第三个参数为对于新打开浏览器的描述（宽和高等）。

（2）close：关闭一个窗口

（3）moveTo：移动一个窗口。以窗口的左上角为坐标起点

（4）focus：是窗口获取焦点

（5）resizeTo：改变新窗口的大小

例子：包含的上面的5个方法

<body>

<p id="p1">窗口的宽度</p>

<button οnclick="openWin()">打开一个新的窗口</button>

<button οnclick="closeWin()">关闭新的窗口</button>

<button οnclick="removeWin()">移动新的窗口</button>

<button οnclick="resizeWin()">改变新窗口的大小</button>

</body>

//当前窗口的宽度和高度

var p1 = document.getElementById("p1");

var width = window.innerWidth;

var height = window.innerHeight;

p1.innerHTML = "窗口的宽度为：" + width + "窗口的高度为：" + height;

function openWin(){//打开一个新的窗口

myWindow = window.open("","","width=200,height=300");

}

function closeWin(){//关闭一个窗口

myWindow.close();

}

function removeWin(){//移动新的窗口

//一个窗口的左上角为移动窗口的坐标

myWindow.moveTo(200,200);

//获取焦点

myWindow.focus();

}

function resizeWin(){//改变窗口的大小

myWindow.resizeTo(500,500);

//获取焦点

myWindow.focus();

}

</script>

（6）screen：屏幕，也是window下面的一个对象，在使用的时候可以用window.screen，也可以把window省略掉。

屏幕的常用属性：宽、高、可用宽和可用高（可用高不包括任务栏）

var scrWidth = window.screen.width;

var scrHeight = screen.height;

document.write("屏幕的宽：" +scrWidth + "屏幕的高：" + scrHeight);

var scrAvaWidth = screen.availWidth;

var scrAvaHeight = screen.availHeight;

document.write("屏幕的宽：" +scrAvaWidth + "屏幕的高：" + scrAvaHeight);

</script>

（7）location：地址

常用属性：href：完整路径；port：端口号；pathname：路径名；protocol协议

常用方法：

①打开一个新的路径（窗口）

function newLocation(){

location.assign("http://www.runoob.com");

}

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

function reloadDoc(){

//如果传值为true那么就是强制刷新，如果不传，就是普通刷新

location.reload();

}

③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、弹窗

（1）alert()：警告提示框。也是window对象下的方法，window可以省略不写。

alert("提示的内容");//警告提示框

（2）prompt(“提示的信息”,”默认值”)：信息提示输入框。也是window对象下的方法，window也可以省略不写。当点击了确定后才把值返回否则返回为null。

var str = prompt("请输入的内容","hello world");//请输入内容就是提示的信息，后面的hello world是默认值

（3）confirm(“提示的信息”)：确认框。也是window对象下的方法，window可以省略不写，当点击“确定”的时候，返回true，如果点击“取消”返回false

var isRight = confirm("是否确定删除！");

alert(typeof (isRight) + isRight);

3、cookie

（1）cookie的作用：在本地浏览器存储数据。常用语记住账号等。

（2）cookie的组成：键值对的形式

（3）存储的数据：“userId=12324；psd=1324；”

有效期：“expires=今天以后的时间”

（4）存储cookie：

按照cookie的格式写好一个字符串，然后将它赋值给document.cookie，浏览器就存了这个cookie。可以存储多个键值对，但是键的名字不能重复。新的值替换旧的值。

function saveCookie(){

var pad = document.getElementById("pad").value;

//日期的应用

var date = new Date();

date.setDate(date.getDate() + 7);

var cookieText = "pad=" +pad +";" + "expires=" + date;

document.cookie = cookieText;

}

（5）获取cookie：

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

function getCookie(){

var data = document.cookie;

var result = [];

result= data.split("; ");

var userIdData = result[1].split("=")[1];

var padData = result[1].split("=")[1];

var userId = document.getElementById("userId");

userId.value = userIdData;

var pad = document.getElementById("pad");

pad.value = padData;

}

（6）清除cookie：

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

function removeCookie(){

var date = new Date();

date.setDate(date.getDate()-7);

var cookieText = "pad=;expires=" + date;

document.cookie = cookieText;

}

案例：cookie方法的整体代码

<button οnclick="getCookie()">得到cookie</button>

<button οnclick="removeCookie()">清除cookie</button>

</form>

</body>

function saveCookie(){

//存储

var pad = document.getElementById("pad").value;

//日期的应用

var date = new Date();

date.setDate(date.getDate() + 7);

var cookieText = "pad=" +pad +";" + "expires=" + date;

document.cookie = cookieText;

}

function getCookie(){

//获取

var data = document.cookie;

var result = [];

result= data.split("; ");

var userIdData = result[1].split("=")[1];

var padData = result[1].split("=")[1];

var userId = document.getElementById("userId");

userId.value = userIdData;

var pad = document.getElementById("pad");

pad.value = padData;

}

function removeCookie(){

//清除

var date = new Date();

date.setDate(date.getDate()-7);

var cookieText = "pad=;expires=" + date;

document.cookie = cookieText;

}

</script>

4、计时事件

（1）setInterval(“函数”,”毫秒数”)：计时器。每隔多长时间就调用一次函数。

执行周期性的任务。

例如：时钟的演示

<body>

</body>

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;

}

</script>

（2）clearInterval(计时器)：停止一个计时器

var timer = setInterval("countDown()",1000);

var i = 10;

function countDown(){

if(i == 0){

clearInterval(timer);

}else{

var id1 = document.getElementById("id1");

id1.innerHTML = i;

}

i--;

}

（3）setTimeout(“函数名”,”毫秒数”)：延时器，就是隔了多长时间调用一次函数。

<body>

<p id="p1">您的电话已欠费（3秒之后消失）</p>

</body>

var timer = setTimeout("alarmClock()",3000);

function alarmClock(){

var p1 = document.getElementById("p1");

p1.innerHTML = "";

}

</script>

---------------------

作者：文洛

来源：CSDN

原文：https://blog.csdn.net/a126789/article/details/77116963

转载于:https://www.cnblogs.com/eakofdawn-settingsun/p/9853700.html

你可能感兴趣的文章

8000401a 错误 ,检索 COM 类工厂中 CLSID 为的组件时失败，原因是出现以下错误: 8000401a。...

查看>>

实战SQL Server 2005镜像配置全过程

查看>>

安装ArchLinux BIOS

查看>>

使用 JavaScript 实现基本队列、优先队列和循环队列

查看>>

CSSREM插件

查看>>

安卓图表引擎AChartEngine(二) - 示例源码概述和分析

查看>>

python模块之imghdr(识别不同格式的图片文件)

查看>>

git关联远程仓库命令<原>

查看>>

LeetCode - Search in Rotated Sorted Array II

查看>>

记大三开学的第一个月末

查看>>

HDU 1823 Luck and Love 二维线段树

Deep Learning for Nature Language Processing --- 第四讲（下）