js中的window对象的基本使用

最新推荐文章于 2023-09-19 10:24:16 发布

旧时光的小弥猫

最新推荐文章于 2023-09-19 10:24:16 发布

阅读量404

点赞数

本文链接：https://blog.csdn.net/weixin_44007988/article/details/102693167

版权

js中的window对象的基本使用

<html>
	<head>
		<title>js的window对象一</title>
		<meta charset="UTF-8"/>
		<script type="text/javascript">
			//警告框
			function testAlert(){
				var a=alert("警告框");
				alert(a);//警告框没有返回值
			}
			//确认框
			function testConfirm(){
				var c=confirm("你确定删除吗？");
				alert(c);//确认框有返回值 true和false
			}
			//提示框
			function testPrompt(){
				var s=prompt("请输入昵称:");
				alert(s);//提示框有返回值 没有输入返回空字符串
			}
//-------------------------------------------------------------------------------
			var id1;
			var id2;
			//定时执行
			function testSetTimeout(){
				id1=setTimeout(function(){
					alert("定时执行")
				},3000);//setTimeout() 参数1：函数 参数2：毫秒数
			}
			
			//间隔执行
			function testSetInterval(){
				id2=setInterval(function(){
					alert("间隔执行")
				},2000);//setInterval() 参数1：函数 参数2：间隔的毫秒数
			}
			
			//停止定时执行的方法
			function testClearTimeout(){
				clearTimeout(id1);
			}
			
			//停止间隔执行
			function testClearInterval(){
				clearInterval(id2);
			}
		</script>
	</head>
	<body>
		<h3>js的window对象一</h3>
		<input type="button" name="" id="" value="警告框" onclick="testAlert();"/>
		<input type="button" name="" id="" value="确认框" onclick="testConfirm();"/>
		<input type="button" name="" id="" value="提示框" onclick="testPrompt();"/>
		<hr />
		<input type="button" name="" id="" value="定时执行" onclick="testSetTimeout();"/>
		<input type="button" name="" id="" value="间隔执行" onclick="testSetInterval();"/>
		<input type="button" name="" id="" value="停止定时执行" onclick="testClearTimeout();"/>
		<input type="button" name="" id="" value="停止定时间隔执行" onclick="testClearInterval();"/>
	</body>
</html>

<html>
	<head>
		<title>js的window对象(二)</title>
		<meta charset="UTF-8"/>
		<script type="text/javascript">
			//1 子页面方法
			function testOpen(){
				window.open('son.html','newwindow','height=400, width=600, top=100px,left=320px, toolbar=yes, menubar=yes, scrollbars=yes, resizable=yes,location=no, status=yes');
			}
			
			//2 子页面调用父页面的函数
			function testFather(){
				alert("父页面");
			}
//----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

			//地址栏属性 location
			function testLocation(){
				window.location.href="http://www.baidu.com";
			}
			//重新加载此页面
			function testLocation2(){
				window.location.reload();
			}
			
			//历史记录属性
			function testHistory(){
				window.history.forward();//前进
			}
			function testHistory2(){
//				window.history.go(1);
				window.history.go(0);//相当于重新加载此页面
			}
			
			//屏幕属性
			function testScreen(){
				var x=window.screen.width;
				var y=window.screen.height;
				alert(x+":"+y);
			}
			
			//浏览器配置属性
			function testNa(){
				alert(window.navigator.userAgent);
			}
		</script>
	</head>
	<body>
		<h3>js的window对象(二)</h3>
		<hr />
		<input type="button" name="" id="" value="window的Open" onclick="testOpen();"/>
		<hr />
		<input type="button" name="" id="" value="地址栏属性--location--跳转" onclick="testLocation();"/>
		<input type="button" name="" id="" value="地址栏属性--location--重新加载" onclick="testLocation2();" />
		<br /><br />
		<input type="button" name="" id="" value="历史记录属性--history-forward" onclick="testHistory();"/>
		<input type="button" name="" id="" value="历史记录属性--history--go" onclick="testHistory2();"/>
		<br /><br />
		<input type="button" name="" id="" value="屏幕属性--screen" onclick="testScreen();"/>
		<input type="button" name="" id="" value="浏览器配置属性--navigator" onclick="testNa();"/>
	</body>
</html>

旧时光的小弥猫

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js中的window对象的基本使用

js中的window对象的基本使用<html> <head> <title>js的window对象一</title> <meta charset="UTF-8"/> <script type="text/javascript"> //警告框 function testAlert(){ var...
复制链接

扫一扫