JavaScript浏览器对象模型-BOM-Window 对象-BOM 对象-定时器

作者: 鲁智深分类: JAVASCRIPT 发布时间: 2016-04-21 16:14

window对象

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
32
33
34

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>window对象</title>
</head>

<body>
<script>
/*
1. 在浏览器环境中Global对象就是window对象
Global对象的属性和方法就是window对象的属性和方法
2. 还提供了当前DOM中所有的事件类型
3. 其他BOM对象都是window对象的属性
4. window对象提供了属性和方法
5. HTML5提供的部分新特性
*/
console.log(window);
// 1. 变量与属性的关系，函数与方法的关系
var str = 'string';
console.log(str);
console.log(window.str);
// 2. 获取窗口的宽度和高度
console.log(window.innerWidth, window.innerHeight);//获得的是可视区域的宽高
console.log(window.outerWidth, window.outerHeight);//获得的是加上工具条与滚动条窗口的宽度与高度。
// 3. self属性 -> 表示window对象本身
console.log(window === window.self);
// 4. 判断是否为顶级窗口
console.log(window.top === window.self);// true
</script>
</body>

</html>

window对象的方法

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
32
33

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>window对象的方法</title>
<style>
body {
margin: 0px;
height: 2000px;
}
</style>
</head>

<body>
<button id="btn">打开</button>
<button id="btn2">移动</button>
<script>
// scrollBy() 方法可把内容滚动指定的像素数。
var btn = document.getElementById('btn');
btn.onclick = function () {
window.scrollBy(100, 200);
}
// 点击按钮，窗口向下移动 2000
//scrollTo() 方法可把内容滚动到指定的坐标。
var btn2 = document.getElementById('btn2');
btn2.onclick = function () {
window.scrollTo(0, 2000);
}
</script>
</body>

</html>

navigator对象

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
32
33
34
35
36
37
38
39
40
41
42
43
44

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>navigator对象</title>
</head>

<body>
<script>
console.log('浏览器的代码名: ' + navigator.appCodeName);
console.log('浏览器的名称: ' + navigator.appName);
console.log('浏览器的平台和版本信息: ' + navigator.appVersion);
console.log('运行浏览器的操作系统平台: ' + navigator.platform);

//userAgent 属性返回由客户机发送服务器的 user-agent 头部的值
var ua = navigator.userAgent;

//判断浏览器
if (/firefox/i.test(ua)) {
console.log('当前使用的是 Firefox 浏览器');
} else if (/chrome/i.test(ua)) {
console.log('当前使用的是 Chrome 浏览器');
} else if (/safari/i.test(ua)) {
console.log('当前使用的是 Safari 浏览器');
} else if (/msie/i.test(ua)) {
console.log('当前使用的是 IE 11 之前版本的浏览器');
} else if ("ActiveXObject" in window) {
console.log('当前使用的是 IE 11 浏览器');
}
//判断操作系统
if (/windows/i.test(ua)){
console.log('当前使用的是 Windows 操作系统');
}else if (/mac/i.test(ua)){
console.log('当前使用的是 Mac 操作系统');
}else if (/android/i.test(ua)){
console.log('当前使用的是 Android 操作系统');
}else if (/iphone/i.test(ua)){
console.log('当前使用的是 iPhone 操作系统');
}
</script>
</body>

</html>

history对象

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

<html lang="en">

<head>
<meta charset="UTF-8">
<title>history对象</title>
</head>

<body>

<script type="text/javascript">
function goForward() {
window.history.forward();
}
function back() {
window.history.back();
}
</script>
<input type="button" value="下一个页面" onclick="goForward()" />
<input type="button" value="上一个页面" onclick="back()" />
</body>
</html>

location对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>location对象</title>
</head>

<body>
<script>
//Location 对象包含了浏览器的地址栏中的信息。该对象主要用于获取和设置地址。
console.log(location.href);
</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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>定时器</title>
</head>

<body>
<button id="start">开始</button>
<button id="stop">结束</button>
<div id="show"></div>
<script>
/*
setInterval(code,time)
* 参数
* code - 表示按照指定周期所执行的代码块
* 最简单的实现方式就是回调函数
* time - 表示指定周期，以毫秒为单位
* 返回值 - 作为当前定时器的标识(ID)
* 问题
* 导致第一次执行时，会出现指定时间的延迟
*/
//开始按钮
var start = document.getElementById('start');
var show = document.getElementById('show');
var t;
start.addEventListener('click',function(){
showTime();
t = setInterval(showTime, 1000);
})

function showTime(){
var date = new Date();
show.innerHTML = date.getFullYear() + '-' + date.getMonth() + '-' + date.getDate() + '-' + date.getHours() + '-' + date.getMinutes() + '-' + date.getSeconds();
}
//结束按钮
/*
clearInterval(id)
* id - 表示setInterval()方法的返回值
*/
var stop = document.getElementById('stop');
stop.addEventListener('click',function(){
clearInterval(t);
})
</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
32
33
34
35
36
37
38
39
40
41

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>延迟调用</title>
</head>

