js的对象

js里的bom操作浏览器的三大对象主要为window、location、和history。

1.window

window对象被所有浏览器所支持（window是顶级变量）。

1）window窗口的尺寸

console.log(window.screen.width);
console.log(window.screen.availWidth);
console.log(window.screen.height);
console.log(window.screen.availHeight);

width和height指3整个window窗口的宽高，而availWidth和availHeight指window窗口出去导航栏的宽高。

2）浏览器可视区域的宽高

console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);

浏览器有默认的外边距为8，我们可以通过获取body的宽高来验证：

console.log(document.body.clientWidth);
console.log(document.body.clientHeight);

3）窗口可视区宽高

console.log(window.innerWidth);
console.log(window.innerHeight);

获取出来的结果近似可视区域的宽高，但是这里的可视区域会因窗口的大小而改变。

4）打开和关闭窗口

window.open("http://www.baidu.com");  //打开一个新的的窗口
window.close();  //用于关闭窗口

5）一些常见的window里的方法

alert是弹框，confirm是带确认按钮的提示框，prompt是带输入框和确认按钮的弹框。

6）window对象里的两个计时器

setTimeout(); 这个计时器是延迟一段时间，然后执行，只执行一次。

setInterval(); 这个计时器是延迟一段时间，然后执行，循环执行。

//setTimeout计时器只执行一次，最后结果是1
var begin=0;
setTimeout(function(){
    begin++;
    console.log(begin);
},1000);

//让setTimeout方法成为循环计时器采用递归
var time;
var count=0;
showtime();
function showtime(){
    count++;
    console.log(count);
    time=setTimeout("showtime()",1000);
}
//让它停止
var stopbtn=document.getElementById("stopbtn");
stopbtn.onclick=function(){
    clearTimeout(time);
}
//继续计时
var beginbtn=document.getElementById("beginbtn");
beginbtn.onclick=function(){
    time=setTimeout("showtime()",1000);
}

//setInterval循环计时器
var time;
var count=0;
showtime();
function showtime(){
    time=setInterval(function(){
        count++;
        console.log(count);
    },1000);
}
//让它停止
var stopbtn=document.getElementById("stopbtn");
stopbtn.onclick=function(){
    clearInterval(time);
}
//继续计时
var beginbtn=document.getElementById("beginbtn");
beginbtn.onclick=function(){
    showtime();
}

2.Math对象

在Math对象中有自己的封装方法。

console.log(Math.PI);  //取π，3.14
console.log(Math.abs(-1));  //取绝对值
console.log(Math.ceil(2.3));  //向上取整
console.log(Math.floor(3.2));  //向下取整
console.log(Math.round(4.6));  //四舍五入取整
console.log(Math.min(1, 2, 5));  //最小值
console.log(Math.max(1, 2, 5));  //最大值
console.log(Math.random());  //随机数0-1，取小不取大
Math.sin()
Math.cos()
Math.tan()
Math.arc() //数学的正弦、余弦、正切、反函数
console.log(Math.pow(2, 3));  //次幂

3.Date对象

var time = new Date();
//有些时间的结果是从1970 0 点开始计算
console.log(time.getFullYear());
console.log(time.getYear());
console.log(time.getMonth() + 1);
console.log(time.getDay());
console.log(time.getDate());
console.log(time.getHours());
console.log(time.getMinutes());
console.log(time.getSeconds());
console.log(time.getMilliseconds());
console.log(time.toDateString());
console.log(time.toLocaleDateString());
console.log(time.toLocaleString());
console.log(time.toLocaleTimeString());
console.log(time.toTimeString());

显示结果如图：

日期可以自定义设置：

var time1=new Date("2019 1/20 12:00:00");
var time2=new Date(2019,0,20,12,0,0);  //用非字符串赋值时，月份要从0开始计算

//也可以分开分别设置
var time=new Date();
time.setFullYear(2020);
time.setDate(11);
time.setMonth(10);
time.setHours(12);
time.setMinutes(80);
time.setSeconds(70);
console.log(time);

4.history

多用于历史记录

history.go(1);  //前进
history.go(-1);  //后退

5.location

console.log(location.href);
console.log(location.host);
console.log(location.port);