本系列博客汇总在这里:JavaScript 汇总
Windows 对象常用方法
一、window 对象中的 location
1、获得当前的页面的 url
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function clickme()
{
//获得当前的页面的url
var str = window.location.href;
alert(str);
}
</script>
</head>
<body>
<input type="button" value="点击" onclick="clickme()">
</body>
</html>
2、重定向
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function clickme()
{
//重定向到某一地址,window可以省略
window.location.href = "http://www.weiyuxuan.cn";
}
</script>
</head>
<body>
<input type="button" value="点击" onclick="clickme()">
</body>
</html>
二、window 对象中的 history
- 通常我们使用该对象做页面跳回
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function returnpage()
{
history.back();
}
</script>
</head>
<body>
<input type="button" value="返回" onclick="returnpage()">
</html>
2. History 的 go 方法可以实现页面的跳转值为 -1 代表历史的倒数第一个页面,-2 即倒数第二个页面,以此类推,0 代表当前页面。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function returnpage()
{
history.go(-1);
}
</script>
</head>
<body>
<input type="button" value="返回" onclick="returnpage()">
</html>
三、window 对象中的 Alert
警告提示框。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function myclick()
{
window.alert("警告");
//alert("警告");
}
</script>
</head>
<body>
<input type="button" value="点击" onclick="myclick()">
</html>
四、window 对象中的 confirm
二次确认框,一般用于删除和重要的操作,它的返回值是 true 和 false,点击确定返回 true,点击取消返回 false。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function del()
{
var isTrue = confirm("确认要删除吗?");
if(isTrue)
{
//删除操作
}
}
</script>
</head>
<body>
<input type="button" value="删除" onclick="del()">
</html>
五、window 对象中的 open
- 打开窗口。
参数解释:window.open('page.html','_blank','height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no')
window.open
弹出新窗口的命令;'page.html'
弹出窗口的文件名;_blank
弹出新窗口;height=100
窗口高度;width=400
窗口宽度;top=0
窗口距离屏幕上方的象素值;left=0
窗口距离屏幕左侧的象素值;toolbar=no
是否显示工具栏,yes为显示;menubar
表示菜单栏。scrollbars
表示滚动栏。Resizable=no
是否允许改变窗口大小,yes 为允许;location=no
是否显示地址栏,yes 为允许;status=no
是否显示状态栏内的信息(通常是文件已经打开),yes 为允许;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function openWin()
{
open('page.html','_blank','height=300,width=400,top=200,left=500,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no');
}
</script>
</head>
<body>
<input type="button" value="打开" onclick="openWin()">
</html>
六、window 对象中的 close
不能关闭整个浏览器的页面,但是可以关闭打开的窗口。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function openWin()
{
open('page1.html','_blank','height=300,width=400,top=200,left=500,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no');
}
</script>
</head>
<body>
<input type="button" value="打开" onclick="openWin()">
</html>
七、window 对象中的 setTimeout
经过指定毫秒值后计算一个表达式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//window.setTimeout("alert('你好')",2000);
window.setTimeout("hello()",2000);
function hello()
{
alert("你好");
}
</script>
</head>
<body>
</html>
八、window 对象中的 setInterval
每经过指定毫秒值后计算一个表达式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.setInterval("printStr()",2000);
function printStr()
{
alert("你好");
}
</script>
</head>
<body>
</html>
九、window 对象中的 clearInterval
清除定时器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function a(){
var birthday = new Date();
var result = birthday.getFullYear()+"年"+(birthday.getMonth() + 1)+"月"+birthday.getDate()+
"日"+birthday.getHours()+"时"+birthday.getMinutes()+"分"+birthday.getSeconds()+"秒<br>";
//把当前的时间字符串设置给div的内容
document.getElementById("div1").innerHTML = result;
}
var clock = null;
function internal(){
//间隔指定的时间重复的执行某个方法,第一个参数是要执行的方法,第二个参数是间隔的毫秒数
clock = window.setInterval("a()", 1000);
}
function clinternal(){
//清除计时器,clock参数是计时器的对象
window.clearInterval(clock);
}
</script>
</head>
<body>
<div id="div1"></div>
<input value="开始计时" type="button" onclick="internal()">
<input value="停止计时" type="button" onclick="clinternal()">
</body>
</html>
如有错误,欢迎指正!