Fork me on GitHub

js学习笔记第四卷

正在学习前端的道路上,写点东西分享吧。

关于window对象。

相关方法

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

alert() 显示一段消息和一个确认按钮的警告框(前面我有讲过)。
prompt() 显示可提示用户输入的对话框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
close() 关闭浏览器窗口。
print() 打印当前窗口的内容。
focus() 把键盘焦点给予一个窗口。
blur() 把键盘焦点从顶层窗口移开。
moveBy() 可对应创窗口的当前坐标把它移动指定像素。
moveTo() 把窗口的左上角移动到一个指定的坐标。
resizeBy() 按照指定的像素调整窗口的大小。
resizeTo() 把窗口的大写调整到指定的宽度和高度。
scrollTo() 按照指定的像素调整窗口的大小。
setInterval() 每隔指定的时间执行代码。
setTimeout() 在指定的延迟时间之后来执行代码。
clearInterval() 取消setInterval()的设置。
clearTimeout() 取消setTimeout()的设置。

代码实例QAQ:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script type="text/javascript">
function chenlao()
{
var qaq=confirm("是否打开");
if(qaq==true)
{
window.open("http://zoomdong.site/","heigth=600px,height=400px");
}
else
{
return;
}
}
</script>
</head>
<body>
<input type="button" value="LOL" onclick="chenlao()">
</body>
</html>

JavaScript计时器

在JavaScript中,我们可以在设定的时间间隔之后来执行代码,而不是在函数被调用之后立即执行。

计时器类型:
一次性计时器:仅在指定的延迟时间之后触发一次。
间隔性触发计时器:每隔一定的时间就触发一次。

计时器方法:
setInterval() 每隔指定的时间执行代码。
setTimeout() 在指定的延迟时间之后来执行代码。
clearInterval() 取消setInterval()的设置。
clearTimeout() 取消setTimeout()的设置。

计时器setInterval()

在执行的时候,从载入页面之后每隔指定的时间执行代码。

语法:setINterval(代码,交互时间);

参数说明:
1.代码:要调用的函数或要执行的代码串。
2.交互时间:周期性执行或调用表达式之间的时间间隔,以毫秒计(1s=1000ms)。

返回值:
一个可以传递给clearInterval()从而取消”代码”的周期性执行的值。

调用函数格式(假设有一个clock()函数)
setInterval(“clock()”,1000)或setInterval(clock,1000)

比如我们写一个这样的计时器,间隔100ms调用clock()函数,并且将时间显示出在input的text框框上面。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
<script type="text/javascript">
var int=setInterval(clock, 100);//这里调用的必须是一个函数。
function clock(){
var time=new Date();
document.getElementById("clock").value = time;
}
</script>
</head>
<body>
<form>
<input type="text" id="clock" size="50" />
</form>
</body>
</html>

整理出来的一个时钟,利用JavaScript实现。这里要仔细研究这个setInterval().

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>定时器</title>
<script type="text/javascript">
var attime;
function clock(){
var time=new Date();
attime=time.getHours()+":"+time.getMinutes()+":"+time.getSeconds();
document.getElementById("emm1").value = attime;
}
setInterval("clock()",100);//具体解释为每隔100ms调用一次函数clock().
</script>
</head>
<body>
<form>
<input type="text" id="emm1" size="100" style="background:blue;width:600px;height:600px;color:yellow"/>
</form>
</body>
</html>

取消计时器

可以让他计时,当然我们也有办法让他取消掉这种计时。
clearInterval()方法可以取消有setInterval()设置的交互时间。
语法:
clearInterval(id_of_setINterval);
括号里面的参数是由setInterval()所返回的ID值.

我们这里的代码这个样子写就没有问题啦。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
<script type="text/javascript">
function clock(){
var time=new Date();
document.getElementById("clock").value = time;
}
var i=setInterval("clock()",100);
</script>
</head>
<body>
<form>
<input type="text" id="clock" size="50" />
<input type="button" value="Stop" onclick="clearInterval(i)" style="background:blue;heigth=400px;width:300px"/>
</form>
</body>
</html>

