4月8日--window的常用对象及其方法
|
名称 |
说明 |
|
alert (text) |
显示一个带有提示信息和确定按钮的警告对话框 |
|
confirm(text) |
显示一个带有提示信息、确定和取消按钮的提示对话框 |
|
prompt(text,val) |
显示一个带有提示信息、确定和取消按钮以及文本输入框的对话框 |
|
open (url,name, options) |
打开具有指定名称的新窗口，并加载给定 URL 所指定的文档 |
|
showModalDialog( )* |
在一个模式窗口中显示指定的HTML文档 |
|
close ( ) |
关闭当前窗口（FF与IE规则不同） |
|
setTimeout(func,delay) |
设置定时器：经过指定毫秒值后执行某个函数 |
|
setInterval(func,delay) |
设置循环定时器 |
|
clearTimeout(timer)/ clearInterval(timer) |
清除定时器 |
1、定时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时器</title>
<script type="text/javascript">
function doTimer () {
setTimeout(callback,1000);
}
var timer;
function doInter () {
timer=setInterval(callback,1000);
}
function callback () {
console.log("定时器工作了");
}
function doClear () {
clearInterval(timer);
}
</script>
</head>
<body>
<button type="button" onclick="doTimer()">延时定时器</button>
<button type="button" onclick="doInter()">循环定时器</button>
<button type="button" onclick="doClear()">清除</button>
</body>
</html>
2、用定时器来显示当前时间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时器2</title>
<script type="text/javascript">
onload=showTime;
function showTime (argument) {
var now=new Date();
var str=now.toLocaleString();
var sp=document.getElementsByClassName("sptime")[0].innerHTML=str;
setTimeout(showTime,1000);
}
</script>
<style type="text/css">
.sptime{
font-size: 2em;
font-family: "Times New Roman";
font-weight: bold;
color:red;
}
</style>
</head>
<body>
<!-- 在页面显示当前时间 -->
<span class="sptime"></span>
</body>
</html>
3、window对象常用的时间
|
名称 |
说明 |
|
onload |
窗口加载后发生 |
|
onscroll |
窗口滚动条滑动 |
|
onclick |
窗口点击（仅FF） |
|
onbeforeunload |
窗口关闭前发生 |
|
oncontextmenu |
弹出右键菜单时发生（仅FF） |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用window事件</title>
<script type="text/javascript">
onscroll=function(){
console.log("scroll");//滑动滚动条时出现scroll
};
onclick=function () {
console.log('window click!');//鼠标点击时出现window click！
};
//在右键菜单（上下文菜单）出现前触发，
// 通过在回调函数中返回false可以撤销事件
oncontextmenu=function () {
// console.log('window contextmenu!');
return false;//返回false就是禁止右键菜单
}
</script>
</head>
<body>
<p>line1</p>
<p>line2</p>
<p>line3</p>
<p>line4</p>
<p>line5</p>
<p>line6</p>
<p>line7</p>
<p>line8</p>
<p>line9</p>
</body>
</html>
4、history对象
|
名称 |
说明 |
|
back( ) |
加载 History 列表中的上一个 URL。 |
|
forward( ) |
加载 History 列表中的下一个 URL。 |
|
go("url" or number) |
加载 History 列表中的一个 URL，或要求浏览器移动指定的页面数。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>history</title>
<script type="text/javascript">
function doBack () {
history.back();
// 相当于history.go(-1);
// 后退
}
function doForward () {
history.forward();
// 相当于history.go(1);
// 前进
}
function doGoto () {
history.go(-3);
//后退3页
}
</script>
</head>
<body>
<button type="button" onclick="doBack()">后退</button>
<button type="button" onclick="doForward()">前进</button>
<button type="button" onclick="doGoto()">后退3页</button>
</body>
</html>
5、location对象
|
方法名称 |
说明 |
|
assign("url") |
加载 URL 指定的新的 HTML 文档。 |
|
reload() |
重新加载当前页 |
|
replace("url") |
通过加载 URL 指定的文档来替换当前文档，不会出现后退 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>location</title>
<script type="text/javascript">
console.log(location.href);
function doTest () {
location="http://www.baidu.com";
}
function doReload () {
location.reload();
}
function doAssign () {
location.assign("http://www.baidu.com");
}
function doReplace () {
location.replace("http://www.baidu.com");
}
</script>
</head>
<body>
<button type="button" onclick="doTest()">转到百度</button>
<button type="button" onclick="doReload()">刷新</button>
<button type="button" onclick="doAssign()">assign</button>
<button type="button" onclick="doReplace()">replace</button>
<script type="text/javascript">
document.write(new Date());
</script>
</body>
</html>
6、定时器的深入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时器深入</title>
<script type="text/javascript">
function doTimer () {
setTimeout(showNum,1000,5);//把5传入num中
}
function showNum(num){
console.log(num);
}
</script>
</head>
<body>
<button type="button" onclick="doTimer()">定时器</button>
</body>
</html>
