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