Date 对象
Date 对象用于处理日期和时间。
var myDate=new Date()
注释：Date 对象会自动把当前日期和时间保存为其初始值。
贴个链接 自个看看文档，当字典用
点这看data（）
getTime()
获取时间戳，记录时刻
求时间差
var firstTime=new Date().getTime();
for(var i=0;i<1000000;i++){
}
var lastTime=new Date().getTime();
console.log(lastTime-firstTime);
定时器
setInterval
循环定时器,每隔多少毫秒一直执行这个函数
- 每隔10毫秒一直执行这个函数（循环定时器）
setInterval(function() {},10);
- 首先识别time为 1000，它只识别一次，然后一直执行函数，后来改变time就没用了
var time = 1000;
setInterval(function() {},time);
time = 2000;
- setInterval是非常不准的。 setInterval底层是基于红黑树的
window.setInterval，它是window上的，里面函数的this指向window
- setInterval有返回值，它会返回数字就是第几个定时器，作为它的唯一标识
var timer = setInterval(function () {}, 1000);
var timer2 = setInterval(function () {}, 1000);
console.log(timer)//1
console.log(timer2)//2
- clearInterval(timer)，那么清除定时器的时候它会利用唯一标识;
var timer = setInterval(function () {
//想让它停止就加上
clearInterval(timer);
}, 1000);
setTimeout
setTimeout推迟多少毫秒再执行前面的函数，并且只执行一次
var time = setTimeout(function () {}, 1000)
clearTimeOut(time);
全是window上的方法，里面函数的this都指向window
setInterval(“conso.log(‘a’)”, 1000)它有另外的一种特殊的形式，把字符串里面的内容当做js代码在执行
设置一个计时器
<body>
minutes:<input type="text" value="0">
seconds:<input type="text" value="0">
</body>
input{
border: 1px solid rgba(0,0,0,0,8);
text-align: right;
font-size: 20px;
font-weight: bold;
}
// JavaScript Document
var minutesNode = document.getElementsByTagName('input')[0];
var secondsNode = document.getElementsByTagName('input')[1];
var minutes = 0, //设置两个初始值为0
seconds = 0;
var timer = setInterval(function () { //开启定时器
seconds++; //seconds每10毫秒加1
if (seconds === 60) { //当seconds一直增加到等于60的时候
seconds = 0; //seconds清空等于0
minutes++; //然后miutes加上1
}
secondsNode.value = seconds; //secods == secondsNode里面的value
minutesNode.value = minutes; //minutes == minutesNode里面的value
if (minutes === 5) { //当minutes一直增加到等于5的时候
clearInterval(timer); //清理定时器，停止运行！！！
}
}, 10);
获取窗口属性
1.查看滚动条滚动距离
ie9以上及其它浏览器
window.pageXOffset / pageYOffset
得到的数值就是（横向或者竖直）滚动条滚动的距离。
ie8以及ie8以下
document.body.scrollLeft / top
document.documentElement.scrollLeft
兼容性比较混乱，用时取两个值想加，因为不可能存在两个同时有值
(document.body.scrollLeft/scrollTop如果有值，那么documentElement.scrollLeft/scrollTop一定为0)
封装兼容性方法，求滚动轮滚动的距离getScrollOffset()
解决不兼容的问题
function getScrollOffSet () {
if(window.pageOffset) {
return {
x : window.pageXOffset,
y : window.pageYOffset
}
}else{
return {
x : document.body.scrollLeft + documentElement.scrollLeft,
y : document.body.scrollTop + documentElement.scrollTop
}
}
}
2.查看视口的尺寸
ie8和ie8以下不兼容
window.innerWidth /window.innerHeight
标准模式下，任意浏览器都兼容
document.documentElement.clientWidth/clientHeight
怪异模式下
document.body.clientWidth,
document.body.clientHeight
浏览器的渲染模式：
ie标准模式 如声明<!DOCTYPE html> 表示以h5文档
ie怪异模式（混杂模式）,html文档不带 <!DOCTYPE html> 使当前代码支持以前的浏览器版本
查看浏览器处于什么模式document.compatMode//css1Compat（标准模式）/BackCompat（怪异模式）
解决不兼容问题：
function getViewPortOffset () {
if(window.innerWidth) {
return{
w : window.innerWidth,
h : window.innerHeight
}
}else{
if(document.compatMode === "BackCompat") {
return{
w : document.body.clientWidth,
h : document.body.clientHeight
}
}else{
return{
w : document.documentElement.clientWidth,
h : document.documentElement.clientHeight
}
}
}
3.查看元素的几何尺寸
getBoundingClientRect();
兼容性很好
该方法返回一个对象，对象里面有left，top，right，bottom等属性
left和top代表元素左上角的x和y座标，right和bottom代表元素右下角的x和y座标
var box=document.getElementById('box'); // 获取元素
alert(box.getBoundingClientRect().top); // 元素上边距离页面上边的距离
alert(box.getBoundingClientRect().right); // 元素右边距离页面左边的距离
alert(box.getBoundingClientRect().bottom); // 元素下边距离页面上边的距离
alert(box.getBoundingClientRect().left); // 元素左边距离页面左边的距离
返回的结果不是实时的
<div style = "width : 100px; height:100px; background-color: red; position: absolute;left: 100px; top: 100px;"></div>
var div = document.getElementsByTagName('div')[0];
console.log(div.getBoundingClientRect());
查看元素的尺寸
offsetWidth /offsetHeight 包含 padding的宽高，不含margin
查看元素的位置
offsetLeft /offsetTop //对于无定位父级的元素，返回相对文档的座标，对有定位父级的元素，返回相对应于最近有定位的父级的座标。
dom.offsetParent
返回最近有定位的父级，如果没有，返回body，body.offsetParent 返回null
例如：求元素相对于文档的座标 getEmentPosition
4.让滚动条滚动
window上有三个方法
scroll();
scrollTo();
scrollBy()
三个方法功能类似，用法都是将x，y座标传入，实现让滚动轮滚动到当前位置
但是scrollBy() 会在之前的数据基础之上做累加，可用于做快速阅读功能
<script>
function scrollWindow(){
window.scrollBy(500,500);
}
</script>
<body>
<input type="button" onclick="scrollWindow()" value="滚动条" />
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 </p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 </p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 </p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 </p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 </p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 </p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 </p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 </p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
点击按钮滚动500像素
脚本化css
读写元素css的属性
dom.style.prop
可读写行间样式，没有兼容性问题，碰到float这样的保留字属性前面应加css
例如：float---------cssFloat
复合属性必须拆解，组合单词变成小驼峰式写法
写入的值必须是字符串格式
它是唯一一个可读写的方式，但是它只能作用于行间样式，就是说只能读出/写入行间样式的属性值
<style type = "text/css">
div{
width: 200px;
}
</style>
<div style = " height: 100px;background-color: rgb(90, 80, 80); position:absolute;left: 0;top:0; "></div>
var div = document.getElementsByTagName('div')[0];
console.log(div.style.width)//""为空
window.getComputedStyle(ele,null)
获取当前元素一切css展示的显示值
查询计算样式- 计算样式可读
- 返回计算样式的值绝对都是绝对值，没有相对单位
- ie8以及ie8以下不兼容
getComputedStyle()
第二个参数通常情况下为null,但是也可以放上伪元素，来获取它的伪元素的尺寸
window.getComputedStyle(div,"after");//获取伪元素唯一的方法
console.log(window.getComputedStyle(div,"after").width)
ele.currentStyle
查询样式- 计算样式可读
- 返回的计算样式的值不是经过转换的绝对值
- ie独有的属性
- 封装兼容性方法 getStyle（elem.prop）
解决不兼容问题：
function getStyle(elem, prop) {
if(window.getComputedStyle) {
return window.getComputedStyle(elem,null)[prop];
}else{
return elem.currentStyle[prop];
}
}