window 对象
浏览器对象模型(BOM)是JavaScript的组成之一,它提供了独立于内容与浏览器窗口进行交互的对象,使用浏览器对象模型可以实现与HTML的交互。它的作用是将相关的元素组织包装起来,提供给程序设计人员使用,从而降低开发人员的劳动量,提高设计Web页面的能力。
BOM是一个分层结构
↓
BOM通常可实现如下功能:
→弹出新的浏览器窗口。
→移动、关闭浏览器窗口及调整窗口的大小。
→在浏览器窗口中实现页面的前进、后退功能。
常用的属性
名称 | 说明 |
history | 有关客户访问过的URL的信息 |
location | 有关当前URL的信息 |
screen | 只读属性,包含有关客户端显示屏幕的信息 |
属性的语法格式:
window.属性名="属性值"
常用的方法
名称 | 说明 |
prompt() | 显示可提示用户输入的对话框 |
alert() | 显示一个带有提示信息和一个“确定”按钮的警示对话框 |
confirm() | 显示一个带有提示信息、“确定”和“取消”按钮的对话框 |
close() | 关闭浏览器窗口 |
open() | 打开一个新的浏览器窗口,加载给定URL所指定的文档 |
setTimeout() | 在指定的毫秒数后调用函数或计算表达式 |
setInterval() | 按照指定的周期(以毫秒计)来调用函数或表达式 |
方法的使用格式:
window.方法名();
1.confirm()
语法:
window.confirm("对话框中显示的纯文本");
示例:
var flag = confirm("确定要删除此条信息吗?");
if (flag == true) {
alert("删除成功!")
} else {
alert("取消删除!")
}
alert()方法、prompt()方法、confirm()方法的不同:
→alert()只有一个参数,仅显示警告对话框的消息,无返回值,不能对脚本产生任何改变。
→prompt()有两个参数,是输入对话框,用来提示用户输入一些信息,单击“取消”按钮则返回null,单击“确定”按钮则返回用户输入的值,常用于用户关于特定问题而反馈的信息。
→confirm()只有一个参数,是确认对话框,显示提示对话框信息、“确定”按钮和“取消”按钮,单击“确定”按钮返回true,单击“取消”按钮返回false,因此与if-else语句搭配使用。
2.close()
语法:
window.close();
3.open()
语法:
window.open("弹出窗口的url","窗口名称","窗口特征");
名称 | 说明 |
height、width | 窗口文档显示区的高度、宽度,以像素计 |
left、top | 窗口的x坐标、y坐标,以像素计 |
toolbar=yes|no|1|0 | 是否显示浏览器的工具栏,默认是yes |
scrollbars=yes|no|1|0 | 是否显示滚动条,默认是yes |
location=yes|no|1|0 | 是否显示地址栏,默认是yes |
status=yes|no|1|0 | 是否添加状态栏,默认是yes |
menubar=yes|no|1|0 | 是否显示菜单栏,默认是yes |
resizable=yes|no|1|0 | 窗口是否可调节尺寸,默认是yes |
titlebar=yes|no|1|0 | 是否显示标题栏,默认是yes |
fullscreen=yes|no|1|0 | 是否使用全屏模式显示浏览器,默认是no |
history对象与location对象
history对象提供用户最近浏览过的URL列表。
名称 | 描述 |
back() | 加载history对象列表中的前一个URL |
forward() | 加载history对象列表中的后一个URL |
go() | 加载history对象列表中的某个具体URL |
→history.back()方法等效于浏览器中的“后退”按钮。
→history.forward()等效于浏览器中的“前进”按钮。
→go(n)方法中的n是具体的数字。
history,go(1)等价于forward()方法。
history,go(-1)等价于back()方法。
location对象提供当前页面的URL信息
名称 | 说明 |
host | 设置或返回主机名和当前URL的端口号 |
hostname | 设置或返回当前URL的主机名 |
href | 设置或返回完整的URL |
名称 | 说明 |
reload() | 重新加载当前文档 |
replace() | 用新的文档替换当前文档 |
location对象常用的属性是href,通过对此属性设置不同的网址,从而达到跳转功能。
例如:
<a href="javascript:location.href='flower.html'">查看详情</a>
document对象
属性 | 描述 |
referrer | 返回载入当前文档的URL |
URL | 返回当前文档的URL |
语法:
document.referrer;
document.URL;
方法 | 描述 |
getElementById() | 返回对拥有指定id的第一个对象的引用 |
getElementsByName() | 返回带有指定名称的对象集合 |
getElementByTagName() | 返回带有指定标签名的对象的集合 |
write() | 向文档写文本、HTML表达式或JavaScript代码 |
JavaScript内置对象
Date:用于操作日期和时间
Array:用于单独的变量名中存储一系列的值
String:用于支持对字符串的处理
Math:使我们有能力执行常用的数学任务,它包含了若干个数学常量和函数
Date对象
语法:
var 日期实例 = new Date(参数);
方法 | 说明 |
getDate() | 返回Date对象的一个月中的每一天,其值为1~31 |
getDay() | 返回Date对象的星期中的每一天,其值为0~6 |
getHours() | 返回Date对象的小时数,其值为0~23 |
getMinutes() | 返回Date对象的分钟数,其值为0~59 |
getSeconds() | 返回Date对象的秒数,其值为0~59 |
getMonth() | 返回Date对象的月份,其值为0~11 |
getFullYear() | 返回Date对象的年份,其值为四位数 |
getTime() | 返回自某一时刻(1970年1月1日)以来的毫秒数 |
示例:
<script type="text/javascript">
function time() {
var today = new Date();
var hh = today.getHours();
var mm = today.getMinutes();
var ss = today.getSeconds();
var yyyy = today.getFullYear();
var m = today.getMonth();
var dd = today.getDate();
var d = today.getDay();
var c;
switch (d) {
case d = 0:
c = "星期日";
break;
case d = 1:
c = "星期一";
break;
case d = 2:
c = "星期二";
break;
case d = 3:
c = "星期三";
break;
case d = 4:
c = "星期四";
break;
case d = 5:
c = "星期五";
break
case d = 6:
c = "星期六";
break;
}
var q;
if (hh > 12) {
q = "PM";
} else {
q = "AM";
}
document.getElementById("h1_time").innerHTML = yyyy + "年" + (m+1) + "月" + dd + "日" + " " + hh + ":" + mm + ":" + ss + " " + q + " " + c;
}
var mytime = setInterval("time()", 1000);
</script>
Math对象
方法 | 说明 | 示例 |
ceil() | 对数进行上舍入 | Math.ceil(25.5);返回26 Math.ceil(-25.5);返回-25 |
floor() | 对数进行下舍入 | Math.floor(25.5);返回25 Math.floor(-25.5);返回-26 |
round() | 把数四舍五入为最接近的数 | Math.round(25.5);返回26 Math.round(-25.5);返回-26 |
random() | 返回0~1中的随机数 | Math.random();例如,0.51516684 |
如果希望返回一个1~100中的整数(包括1和100):
var iNum=Math.floor(Math.random()*100+1);
定时函数
常用定时函数
1.setTImeout()
语法:
setTImeout("调用的函数名称",等待的毫秒数);
2.setInterval()
语法:
setInterval("调用的函数名称",周期性调用函数之间间隔的毫秒数);
3.clearTimeout()和clearInterval()
clearTimeout()函数用来清楚由setTime()函数设置的定时器。
语法:
clearTimeout(setTimeout()返回的ID值);
clearInterval()函数用来清楚由setInterval()函数设置的定时器。
语法:
clearInterval(setInterval()返回的ID值);