BOM详细
概念:BOM browser object model 浏览器对象模板
1 常用对象
Window:窗口,浏览器窗口
我们定义的全局变量和全局函数都是window对象的属性和方法
1 常用对象
Window:窗口,浏览器窗口
我们定义的全局变量和全局函数都是window对象的属性和方法
var a = 1;
function test(){
var a = 2;
alert(a);
alert(window.a);
}123456
function test(){
var a = 2;
alert(a);
alert(window.a);
}123456
全局变量是window的属性。全局函数时window的方法。
窗口body的高度:window.innerWidth
窗口body的高度:window.innerHeight
常用的方法:
Open:打开一个新的窗口。要传三个参数,第一个为将要打开窗口的路径,第二个为打开的方式,第三个为对于新开窗口的描述(宽和高等)
窗口body的高度:window.innerWidth
窗口body的高度:window.innerHeight
常用的方法:
Open:打开一个新的窗口。要传三个参数,第一个为将要打开窗口的路径,第二个为打开的方式,第三个为对于新开窗口的描述(宽和高等)
function openWin(){
var myWindow = window.open("http://www.baidu.com"/*url(新的路径)*/,"_blank"/*新的页面打开*/,"width=200,height=300")
}123
var myWindow = window.open("http://www.baidu.com"/*url(新的路径)*/,"_blank"/*新的页面打开*/,"width=200,height=300")
}123
close:关闭一个窗口
function closeWin(){
myWindow.close()
}123
myWindow.close()
}123
moveTo:移动一个窗口,以窗口的左上角为坐标起点
function removeWin(){
//一个窗口的左上角为移动窗口的坐标
myWindow.moveTo(200,200);
myWindow.focus();//窗口获得焦点
}12345
//一个窗口的左上角为移动窗口的坐标
myWindow.moveTo(200,200);
myWindow.focus();//窗口获得焦点
}12345
focus:使窗口获得焦点
resizeTo:改变窗口的大小
resizeTo:改变窗口的大小
function resizeWin(){
myWindow.resizeTo(1000,1500);
myWindow.focus();
}1234
myWindow.resizeTo(1000,1500);
myWindow.focus();
}1234
screen:屏幕 也是Window下面的一个对象 在使用的时候可以用window.screen,也可以把window省略掉
屏幕的常用属性:宽,高;可用高和可用宽(可用高不包括任务栏)
屏幕的常用属性:宽,高;可用高和可用宽(可用高不包括任务栏)
var scrwidth = window.screen.width;
var scrheight = window.screen.height;
document.write("屏幕的宽:" + scrwidth + "屏幕的高:" + scrheight + "<br>");
var scrAviWidth = screen.availWidth;
var scrAviHeight = screen.availHeight;
document.write("屏幕的宽:" + scrAviWidth + "屏幕的高:" + scrAviHeight + "<br>")123456
var scrheight = window.screen.height;
document.write("屏幕的宽:" + scrwidth + "屏幕的高:" + scrheight + "<br>");
var scrAviWidth = screen.availWidth;
var scrAviHeight = screen.availHeight;
document.write("屏幕的宽:" + scrAviWidth + "屏幕的高:" + scrAviHeight + "<br>")123456
location:地址
常用属性:href完整路径 port端口 pathname路径名字 protocol协议
常用属性:href完整路径 port端口 pathname路径名字 protocol协议
var href = location.href;
document.write("完整的路径:" + href + "<br>");
var port = location.port;
document.write("端口:" + port +"<br>");
var poth = location.pathname;
document.write("路径名:" + poth +"<br>");
var pro = location.protocol;
document.write("协议:" + pro +"<br>");12345678
document.write("完整的路径:" + href + "<br>");
var port = location.port;
document.write("端口:" + port +"<br>");
var poth = location.pathname;
document.write("路径名:" + poth +"<br>");
var pro = location.protocol;
document.write("协议:" + pro +"<br>");12345678
常用方法:
打开一个新的路径(窗口)
打开一个新的路径(窗口)
function newLocation() {
location.assign("http://www.runoob.com")
}123
location.assign("http://www.runoob.com")
}123
刷新:普通刷新和强制刷新
function reloaddoc(){
location.reload();//如果传值为true那么就是强制刷新
}123
location.reload();//如果传值为true那么就是强制刷新
}123
History:历史记录
记录当前窗口的历史,可以进行页面的转换
back:返回上一页
forward:进入下一页
go:进入某一页(-1返回上一页)
记录当前窗口的历史,可以进行页面的转换
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)
}123456789101112
history.back();
}
function newDoc(){
location.assign("http://www.runoob.com");
}
function goForward(){
history.forward()
}
function goTo(){
history.go(-1)
}123456789101112
2 弹窗
Alert();警告提示框也是window对象下的方法,window可以省略不写
Prompt(“提示的信息”,”默认值”);信息提示输入框也是window对象下的方法,window可以省略不写 当点击确定后才把值返回,否则返回为空
Confirm(“提示的信息”)确认框,也是window对象的方法,window可以省略不写,当点击确定的时候,返回true。如果点取消返回false
3 cookie
Cookie的作用:在本地浏览器存储数据。常用于记住账号等。
Cookie的组成:
键值对的形式
存储的数据:“ID=123456; psd=123345”
有效期:“expires=今天到以后的时间”
存储cookie:
按照cookie的格式写好一个字符串 然后将它赋值给document.cookie,浏览器就存了这个cookie,可以存储多个键值对,但是键的名字的名字不能重复
Alert();警告提示框也是window对象下的方法,window可以省略不写
Prompt(“提示的信息”,”默认值”);信息提示输入框也是window对象下的方法,window可以省略不写 当点击确定后才把值返回,否则返回为空
Confirm(“提示的信息”)确认框,也是window对象的方法,window可以省略不写,当点击确定的时候,返回true。如果点取消返回false
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 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;
}12345678910111213
var date = new Date();
date.setDate(date.getDate() + 7);
var cookieText = "psd="+psd + ";" + "expires=" + date;
document.cookie = cookieText;
}12345678910111213
获取cookie:
通过document.cookie就能得到浏览器之前存储的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;
//获取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];
}1234567891011121314
//拆分得到用户密码,得到"11"
psd.value = result[1].split("=")[1];
}1234567891011121314
清除cookie:
将你存储的cookie的有效期改为过去的某一天,就清除了cookie:
将你存储的cookie的有效期改为过去的某一天,就清除了cookie:
function removeCookie(){
var date = new Date();
date.setDate(date.getDate() - 7);
var cookieText = "psd=;expires=";
document.cookie = cookieText;
}123456
var date = new Date();
date.setDate(date.getDate() - 7);
var cookieText = "psd=;expires=";
document.cookie = cookieText;
}123456
4 计时事件
setInterval(“函数”,“毫秒数”)//计时器,就是每隔多长时间就调用一次函数。例如时钟的演示:
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;
}12345678910
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;
}12345678910
clearInterval(计时器)://停止一个计时器
setTimeout(“函数名”,“毫秒数”)://演示器,就是隔了多长时间后使用一次函数
setTimeout(“函数名”,“毫秒数”)://演示器,就是隔了多长时间后使用一次函数
<p id="p1">您的电话已欠费(3秒后关闭)</p>
</body>
<script>
var timer = setTimeout("alarmClock()",2000);
function alarmClock(){
var p1 = document.getElementById("p1");
p1.innerHTML = "";
}12345678
---------------------
作者:奢求997
来源:CSDN
原文:https://blog.csdn.net/qq_39391047/article/details/77268720
版权声明:本文为博主原创文章,转载请附上博文链接!
</body>
<script>
var timer = setTimeout("alarmClock()",2000);
function alarmClock(){
var p1 = document.getElementById("p1");
p1.innerHTML = "";
}12345678
---------------------
作者:奢求997
来源:CSDN
原文:https://blog.csdn.net/qq_39391047/article/details/77268720
版权声明:本文为博主原创文章,转载请附上博文链接!