js（十三）---日期对象、定时器、滚动条、元素的尺寸

日期对象

日期这个对象，也是一个内置的构造函数，可以直接调用。

var date = new Date();

具体还是w3c上的日期 介绍比较清楚，可以自己看一下。

这里大致说一下就行了：

Date() 返回当日的日期和时间。

getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。

getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。

getMonth() 从 Date 对象返回月份 (0 ~ 11)。

getFullYear() 从 Date 对象以四位数字返回年份。

getYear() 请使用 getFullYear() 方法代替。

getHours() 返回 Date 对象的小时 (0 ~ 23)。

getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。

getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。

getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。

setDate() 设置 Date 对象中月的某一天 (1 ~ 31)。

setMonth() 设置 Date 对象中月份 (0 ~ 11)。

setFullYear() 设置 Date 对象中的年份（四位数字）。

setYear() 请使用 setFullYear() 方法代替。

setHours() 设置 Date 对象中的小时 (0 ~ 23)。

setMinutes() 设置 Date 对象中的分钟 (0 ~ 59)。

setSeconds() 设置 Date 对象中的秒钟 (0 ~ 59)。

setMilliseconds() 设置 Date 对象中的毫秒 (0 ~ 999)。

setTime() 以毫秒设置 Date 对象。

其中值得注意的是，getMonths方法返回的是0-11，我们要获取当前月份的时候记得加一。

另外一点getTime方法返回从1970年1月1日到现在的毫秒数，这个时间我们称之为时间戳。

定时器

这个知识点经常用的到，而且一般在写一个动态变化是，经常用的到。

那这个定时器到底是什么呢？

分别是： setInterval和setTimeout

不可能定时器一直在运转吧，结束了之后得想办法让它停下来啊。那就有了清除定时器，对应的是clearInterval和clearTimeout。

这些方法都是定义在window对象上面的，因此我们写window.setInterval和解setInterval的意思是一样的，前面的window可以省略掉。所以说之前讲this指向的时候，定时器里的this为什么会指向window，就是这个原因。

setInterval这个定时器的功能是每过一段时间，就把我们想要执行的函数放到js的执行队列中等待执行。因为执行队列不一定是空的，需要等执行队列中的所有任务都执行完之后才会执行我们的函数，因此这个函数执行的时间也会有细微的差别。

window.setInterval(function () {}, 1000);

第一个参数是我们要执行的函数，第二个参数是每过多长时间把函数放入执行队列。

setInterval其实很消耗内存，这个定时器一旦执行，就不会终止，因此需要我们的内核一直监听这个函数。

这个时候我们就需要一个方法来清除定时器了：clearInterval(timer)。

定时器其实会返回一个标记，我们可以通过定时器的这个标记来清除掉相对应的定时器。

var i = 0;
var timer = setInterval(function () {
      i++;
      if(i === 10) {
            clearInterval(timer);
      }
}, 100);

这个定时器，当i==10时，定时器就被清除掉了，清除了，之后，里面的队列函数也就不会执行了。

有时候我们只需要这个函数延迟一段时间执行，并不需要专门开启一个定时器，这个时候就需要用到setTimeout了。

setTimeout是延迟执行的意思，语法和用法和setInterval一样，只是这个方法只是把函数延迟一段时间之后执行一次而已。

同时它也有clearTimeout，当我们不想让这个函数执行了，提前把它clear掉就可以了。

其实setInterval和setTimeout的第一个参数不一定非要是一个函数，它也可以是一串字符型的js代码。

通过这个特性，我们不一定要把函数写在定时器里面，大部分时间我们都是在外部把函数定义好了，然后直接把函数名传进去就可以了。

function test () {
    console.log(666)
}
setInterval(test, 1000);    

查看滚动条

js中查看滚动条的有两种方法：

第一种：

window.pageXOffset/window.pageYOffset

这个方法可以查看滚动条的横轴和纵轴的滚动距离，但是很遗憾的是IE8以及以下的版本不兼容。

第二种：

document.body.scrollLeft/doucment.body.scrollTop
document.documentElement.scrollLeft/document.documentElement.scrollTop

虽然IE可以使用这两个方法，但是这两个方法不仅仅是IE才可以使用。

这里要说明的是，这两种方法要一起使用，因为浏览器的兼容性问题，有的浏览器是document.body有值，有的是document.documentElement有值，但是所有的浏览器都只有一个有值，不会两个都有或者一个都没有，而且这里的没有值不代表是null，而是0，因此我们使用的时候一般都是两个一起使用。

针对兼容性的问题，我们现在就可以封装一个函数，求滚动条滚动距离的方法。

