一.什么是Bom
1.关于bom的定义
2.window对象包含的核心对象
二.窗口对象window
1.window的常用方法
2.定时器
定义:
什么叫定时器?我们可以看到很多网站首页有一个“图片轮播”特效,每隔2s图片变换一次,这里就用到了定时器。
定时器用途非常广,在图片轮播、在线时钟、弹窗广告等地方大显身手。凡是自动执行的东西,很大可能都是跟定时器有关。
setTimeout()和clearTimeout();
setInterval()和clearInterval();
a.在JavaScript中,我们可以使用setTimeout()方法来设置“一次性”调用的函数。其中clearTimeout()可以用来取消执行setTimeout()方法。
b.在JavaScript中,我们可以使用setInterval()方法来设置“重复性”调用的函数。其中clearInterval()可以用来取消执行setTimeout()方法。
下面展示一些 内联代码片
。
定时器示例
/*
倒计数
5 4 3 2 1 每隔1s秒输出
*/
// for(var i = 5; i > 0; i--){
// console.log(i);
// }
var i = 5
//启动循环执行的定时器
var timerInterval = setInterval(function () {
console.log(i--); //先输出,再减一 5 , 4 ,3, 2, 1
if (i == 0) { // i:5,4,3,2,1 , 0
clearInterval(timerInterval) //结束指定定时器
}
}, 1000)
下面展示一些 内联代码片
。
在JavaScript中,关于定时器的实现,我们有2组方法:
(1)setTimeout()和clearTimeout();
(2)setInterval()和clearInterval();
一、setTimeout()和clearTimeout()
在JavaScript中,我们可以使用setTimeout()方法来设置“一次性”调用的函数。其中clearTimeout()可以用来取消执行setTimeout()方法。
语法:
var 变量名 = window.setTimeout(code , time);
说明:
参数code可以是一段代码,也可以是一个调用的函数名;
参数time表示时间,表示要过多长时间才执行code中的内容,单位为毫秒。
举例:参数code是一段代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
window.onload = function () {
setTimeout("alert('欢迎来到javascript');", 2000);
}
</script>
</head>
<body>
<p>2秒后提示欢迎语。</p>
</body>
</html>
二、setInterval()和clearInterval()
在JavaScript中,我们可以使用setInterval()方法来设置“重复性”调用的函数。其中clearInterval()可以用来取消执行setTimeout()方法。
语法:
var 变量名 = setInterval (code , time);
说明:
参数code可以是一段代码,也可以是一个调用的函数名;
参数time表示时间,表示要过多长时间才执行code中的内容,单位为毫秒。
setTimeout()方法与setInterval()方法的语法很相似,实际上这两者在用法方面区别非常大。其中setTimeout()方法内的代码只会执行一次,
而setInterval()方法内的代码会重复性执行,除非你使用clearInterval()方法来取消执行。
举例:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
//定义全局变量,用于记录秒数
var n = 5;
window.onload = function () {
//设置定时器,重复执行函数countDown()
var t = setInterval("countDown()", 1000);
}
//定义函数
function countDown() {
//判断n是否大于0,因为倒计时不可能有负数
if (n > 0){
n--;
document.getElementById("num").innerHTML = n;
}
}
</script>
</head>
<body>
<p>新年倒计时:<span id="num">5</span></p>
</body>
</html>
setInterval()和clearInterval()
分析:
window.onload表示在页面加载完毕执行,在“JavaScript页面相关事件”我们会详细讲解到。
setInterval()方法会重复执行某一段代码或函数。如果这个例子使用setTimeout方法就不能实现了,因为setTimeout()方法只会执行一次,而setInterval()会重复执行。
3.对话框
下面展示一些 内联代码片
。
对于浏览器的对话框,我们都见过不少了。这一章我们给大家总结一下JavaScript对话框方面的知识。
在JavaScript中,对话框共有3种:
(1)alert();
(2)confirm();
(3)prompt();
这3种方法都是属于window对象。其实alert()方法完整写法是“window.alert()”,但是由于window对象是全局对象,我们简写成“alert()”即可。confirm()和prompt()也是同样的道理。
其中,这3种对话框特点如下:
(1)alert():仅有提示文字,没有返回值;
(2)confirm():具有提示文字,返回“布尔值”(true或false);
confirm()方法简介
在JavaScript中,confirm()方法对话框一般用于确认信息,它只有一个参数,返回值为true或false。
语法:
confirm(message)
说明:
message是必选项,表示弹出对话框中的文本,这是一个字符串。如果用户点击“确定”,则confirm()返回true。如果用户点击“取消”按钮,则confirm()返回false。confirm()方法往往都是和按钮结合使用。
(3)prompt():具有提示文字,返回“字符串”;
prompt()方法简介
在JavaScript中,prompt()方法对话框用于输入并返回用户输入的字符串。
语法:
prompt(message);
说明:
参数message表示对话框中的提示内容,这是一个字符串。
举例:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
var name = prompt("请输入你的名字");
document.write("欢迎<strong>" + name + "</strong>来到javacripte学习");
</script>
</head>
<body>
</body>
</html>
4.获取浏览器窗口的尺寸
下面展示一些 内联代码片
。
console.log('window.innerHeight :', window.innerHeight );
console.log('window.innerWidth :', window.innerWidth );
5.浏览器的onscroll事件
6.浏览器的滚动
a.scrollTop 获取的是页面向上滚动的距离
b.scrollLeft 获取页面向左滚动的距离
下面展示一些 内联代码片
。
滚动示例
//滚动事件-当滚动条滚动事触发
window.onscroll = function(){
// console.log('document.documentElement.scrollTop : ', document.documentElement.scrollTop ); //chrome 有 doctype
// console.log('document.body.scrollTop :', document.body.scrollTop ); // chrome 没doctype
console.log('getScrollTop :', getScrollTop() ); // chrome 没doctype
}
// 兼容性学习,获取滚动距离 0-> false
function getScrollTop(){
if(document.documentElement.scrollTop){
return document.documentElement.scrollTop
}else{
return document.body.scrollTop
}
// return document.body.scrollTop || document.documentElement.scrollTop
}
三.历史记录对象(history)
示例:
四.位置对象(location)
1.常用属性:location.href
2.常用方法
3.属性.
五.屏幕对象(screen了解)
提供了用户显示屏幕的相关属性,比如显示屏幕的宽度、高度,可用宽度、高度。
六.浏览器的版本信息(navigator了解)
序言:
window 中有一个对象叫做 navigator 是专门用来获取浏览器信息的
1.navigator.userAgent
2.navigator.appName
3.navigator.appVersion
4.navigator.platform