<body>
<button id="btn">按钮</button>
<button id="end">停止</button>
<div id="show"></div>
<script>
/* setTimeout(code, millisec)
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
setTimeout() 只执行 code 一次。
如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout() 。
*/
var btn = document.getElementById('btn');
var t ;
btn.addEventListener('click',function(){
showTime();
//插入时间的代码
function showTime() {
var date = new Date();
show.innerHTML = date.getFullYear() + '-' + date.getMonth() + '-' + date.getDate() + '-' + date.getHours() + '-' + date.getMinutes() + '-' + date.getSeconds();
t = setTimeout(showTime, 1000);
//单次定时器执行一次，并调用函数，定时器在函数体内，再次调用定时器，实现循环
}
});

//结束执行代码
//clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout。
var end = document.getElementById('end');
end.addEventListener('click',function(){
clearTimeout(t);
})
</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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>向下滑动</title>
<style>
body {
margin: 0px;
}
#show {
width: 200px;
/* 高度为 0 */
height: 100px;
background-color: lightcoral;
margin: 0 auto;
/* 设置为隐藏 */
/*display: none;*/
}

</style>
</head>
<body>
<div id="show"></div>
<script>
var show = document.getElementById('show');
/*show.style.display = 'block';

var t = setInterval(function(){
var style = window.getComputedStyle(show,null);
var height = parseInt(style.height);
// 判断当前的高度是否为 400
if (height >= 400){
clearInterval(t);
} else {
height++;
show.style.height = height + 'px';
}
},50);*/

slideDown(show,400);

/*
将上述实现的向下滑动效果，封装在一个固定的函数中
* 设计当前实现向下滑动效果函数的形参
* elem - 表示实现向下滑动效果的元素
* maxHeight - 表示元素向下滑动的最大高度值
* 函数的逻辑与默认设置CSS样式属性的值无关
*/
function slideDown(elem, maxHeight){
// 操作的元素默认的display值为none
elem.style.display = 'block';
elem.style.height = '0px';

var t = setInterval(function(){
var style = window.getComputedStyle(elem,null);
var height = parseInt(style.height);
// 判断当前的高度是否为 400
if (height >= maxHeight){
clearInterval(t);
} else {
height++;
elem.style.height = height + 'px';
}
},50);
}
</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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>移动效果</title>
<style>
body {
margin: 0px;
}

#box {
width: 100px;
height: 100px;
background-color: lightcoral;
position: absolute;
left: 100px;
top: 100px;
}
</style>
</head>

<body>
<div id="box"></div>
<script>
/*
* 向右移动
* 当前元素移动到页面的最右边时 -> 向左移动
* 向左移动
* 当前元素移动到页面的最左边时 -> 向右移动
*/
var box = document.getElementById('box');
var flag = false;// 定义一个开关，默认向右
var speed = 1;
setInterval(function(){
//speed += 1;
// 获取可视窗口的宽度
var WIDTH = window.innerWidth;
var style = window.getComputedStyle(box, null);
var left = parseInt(style.left);
var width = parseInt(style.width);
//到最右边时
if(left + width >= WIDTH){
flag = true;
}else if(left <= 0){
flag = false;
}
// 判断当前元素移动的方向
if (flag) {// 向左移动
left -= speed;
} else {// 向右移动
left += speed;
}
box.style.left = left + 'px';
},10);
</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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>事件与动画结合</title>
<style>
body {
margin: 0px;
}
</style>
</head>

<body>
<div></div>
<script>
var body = document.body;
var opacity = 1;
//创建div
document.addEventListener('click',function showTime(event){
var left = event.clientX;
var top = event.clientY;
var div = document.createElement('div');
div.style.width = 100 + 'px';
div.style.height = 100 + 'px';
div.style.borderRadius = '50%';
// 颜色随机
var r = parseInt(Math.random() * 255);
var g = parseInt(Math.random() * 255);
var b = parseInt(Math.random() * 255);
div.style.backgroundColor = 'rgb('+ r + ',' + g + ',' + b + ')';
div.style.display = 'block';
div.style.position = 'absolute';
div.style.top = top-50 + 'px';
div.style.left = left-50 + 'px';
div.style.opacity = 1;
body.appendChild(div);
//慢慢消失
var style = window.getComputedStyle(div, null);
t = setInterval(function(){
opacity = style.opacity;
console.log(opacity);
opacity -= 0.05;
div.style.opacity = opacity;
}, 1000);

if (t <= 0) {
clearTimeout(t);
// 删除当前元素
}
})
</script>
</body>

</html>

如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！

鲁智深不花

JavaScript浏览器对象模型-BOM-Window 对象-BOM 对象-定时器

window对象

window对象的方法

navigator对象

history对象

location对象

定时器

延迟调用

向下滑动

移动效果

事件与动画结合

发表评论取消回复

JavaScript浏览器对象模型-BOM-Window 对象-BOM 对象-定时器

window对象

window对象的方法

navigator对象

history对象

location对象

定时器

延迟调用

向下滑动

移动效果

事件与动画结合

发表评论 取消回复

发表评论取消回复