javascript基础知识梳理-window全局对象

最新推荐文章于 2023-10-14 22:08:55 发布

dc15822445347

最新推荐文章于 2023-10-14 22:08:55 发布

阅读量879

点赞数

分类专栏： javascript学习

本文链接：https://blog.csdn.net/dc15822445347/article/details/25157549

版权

javascript学习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#clock {
	font: bold 12pt sans-serif;
	background: #ddf;
	padding: 10px;
	border: solid black 2px;
	border-radius: 10px;
}
</style>
<script type="text/javascript">
	//定义一个计时器,用来控制时间走动或者停止,采用闭包
	function Counter() {
		var result = 0;
		return {
			start : function() {
				if (result == 0) {
					result = setInterval(displayTime, 1000);
				}
			},
			stop : function() {
				if (result != 0) {
					clearInterval(result);
					result = 0;
				}
			},
			isStart : function() {
				return result != 0;
			}
		};
	}
	console.log("document.readyState:" + document.readyState);
	window.onload = function() {
		console.log("location.port : " + location.port);
		//给location重新赋值,赋值之后,页面立刻就跳转
		//location = "http://www.baidu.com";
		console.log("document.anchors : " + document.anchors);
		var div1 = document.getElementById("div1");
		console.log("div1 : " + div1);
		var btn = document.getElementById("btn");
		btn.style.backgroundColor = "yellow";
		btn.addEventListener("click", function() {
			console.log(file.value);
		}, false);
		displayTime();
		//创建计时器对象
		var counter = Counter();
		//获取start按钮
		var btnStart = document.getElementById("btnStart");
		btnStart.onclick = function() {
			counter.start();
		}
		//获取stop按钮
		var btnStop = document.getElementById("btnStop");
		btnStop.onclick = function() {
			counter.stop();
		}
		var a = document.getElementById("a");
		a.innerHTML = a.href;
		console.log("document.readyState:" + document.readyState);
		var file = document.getElementById("file");
		//window对象的location属性,表示该窗口中当前显示的文档的URL,并定义了方法使窗口载入新的文档
		//document对象也有一个URL属性,是文档首次载入后保存该文档的URL的静态字符串,如果定位到文档中的片段标识符,Location对象会做相应的更新,而document.URL属性却不会改变。
		//location对象的assign方法可以使窗口载入并显示指定的URL中的文档,replace方法类似,并且这两个方法都会将历史记录删除
		//location.replace("http://www.baidu.com");
		//location = "#top";
		//location对象的URL的分解属性是可写的,对他们重新赋值会改变URL的位置,导致浏览器载入一个新的文档。
		//location.port = 8080;
		//window对象的history属性
		console.log("history.length:" + history.length);
		//window对象的navigator属性
		//navigator对象包含了浏览器厂商和版本信息
		console.log("navigator.userAgent:" + navigator.userAgent);
		console.log("navigator.appName:" + navigator.appName);
		console.log("navigator.appVersion:" + navigator.appVersion);
		console.log("navigator.platform:" + navigator.platform);
		console.log("navigator.onLine:" + navigator.onLine);
		//window对象的screen属性,它提供有关窗口显示的大小和可用的颜色数量的信息。
		console.log("screen.width:" + screen.width);
		console.log("screen.height:" + screen.height);
		console.log("screen.availWidth:" + screen.availWidth);
		console.log("screen.availHeight:" + screen.availHeight);
		//下面看下window对象的showModalDialog方法,该方法用于显示一个包含HTML格式的"模态对话框",可以给它传入参数,以及从对话框里返回值。
		var btnOpenDlg = document.getElementById("btnOpenDlg");
		btnOpenDlg.onclick = function() {
			showModalDialog("http://www.baidu.com");
		}
		//下面看下window对象的open和close方法,分别用来打开和关闭窗口
		var newWindow;
		var btnOpenWindow = document.getElementById("btnOpenWindow");
		btnOpenWindow.onclick = function() {
			if (!newWindow) {
				newWindow = window.open("http://www.baidu.com");
			}
		}
		var btnCloseWindow = document.getElementById("btnCloseWindow");
		btnCloseWindow.onclick = function() {
			if (newWindow) {
				newWindow.close();
				newWindow = undefined;
			}
		}
	};
	function displayTime() {
		var clk = document.getElementById("clock");
		var now = new Date();
		clk.innerHTML = now.toString();
	}
</script>
</head>
<body>
	<div id="div1"></div>
	<input type="button" id="btn" value="button" />
	<input type="button" id="btnStart" value="start" />
	<input type="button" id="btnStop" value="stop" />
	<input type="button" id="btnOpenDlg" value="Open Dialog" />
	<input type="button" id="btnOpenWindow" value="OpenWindow" />
	<input type="button" id="btnCloseWindow" value="CloseWindow" />
	<h1>Digital Clock</h1>
	<span id="clock"></span>
	<input type="checkbox" name="选项一" value="选项一" οnchange="console.log(this.checked);console.log(this.checked);" />
	<a href="javascript:void window.open('http://www.baidu.com');" id="a"></a>
	<br>
	<br>
	<div>
		<input type="file" id="file" />
	</div>

</body>
</html>

dc15822445347

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript基础知识梳理-window全局对象

Insert title here#clock { font: bold 12pt sans-serif; background: #ddf; padding: 10px; border: solid black 2px; border-radius: 10px;} console.log("document.readyState:" + document.readyStat
复制链接

扫一扫

专栏目录