Window对象
是一个顶级对象,不是任何对象的属性,所以可以不写window.xxx而直接使用内部的属性和方法。
实际上,在web前端开发时,所有的全局变量都自动成为window对象的属性
Window对象的属性
Screen
History
Location
Navigator
Document(DOM)
Window对象的方法
alert
confirm
prompt
setIntervel
setTimeout
clearInterval()
open
Close(只能关闭使用js打开的浏览器窗口)
Screen对象
根据显示器宽度动态引入CSS外部文件
方法:给link标记添加id,根据width属性值修改link中的href值。
History对象
方法:
back():后退一个历史页面
forward():前进一个历史页面
go(路径深度)
Location对象
Confirm方法
让用户选择是否继续进行浏览器默认行为。使用return 将confirm的用户选择结果返回给某个事件,true时将会继续该事件的默认行为,false时将会中止该事件的默认行为。
setTimeOut
格式:
setTimeOut(function(){},毫秒数)
setInterval与clearInterval
setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
时间日期函数
获取当前日期时间的方法:
var dd=new Date();//此时dd就是当前的日期时间,是一个日期时间型变量
可用以下方法获取或设置具体时间
getDate()从 Date 对象返回一个月中的某一天
getDay()从 Date 对象返回一周中的某一天 (0 ~ 6)。getMonth()从 Date 对象返回月份 (0 ~ 11)。getFullYear()从 Date 对象以四位数字返回年份。getHours()返回 Date 对象的小时 (0 ~ 23)。getMinutes()返回 Date 对象的分钟 (0 ~ 59)。getSeconds()返回 Date 对象的秒数 (0 ~ 59)。
Open/close方法
open的格式
window.open([url,][name,][features,][replace])
url:要打开的网页路径
Name:窗口名称(通常使用target属性值)
Features:窗口特征,属性列表
Replace:是否替换浏览历史条目
Close方法:
window.close();不同浏览器支持度不同,但是都支持 关闭由js打开的浏览器窗口
open方法举例
window.open 基本语法: window.open(pageURL,name,parameters);具体示例window.open(‘page.html’, ‘newwindow’, ‘height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no’)相关参数说明window.open 弹出新窗口的命令; ‘page.html’ 弹出窗口的文件名; ‘newwindow’ 弹出窗口的名字(不是文件名),非必须,可用空’'代替; 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 lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>返回</button>
<a href="http://www.baidu.com" onclick="return false">点我进到百度</a>
<button onclick="closeWin()">关闭这个窗口</button>
<script>
//----window对象是全局对象,全局定义的所有变量和函数其实都默认地成为了window对象中的属性和方法
// console.log(window);
// window.alert("大家好");
// var aaa = 123;
// console.log(window);
// function aaff(){
// aabbcc = 222;//这里其实是造价于window.aabbcc = 222;
// var aaabbb = 333;
// }
// aaff();
// console.log(aabbcc);
// console.log(window);
// //-----screen对象,客户端显示器的信息
// console.log("你的显示器分辨率为:height."+window.screen.height)
// console.log("你的显示器分辨率为:width."+window.screen.width)
// //
//------history对象
// function backurl(){
// window.history.back();
// }
//---------location对象
// console.log(window.location);
//-----navigator对象
//console.log(window.navigator);
//以下是window对象的常用方法
//----------confirm方法
// function clickA(){
// var confirmValue;
// confirmValue = confirm("你想打开这个链接吗?")//用户选择是或否,通过返回值来继续进行下一步操作
// console.log(confirmValue);
// return confirmValue;
// }
//---------setTimeOut方法
// setTimeout(function(){
// document.write("这个警告框将在网页打开5秒后显示")
// },5000);
//-----------setInterval和clearInterval方法
// var count = 0;
// var setInvalId = setInterval(function() {
// count++;
// document.write(count);
// }, 1000);
// setTimeout(() => {//箭头函数的写法
// clearInterval(setInvalId);
// }, 8000);
function closeWin(){
//window.close();//兼容性的问题
window.open("about:blank","_self");//用打开空白页的方式模拟
}
</script>
</body>
</html>