计时器setTimeout()

setTimeout()计时器,在载入之后延迟指定时间之后,去执行一次表达式,仅执行一次。

语法:setTimeout(代码,延迟时间);//这里的代码指的就是我们要执行的函数。

参数说明:
1.要调用的函数或要执行的代码串。
2.延时时间:在执行代码前需等待的时间,以毫秒为单位(1s=1000ms).

当我们打开网页3s之后再弹出提示框是可以这样操作的:

1
2
3
<script type="text/javascript">
setTimout("alert(来看陈lao女装啊QAQ)",1000);//这个就可以使得前面的代码-1s执行。
<script>

或者写一个可以无限计数的计数器。(可以用这个东西跑秒)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>计时器</title>
<script type="text/javascript">
var num=0;
function numCount()
{
document.getElementById("qaq").value=num;
num=num+1;
setTimeout("numCount()",100);
}
</script>
</head>
<body>
<input type="text" id="qaq" />
<input type="button" value="Start" onclick="numCount()" />
</body>
</html>

//当然如果这里你不想使用button触发函数的话,直接在function外面添加一个setTimeout(“numCount()”,100);的调用,那么就直接可以使得运行了QAQ。

取消计时器

setTimeout()和clearTimeout()一起使用,停止计时器。类似于前面的setInterval()和clearInterval()函数。

语法:
clearTimeout(emm)
参数说明。emm指的是有setTimeout返回的ID值,该标识要取消的延迟执行代码块。
for example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>计时器</title>
<script type="text/javascript">
var num=0,i;
function numCount()
{
document.getElementById("qaq").value=num;
num=num+1;
i=setTimeout("numCount()",100);
}
function stopit()
{
clearTimeout(i);
}
</script>
</head>
<body>
<input type="text" id="qaq" />
<input type="button" value="Start" onclick="numCount()" />
<input type="button" value="Stop" onmousemove="stopit()" />
</body>
</html>

//利用这个代码,您就可以随时控制秒表的开始和结束啦。

History对象

这个对象可以用来记录用户曾经浏览过的页面(URL),并可以实现浏览器前进与后退相似导航的功能。

Notice:从窗口被打开的那一刻开始记录,每个浏览器的窗口、每个标签页乃至整个框架,都有自己的history对象与特定的window对象关联。

语法:window.history[属性|方法]//window是可以省略的。
history对象属性。
属性 描述
length 返回浏览器历史列表中的URL数量。
history对象方法
back[] 加载history列表中的前一个URL
forward[] 加载history列表中的下一个URL
go[] 加载history列表中的某个具体的页面。

length属性

使用length属性,当前窗口的浏览历史总长度,代码如下:

1
2
3
4
<script type="text/javascript">
var HL=window.history.length;
document.write(HL);
<script>

back()

这个方法能够加载history列表中的前一个URL。
语法
window.history.back();
这个的意思就相当于浏览器中的倒退按钮。
back()相当于go(-1);
window.history.back()==window.history.go(-1);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script type="text/javascript">
function GoBack() {
window.history.back();
}
</script>
</head>
<body>
点击下面的锚点链接,添加历史列表项:
<br />
<a href="#target1">第一个锚点</a>
<a name="target1"></a>
<br />
<a href="#target2">第二个锚点</a>
<a name="target2"></a>
<br /><br />
使用下面按钮,实现返回前一个页面:
<form>
<input type="button" value="返回前一个页面" onclick="GoBack();" />
</form>
</body>
</html>

返回下一个浏览的页面

forward()方法,加载history列表中的下一个URL。
意思就是等价于网页中的前进键。
语法:window.history.forward()==window.history.go(1);

返回浏览历史中的其他页面。

of course,可以前进可以后退,那么当然也有可以任意跳转的啦!!!
go()方法,根据当前所处的页面,加载history列表中的某个具体的页面。
语法:window.history.go(number);
参数 说明
1 等价于forward
-1 等价于back
0 当前页面
其他数值 要访问的URL在history的URL列表中的相对位置。

