本系列博客汇总在这里:JavaScript 汇总


一、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>

JavaScrip(8)_Windows 对象常用方法_重定向

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>

JavaScrip(8)_Windows 对象常用方法_新窗口_02

二、window 对象中的 history
  1. 通常我们使用该对象做页面跳回
<!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>

JavaScrip(8)_Windows 对象常用方法_html_03
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>

JavaScrip(8)_Windows 对象常用方法_重定向_04

四、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>

JavaScrip(8)_Windows 对象常用方法_javascript_05

五、window 对象中的 open
  1. 打开窗口。
    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>

JavaScrip(8)_Windows 对象常用方法_html_06

六、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>

JavaScrip(8)_Windows 对象常用方法_新窗口_07

七、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>

JavaScrip(8)_Windows 对象常用方法_JavaScript_08

八、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>

JavaScrip(8)_Windows 对象常用方法_javascript_09

九、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>

JavaScrip(8)_Windows 对象常用方法_JavaScript_10
如有错误,欢迎指正!