JS日期与定时器详解-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_38292678/article/details/82807435

BOM
1.日期对象

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)。
getTime()
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 对象。

日期对象也是javascript的内置对象之一，我们可以直接使用。
/注意
   getTime方法返回从1970年1月1日到现在的毫秒数，这个时间我们称之为时间戳。
    getMonths方法返回的是0-11，我们要获取当前月份的时候记得加一。/

2.JS定时器
在javascript中，与定时器有关的方法是：

setInterval、clearInterval以及setTimeout、clearTimeout

这些方法都是定义在window对象上面的，因此我们写window.setInterval和解setInterval的意思是一样的，前面的window可以省略掉。

    1.setInterval这个定时器的功能是每过一段时间，就把我们想要执行的函数放到js的执行队列中等待执行。因为执行队列不一定是空的，
    需要等执行队列中的所有任务都执行完之后才会执行我们的函数，因此这个函数执行的时间也会有细微的差别。
        里面的this默认指向window
        setInterval其实很消耗内存，这个定时器一旦执行，就不会终止，因此需要我们的内核一直监听这个函数。

        定时器其实会返回一个标记，这个标记就是定时器的序号数，我们可以通过定时器的这个标记来清除掉相对应的定时器。
        凡是写定时器，一定要清除定时器！

    2.有时候我们只需要这个函数延迟一段时间执行，并不需要专门开启一个定时器，这个时候就需要用到setTimeout了
        只是这个方法只是把函数延迟一段时间之后执行一次而已。
        同时它也有clearTimeout，当我们不想让这个函数执行了，提前把它clear掉就可以了。

3.查看滚动条滚动距离

js中有两套方法可以查看当前滚动条的滚动距离。

第一套是这样的：

window.pageXOffset/window.pageYOffset

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

因此针对于IE，但是这两个方法不仅仅是IE才可以使用。我们就需要有第二套方法：

document.body.scrollLeft/doucment.body.scrollTop

document.documentElement.scrollLeft/document.documentElement.scrollTop

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

兼容滚动条滚动距离的方法：
function getScrollOffset(){
      if(window.pageXOffset) {
            return {
                  x: window.pageXOffset,
                  y: window.pageYOffset
            }
      }
      return {
            x: document.body.scollTop + document.documentElement.scrollTop,
            y: document.body.scrollLeft + document.documentELement.scrollLeft;
}

4.查看视口的尺寸
视口就是我们的可视区，如何来查看当前浏览器的可视区大小？

这里我们依然有两套方法：
1.window.innerHeight/window.innerWidth;
这个方法可以直接获取到当前可视区的宽高，但是依然很遗憾的是IE8以及以下的版本不兼容。

2.在标准模式下，
    doucment.documentElement.clientWidth/document.documentElement.clientHeight  在任何浏览器都兼容
    在怪异模式（混杂模式）下，*****************************************
    document.body.clientWidth/document.body.clientHeight
    才能查看视口大小，而不能使用上面标准模式下的方法。

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

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

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

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

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

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
}
}
}

6.查看元素的几何尺寸
domEle.getBoundingClientRect()

在获取的dom元素上，有一个getBoundingClientRect方法，这个方法可以获取到元素的宽高和左上点的位置以及右下点的位置
（width、height、top、left、right、bottom），老版本的IE浏览器没有实现width和height，那么我们在老版本的IE计算宽高的时候就
需要用bottom-top和right-left来计算宽高值了。

//注意这里的宽高是指除去了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
            }
    }
}

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

dom.offsetWidth/dom.offsetHeight

虽然前面有一个ele.getBoundingClientRect()方法，但是由于这个方法名字是在太长了，因此用的并不是非常多
，相比较而言，这两个dom元素的属性用的更多一些。

这里获取的宽高值和上面的一样，都是除去margin后的盒子模型的宽高。

7.滚动条滚动

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

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

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

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

8.查看元素的位置

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
}
}

Bom操作