function getScrollOffset(){
      if(window.pageXOffset) {
            return {
                  x: window.pageXOffset,
                  y: window.pageYOffset
            }
      }
      return {//兼容IE浏览器
            x: document.body.scollTop + document.documentElement.scrollTop,
            y: document.body.scrollLeft + document.documentELement.scrollLeft
}

查看视口的尺寸

一般计算可视口的宽高，有两种方法（也就是兼容的问题）：

第一种：

window.innerHeight/window.innerWidth;

这个方法可以直接获取到当前可视区的宽高，但是IE8以及以下的版本不兼容,这一款兼容的问题有很多的，可能就是浏览器刚刚起步，大家都没有什么规范。

第二种：

第二种也是分为模式的：

doucment.documentElement.clientWidth/document.documentElement.clientHeight（标准模式）这种模式兼容性比较好，什么浏览器都兼容。

document.body.clientWidth/document.body.clientHeight（怪异模式），只有在怪异模式下才能使用这种方法。

• 什么是怪异模式和标准模式呢？

浏览器的渲染模式有两种：标准模式和怪异模式。我们常用的是标准模式，怪异模式是防止浏览器升级版本过高对后面版本你的代码不兼容，让浏览器可以向后兼容其他低版本的代码的法规则，比如IE6的怪异模式下可以兼容IE5个IE4的语法。

• 我们如何变成怪异模式呢？

其实很简单，只需要把我们html代码的第一行的去掉就可以变成怪异模式了，而加上这一行代码就可以变成标准模式。

• 如何判断怪异模式还是标准模式？

document上中有一个方法叫做compatMode，当浏览器处于怪异模式的时候会返回字符串“BackCompat”，在标准模式下可以返回“CSS1Compat”，通过这个方法我们就可以判断了。

  function getViewportOffset () {
      if(window.innerWidth) {
            return {
                  w: window.innerWidth,
                  h: window.innerHeight
            }
      }
      if(document.compatMode == 'CSS1Compat') {
            return {
                  w: document.documentElement.clientWidth,
                  h: document.documentElement.clientHeight
      }else {
            return {
                  w: document.body.clientWidth,
                  h: document.body.clientHeight
            }
      }
}  

上面封装的方法，无论在什么样的模式下都是比较好用的。

查看元素的几何尺寸

先来看一下，元素中的一个方法：

domEle.getBoundingClientRect()

在获取的dom元素上，有一个getBoundingClientRect方法，这个方法可以获取到元素的宽高和左上点的位置以及有下点的位置（width、height、top、left、right、bottom），注意这里的宽高是指除去了margin的盒子模型的宽高。

还有一点需要注意的是，这里的宽高也不是实时更新的，数据只是一个副本。

我们依然可以封装一个函数，可以返回元素的宽高。

Element.getElementOffset() {
      var objData = this.getBoundingClientRect();
      if(objData.width) {
            return {
                  w: objData.width,
                  h: objData.height
            }
      }else {
            return {
                  w: objData.right - objData.left,
                  h: objData.bottom - objData.top
            }
      }
}

滚动条滚动

让滚动条滚动的方法有三个：scroll、scrollTo、scrollBy。

这三个方法都有两个参数，分别是x值和y值。前两个方法的作用一模一样，都是让滚动条滚动到（x，y）的位置，但是最后一个scrollBy有一些区别，它是让滚动条相对于上一个位置滚动多少距离。

我们可以简单的用这个方法来实现一个自动阅读的功能：

setInterval(function () {
scrollBy(0, 10);
},50);

另一个查看元素尺寸的方法

dom.offsetWidth/dom.offsetHeight

查看元素的位置

dom.offsetLeft/dom.offsetTop

这两个值分别是元素距离左侧和上侧的距离，这里的值是相对于有定位的父级而言的，如果没有有定位的父级的话，才是相对于文档的坐标。

那么现在就来了一个问题：如何找到有定位的父级呢？

domEle上面还有一个属性是offsetParent，这个属性可以查看到元素的有定位的父级，如果没有的话就会返回body，而body的offsetParent则是null。

我们利用上面的信息，可以来封装一个函数，求元素的相对于文档的坐标。

Element.prototype.getPosition = function (){
      if (!this.offsetParent){
            return {
                  "w": this.offsetLeft,
                  "h": this.offsetTop
            }
      }
      var width = this.offsetLeft,
            height = this.offsetTop,
            ele = this.offsetParent;
      while (ele.offsetParent){
            width += this.offsetParent.offsetLeft;
            height += this.offsetParent.offsetTop;
            ele = ele.offsetParent;
      }
      return {
            "w": width,
            "h": height
      }
}

这里的兼容性的问题比较多，而且需要记得内容也比较多，只要多多使用，慢慢的就记住了。