<!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>
javascript基础知识梳理-window全局对象
最新推荐文章于 2023-10-14 22:08:55 发布