web前端学习(四)JavaScript学习笔记部分(8)-- JavaScript 浏览器对象

1、window对象

1.1、window对象:

  window对象是BOM的核心,window对象指当前的浏览器窗口

  所有javaScript全局对象、函数以及变量均自动生成为window对象的成员

  全局变量是window对象的属性

  全局函数是window对象的方法

  甚至HTML DOM的document也是window对象的属性之一

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
window.document.write("hello");/*这个效果和不写window.是一样的*/
</script>
</body>
</html>

1.2、window尺寸

  window.onnerHeight  - 浏览器窗口的内部高度

  window.innerWidth - 浏览器窗口的内部宽度

  备注:这个高度和宽度计算的不包含工具栏和滚动条这一部分

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
document.write(`高度:`+window.innerHeight+`,宽度:`+window.innerWidth);/*这个效果和不写window.是一样的*/
</script>
</body>
</html>

1.3window方法:

  window.open() - 打开新窗口

  window.close() - 关闭当前窗口

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="btn" onclick="btnOnClick()">按钮</button>
<script>
function btnOnClick(){
window.open("array1.html","hahaha","width=300,height=300,top=300,left=300,toolbar=yes")
/*要打开的窗口名|窗口命名|属性设置|toolbar设置属性如何显示,谷歌浏览器直接没有toolbar*/
window.close();/*关闭当前窗口*/
}
</script>
</body>
</html>

2、计时器

2.1、计时事件

  通过使用JavaScript,我们有能力做到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行,我们称之为计时事件

2.2、计时方法:

  1、setInterval() - 间隔指定的毫秒数不停地执行指定的代码

    clearInterval() - 方法用于停止setInterval()方法执行的函数代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="btn" onclick="stopTime()">anniu</button>
<p id="ptime"></p>
<script>
var mytime = setInterval(function(){
getTime();
},1000)
function getTime(){
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("ptime").innerHTML = t;
}
function stopTime(){
clearInterval(mytime);
}
</script>
</body>
</html>

  2、setTimeout() - 暂停指定的毫秒数后执行指定的代码

    clearTimeout() - 方法用于停止执行setTimeout()方法的函数代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="btn" onclick="myWin()">弹出一次</button>
<button id="btn2" onclick="myWin2()">一直弹出</button>
<button id="btn3" onclick="stopWin()">停止弹出</button>
<script>
var win;
function myWin(){
win = setTimeout(function(){
alert("hello");
},3000);
}
function myWin2(){
alert("hello");
win = setTimeout(myWin2,3000);
/*方法自己调用自己可以一直执行*/
}
function stopWin(){
clearInterval(win);
}
</script>
</body>
</html>

区别:第一个方法是一只调用函数,第二种方法是一直自己调用自己

3、History对象

3.1、History对象:

  window.history对象包含浏览器的历史(url)的集合

3.2、History方法:

  history.back() - 与在浏览器点击后退按钮相同

  history.forward() - 与在浏览器中点击按钮向前相同

  history.go() - 进入历史中的某个页面(当前页面是0,可以往前是负数,往后是正数)

history1.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="history2.html">点击跳转到history2.html</a>
<button id="btn" onclick="forwardJump()">向前进(下一个页面)跳转</button>
<script>
function forwardJump(){
history.forward();
}
</script>
</body>
</html>

history2.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="btn" onclick="goceshi()">点击跳回到之前的页面</button>
<script>
function goceshi(){
history.back();/*返回到之前的界面*/
}
</script>
</body>
</html>

history.go()用法:

home.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>主页</title>
</head>
<body>
<a href="login.html">进入登录验证界面</a>
</body>
</html>

login.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录界面</title>
</head>
<body>
<form action="">
<input type="text" id = username>
</form>
<button id="btn" onclick="safe()">确认</button>
<script>
function safe(){
var name = document.getElementById("username").value;
if(name == "hello"){
history.go(-1);
}else{
alert("输入错误");
}
}
</script>
</body>
</html>

4、Location对象

4.1、Location对象:

  window.location对象用于获得当前页面的地址(URL),并把浏览器重新定向到新的页面

4.2、Location对象的属性:

  location.hostname:  返回web主机的域名

  location.pathname:  返回当前页面的路径和文件名

  location.port:  返回web主机的端口

  location.protocol:  返回所使用的web协议(http://或https://)

  location.href:  属性返回当前页面的URL

  location.assign()方法加载新的文档

<!DOCTYPE html>
<!--suppress ALL -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div">
<button id="btn1" onclick="getLoc()">按钮1</button>
<button id="btn2" onclick="reNew()">按钮2</button>
<p id="ptime"></p>
</div>
<script>
function getLoc(){
document.getElementById("ptime").innerHTML = window.location.port;
var newnode = document.createElement("div");
document.getElementById("div").appendChild(newnode);
newnode.innerHTML = window.location.port;
}
function reNew(){
location.assign("http://www.baidu.com");
}
</script>
</body>
</html>

5、Screen对象

5.1、Screen对象:

  window.screen对象包含有关用户屏幕的信息

5.2、属性:

  screen.availWidth - 可用的屏幕宽度

  screen.availHeight - 可用的屏幕高度

  screen.height - 屏幕高度

  screen.width - 屏幕宽度

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
document.write(`可用高度`+screen.availHeight+`,可用宽度`+screen.availWidth+`<br/>`);
document.write(`整体高度`+screen.height+`,整体宽度`+screen.width+`<br/>`);
</script>
</body>
</html>
上一篇:Redis分布式锁----悲观锁实现,以秒杀系统为例


下一篇:java异常——RuntimeException和User Define Exception