location对象

location用于获取或设置窗体的URL,并且可以用于解析URL。
语法:
location.[属性|方法]
属性 说明
hash 设置或返回从#开始的URL
host 设置或返回主机名和当前URL的端口号
hostname 设置或返回当前URL的主机名
href 设置或返回完整的URL
pathname 设置或返回当前URL的路径部分
port 设置或返回当前URL端口号
protocol 设置或返回当前URL的协议
search 设置或返回从问号(?)开始的URL(查询部分)。

location对象方法:
属性 描述
assign() 加载新的文档
reload() 重新加载当前文档
replace() 用新的文档替换当前文档。

1
document.write(window.location.href);

Navigator对象包含有关浏览器的信息,通常用于检测浏览器与操作系统的版本。
对象属性:
属性 描述
appCodeName 浏览器代码名的字符表示。
appName 返回浏览器道德名称。
appVersion 返回浏览器的平台和版本信息。
paltform 返回运行浏览器的操作系统平台。
userAgent 返回由客户机发送服务器的user-agent头部的值。
比如我们查看浏览器的名称和版本。

1
2
3
4
5
6
7
<script type="text/javascript">
var browser=navigator.appName;
var b_version=navigator.appVersion;
document.write("Browser name"+browser);
document.write("<br>");
document.write("Browser version"+b_version);
<script>

userAgent

返回用户代理头的字符串的表示(就是包括浏览器版本信息等的字符串)。
语法:
navigator.userAgent;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>navigator</title>
<script type="text/javascript">
function validB(){
var u_agent = navigator.userAgent;
var B_name="不是想用的主流浏览器!";
if(u_agent.indexOf("Firefox")>-1){
B_name="Firefox";
}else if(u_agent.indexOf("Chrome")>-1){
B_name="Chrome";
}else if(u_agent.indexOf("MSIE")>-1&&u_agent.indexOf("Trident")>-1){
B_name="IE(8-10)";
}
document.write("浏览器:"+B_name+"<br>");
document.write("u_agent:"+u_agent+"<br>");
}
vaildB();
</script>
</head>
<body>
<form>
<input type="button" value="查看浏览器" >
</form>
</body>
</html>

screen()对象

screen对象用于获取用户的屏幕信息。
语法window.screen.属性。
对象属性:
属性 描述
availHeight 窗口可以使用的屏幕高度,单位像素
availWidth 窗口可以使用的屏幕宽度,单位像素
colorDepth 用户浏览器表示的颜色位数,通常是32位(每像素的位数)
pixelDepth 用户浏览器表示的颜色位数, 通常是32位(IE不支持此属性)
height 屏幕的高度,单位亮度。
width 屏幕的宽度,单位像素。

使用document.wite(screen.width);可以直接输出屏幕的宽度。高度也与之类似。这个比较简单。
反正不同的屏幕显示的值也是不一样的。

编程练习

做一个可以计时的返回到原有网页的操作。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<title>浏览器对象</title>
<meta http-equiv="Content-Type" content="text/html; charset=gkb" />
<style type="text/css">
</style>
</head>
<body>
<h4>操作成功</h4>
<p><span id="time">5</span>秒后回到主页<a href="javascript:history.back()">返回</a></p>
<script type="text/javascript">
var num = document.getElementById("time").innerHTML
var i = setInterval("if(num > 1){document.getElementById('time').innerHTML = --num;}else{location.assign('http://www.imooc.com');}", 1000);
</script>
</body>
</html>

这个是我自己的版本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p>
<b id="seconds">5</b>秒后回到主页&nbsp;<a href="javascript:back();">返回</a>
</p>
<script type="text/javascript">
var n=document.getElementById("seconds");
var i=5;
var tt=setInterval( function() {
i=i-1;
n.innerHTML=i;
if(n==1)
{
window.location.assign("http://www.zoomdong.site");
}
},1000);
function back()
{
window.history.go(-1);
}
</script>
</body>
</html>

总结

A novel is a mirror walking along a main road. –Stendhal.

-------------本文结束感谢您的阅读-------------