JS浏览器对象-windows对象、计时器、History对象、Location对象、Screen对象
2016-04-09 19:09
507 查看
1.window对象
(1)window对象是BOM(浏览器对象模型)的核心、window对象指当前的浏览器窗口
所有js全局对象、函数以及变量均自动成为window对象的成员
全局变量为window对象的属性
全局函数是window对象的方法
HTML DOM的document也是window对象的属性
(2)window尺寸
window.innerHeight-浏览器窗口内部的高度
windows.innerWidth-浏览器窗口的内部宽度
(3)window方法
window.open()-打开新窗口
window.close()-关闭当前窗口
简单事例:
2.计时器
(1)计时方法:
setInterval()间隔指定的毫秒数后不停的执行代码
clearInterval()用于停止setInterval()所执行的代码
setTimeout()暂停指定的毫秒后执行指定的代码
clearTimeout()用于停止setTimeout()所执行的代码
事例代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSDOM浏览器对象</title>
</head>
<body onload="changeTime2()">
<p id="pid"></p>
<button onclick="stop1()">button</button>
<button onclick="stop2()">button2</button>
<script>
//var time1= window.setInterval(function () {
// changeTime();
// },1000);
// function changeTime() {
// var date=new Date();
// var a=date.toLocaleTimeString();
// document.getElementById("pid").innerHTML=a;
//}
// function stop1() {
// window.clearInterval(time1);//把上面的变量传进去
// }
var time2;
function changeTime2() {
var date=new Date();
var a=date.toLocaleTimeString();
document.getElementById("pid").innerHTML=a;
time2=window.setTimeout(function () {
changeTime2();//需要自己调用自己才能实现时间的改变
},1000);
}
function stop2() {
window.clearTimeout(time2);
}
</script>
</body>
</html>
3.History对象
window.history对象包含浏览器的历史(url)的集合
history方法:
history.back()与在浏览器点击的后退按钮相同
history.forward()与浏览器中点击的向前按钮相同
historry.go()进入历史中的某个界面
模仿简单的登录成功与否界面的跳转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS浏览器对象</title>
</head>
<body>
<input id="useName" type="text">
<button onclick="login()"></button>
<script>
function login() {
var useName=document.getElementById("useName").value;
if(useName=="h"){//如果用户名为h则跳转到上一个界面
history.back("js.html");
}else {
alert("you are error");
}
}
</script>
</body>
</html>
4.Location对象
(1)window.location对象用于获得当前页面的地址(URL),并把浏览器重定向到新的页面
(2)Location对象的属性
location.hostname返回当前页面的路径和文件名
location.port返回web主机的端口
location.protocol返回所使用的web协议(htto://或者https://)
location.href属性返回当前页面的URL
location.assign方法加载新的文档
事例代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS浏览器对象</title>
</head>
<body>
<p id="pid1"></p>
<p id="pid2"></p>
<p id="pid3"></p>
<p id="pid4"></p>
<p id="pid5"></p>
<button onclick="change()">button1</button>
<button onclick="change2()">button2</button>
<script type="text/javascript">
function change() {
document.getElementById("pid1").innerHTML=location.hostname;
document.getElementById("pid2").innerHTML=location.pathname;
document.getElementById("pid3").innerHTML=location.port;
document.getElementById("pid4").innerHTML=location.protocol;
document.getElementById("pid5").innerHTML=location.href;
}
function change2() {
location.assign("http://www.baidu.com");
}
</script>
</body>
</html>
5.Screen对象
(1)window.screen对象包含有关用户屏幕的信息
(2)属性
screen.availWidth可用屏幕宽度
screen.acailHeight可用的屏幕高度
screen.Height屏幕高度
screen.Width屏幕宽度
简单事例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS浏览器对象</title>
</head>
<body>
<script>
document.write(window.screen.availHeight+"</br>") ;//可以屏幕高度
document.write(window.screen.availWidth+"</br>");//可以屏幕宽度
document.write(window.screen.height+"</br>");//屏幕高度
document.write(window.screen.width);//屏幕高度
</script>
</body>
</html>
(1)window对象是BOM(浏览器对象模型)的核心、window对象指当前的浏览器窗口
所有js全局对象、函数以及变量均自动成为window对象的成员
全局变量为window对象的属性
全局函数是window对象的方法
HTML DOM的document也是window对象的属性
(2)window尺寸
window.innerHeight-浏览器窗口内部的高度
windows.innerWidth-浏览器窗口的内部宽度
(3)window方法
window.open()-打开新窗口
window.close()-关闭当前窗口
简单事例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JSDOM浏览器对象</title> </head> <body> <button onclick="openW()">button</button> <script> window.document.write("hello"); document.write("world");//window可以不写 document.write("高度"+window.innerHeight+"宽度"+window.innerWidth); function openW() { //打开新窗口 // window.open("hello.html","windowname","height=200,width=200"); // 关闭窗口 window.close(); } </script> </body> </html>
2.计时器
(1)计时方法:
setInterval()间隔指定的毫秒数后不停的执行代码
clearInterval()用于停止setInterval()所执行的代码
setTimeout()暂停指定的毫秒后执行指定的代码
clearTimeout()用于停止setTimeout()所执行的代码
事例代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSDOM浏览器对象</title>
</head>
<body onload="changeTime2()">
<p id="pid"></p>
<button onclick="stop1()">button</button>
<button onclick="stop2()">button2</button>
<script>
//var time1= window.setInterval(function () {
// changeTime();
// },1000);
// function changeTime() {
// var date=new Date();
// var a=date.toLocaleTimeString();
// document.getElementById("pid").innerHTML=a;
//}
// function stop1() {
// window.clearInterval(time1);//把上面的变量传进去
// }
var time2;
function changeTime2() {
var date=new Date();
var a=date.toLocaleTimeString();
document.getElementById("pid").innerHTML=a;
time2=window.setTimeout(function () {
changeTime2();//需要自己调用自己才能实现时间的改变
},1000);
}
function stop2() {
window.clearTimeout(time2);
}
</script>
</body>
</html>
3.History对象
window.history对象包含浏览器的历史(url)的集合
history方法:
history.back()与在浏览器点击的后退按钮相同
history.forward()与浏览器中点击的向前按钮相同
historry.go()进入历史中的某个界面
模仿简单的登录成功与否界面的跳转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS浏览器对象</title>
</head>
<body>
<input id="useName" type="text">
<button onclick="login()"></button>
<script>
function login() {
var useName=document.getElementById("useName").value;
if(useName=="h"){//如果用户名为h则跳转到上一个界面
history.back("js.html");
}else {
alert("you are error");
}
}
</script>
</body>
</html>
4.Location对象
(1)window.location对象用于获得当前页面的地址(URL),并把浏览器重定向到新的页面
(2)Location对象的属性
location.hostname返回当前页面的路径和文件名
location.port返回web主机的端口
location.protocol返回所使用的web协议(htto://或者https://)
location.href属性返回当前页面的URL
location.assign方法加载新的文档
事例代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS浏览器对象</title>
</head>
<body>
<p id="pid1"></p>
<p id="pid2"></p>
<p id="pid3"></p>
<p id="pid4"></p>
<p id="pid5"></p>
<button onclick="change()">button1</button>
<button onclick="change2()">button2</button>
<script type="text/javascript">
function change() {
document.getElementById("pid1").innerHTML=location.hostname;
document.getElementById("pid2").innerHTML=location.pathname;
document.getElementById("pid3").innerHTML=location.port;
document.getElementById("pid4").innerHTML=location.protocol;
document.getElementById("pid5").innerHTML=location.href;
}
function change2() {
location.assign("http://www.baidu.com");
}
</script>
</body>
</html>
5.Screen对象
(1)window.screen对象包含有关用户屏幕的信息
(2)属性
screen.availWidth可用屏幕宽度
screen.acailHeight可用的屏幕高度
screen.Height屏幕高度
screen.Width屏幕宽度
简单事例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS浏览器对象</title>
</head>
<body>
<script>
document.write(window.screen.availHeight+"</br>") ;//可以屏幕高度
document.write(window.screen.availWidth+"</br>");//可以屏幕宽度
document.write(window.screen.height+"</br>");//屏幕高度
document.write(window.screen.width);//屏幕高度
</script>
</body>
</html>
相关文章推荐
- 开发中 常用 js 记录(一)
- jsp页面 查看更多功能
- javascript原型
- json 解析
- JNI中string 、 char* 和 jstring 两种转换
- 事件event对象
- js基础1
- DOM
- BOM
- Chrome developer tool介绍(javascript调试)
- boost解析json文件
- js基本知识
- 在Js中是否可以遍历一个字符串?
- js中ajax异步导致的一些问题
- JavaScript奇技淫巧之遍历数组
- 安卓 json解析如何使用与讲解
- a 标签中调用js的几种方法
- js confirm()方法的使用方法实例
- JSTL标签用法
- JavaScript里的类和继承