(一) window對(duì)象
(1) 概述
在瀏覽器中，window對(duì)象（注意，w為小寫）指當(dāng)前的瀏覽器窗口。它也是所有對(duì)象的頂層對(duì)象。
- window對(duì)象，w是小寫
- window對(duì)象，是所以對(duì)象的頂層對(duì)象
- 頂層對(duì)象：指的是最高一層的對(duì)象，所有其他對(duì)象都是它的下屬。
- JavaScript規(guī)定，瀏覽器環(huán)境的所有全局變量，都是window對(duì)象的屬性。
全局變量，window對(duì)象屬性
var a = 1;
window.a // 1
上面代碼中，變量a是一個(gè)全局變量，但是實(shí)質(zhì)上它是window對(duì)象的屬性。
聲明一個(gè)全局變量，就是為window對(duì)象的同名屬性賦值。
(2) window對(duì)象的屬性
(1) window.window
window對(duì)象的window屬性指向自身。
window.window === this // true
(2) window.name
window.name屬性用于設(shè)置當(dāng)前瀏覽器窗口的名字。
- 與<iframe>窗口通信時(shí)，非常有用。
(3) window.location
window.location返回一個(gè)location對(duì)象，用于獲取窗口當(dāng)前的URL信息。它等同于document.location對(duì)象
- window.location返回一個(gè) location 對(duì)象
- location對(duì)象包含了當(dāng)前窗口的 URL 信息
window.location === document.location // true
window.location對(duì)象 = document.location對(duì)象
(4) window.closed
window.closed屬性返回一個(gè)布爾值，表示窗口是否關(guān)閉。
- window.closed 這個(gè)屬性一般用來檢查，使用腳本打開的新窗口是否關(guān)閉。
var x = window.open();
x.closed // false
if (x != null && !x.closed ){
console.log('如果不等于null并且沒有關(guān)閉，則輸出窗口仍然打開著')
}
(5) window.opener
window.opener屬性返回打開當(dāng)前窗口的父窗口。如果當(dāng)前窗口沒有父窗口，則返回null。
- window.opener屬性 返回打開當(dāng)前窗口的父窗口
- 通過opener屬性，可以獲得父窗口的的全局變量和方法
(6) window.screenX屬性，window.screenY屬性
- window.screenX，返回瀏覽器窗口左上角相對(duì)于當(dāng)前屏幕左上角（(0, 0)）的水平距離
- window.screenY，返回瀏覽器窗口左上角相對(duì)于當(dāng)前屏幕左上角（(0, 0)）的垂直距離
(7) window.innerHeight，window.innerWidth
- window.innerHeight屬性，返回 ( 網(wǎng)頁 ) 在當(dāng)前窗口中可見部分的 ( 高度 ) ，即“視口”（viewport），單位為像素
- window.innerWidth屬性， 返回 ( 網(wǎng)頁 ) 在當(dāng)前窗口中可見部分的 ( 寬度 ) ，即“視口”（viewport），單位為像素
- 注意，這兩個(gè)屬性值包括滾動(dòng)條的高度和寬度。
(8) window.outerHeight，window.outerWidth
- window.outerHeight屬性返回 ( 瀏覽器窗口的高度 )，包括瀏覽器菜單和邊框，單位為像素。
- window.outerWidth屬性 返回 ( 瀏覽器窗口的寬度 )，包括瀏覽器菜單和邊框，單位為像素。
(9) window.pageXOffset，window.pageYOffset
- ( 注意 )：----------------------------是只讀屬性
- 因?yàn)槭侵蛔x，所以不帶參數(shù)。
- window.pageXOffset屬性返回頁面的水平滾動(dòng)距離，單位都為像素。
- window.pageYOffset屬性返回頁面的垂直滾動(dòng)距離，單位都為像素。
-
如果用戶向下拉動(dòng)了垂直滾動(dòng)條75像素，那么window.pageYOffset就是75。用戶水平向右拉動(dòng)水平滾動(dòng)條200像素，window.pageXOffset就是200。
window.innerWidth，window.outerWidth，window.screenX，window.pageXOffset
(3) window對(duì)象的方法
(1) window.scrollTo()--------滾動(dòng)到
window.scrollTo方法用于將網(wǎng)頁 ( 滾動(dòng)到 ) 文檔中的某個(gè)坐標(biāo)。
- 它的參數(shù)是相對(duì)于整張網(wǎng)頁的橫坐標(biāo)和縱坐標(biāo)。
- window.scrollTo(x-coord,y-coord )滾動(dòng)到文檔中的某個(gè)坐標(biāo)。
- x-coord 是文檔中的橫軸坐標(biāo)。
- y-coord 是文檔中的縱軸坐標(biāo)。
- 該函數(shù)和 window.scroll是一樣的。
(2) window.scrollBy()--------滾動(dòng)了，有正負(fù)
window.scrollBy方法用于將網(wǎng)頁移動(dòng)指定距離，單位為像素。它接受兩個(gè)參數(shù)：向右滾動(dòng)的像素，向下滾動(dòng)的像素。
- 注意參數(shù)有正負(fù) ( 例如：window.scrollBy(-10,-10)表示上移動(dòng)10px，向左移動(dòng)10px )
(3) window.open()
window.open方法用于新建另一個(gè)瀏覽器窗口，并且返回該窗口對(duì)象。
- open方法一共可以接受四個(gè)參數(shù)。
- 第一個(gè)參數(shù)：
字符串，表示新窗口的網(wǎng)址。如果省略，默認(rèn)網(wǎng)址就是about:blank。 - 第二個(gè)參數(shù)：
字符串，表示新窗口的名字。如果該名字的窗口已經(jīng)存在，則跳到該窗口，不再新建窗口。如果省略，就默認(rèn)使用_blank，表示新建一個(gè)沒有名字的窗口。 - 第三個(gè)參數(shù)：
字符串，內(nèi)容為逗號(hào)分隔的鍵值對(duì)，表示新窗口的參數(shù)，比如有沒有提示欄、工具條等等。如果省略，則默認(rèn)打開一個(gè)完整UI的新窗口。 - 第四個(gè)參數(shù)：
布爾值，表示第一個(gè)參數(shù)指定的網(wǎng)址，是否應(yīng)該替換history對(duì)象之中的當(dāng)前網(wǎng)址記錄，默認(rèn)值為false。顯然，這個(gè)參數(shù)只有在第二個(gè)參數(shù)指向已經(jīng)存在的窗口時(shí)，才有意義
window.open('baidu.html');
// http://localhost:3000/baidu.html
上面代碼會(huì)讓瀏覽器彈出一個(gè)新建窗口，網(wǎng)址是當(dāng)前域名下的baidu.html。
--------------------------------------------
var popup = window.open(
'somepage.html',
'DefinitionsWindows',
'height=200,width=200,location=no,status=yes,resizable=yes,scrollbars=yes'
);
上面代碼表示，打開的新窗口高度和寬度都為200像素，沒有地址欄，有狀態(tài)欄，允許用戶調(diào)整大小，有滾動(dòng)條
(4) window.close()
window.close方法用于關(guān)閉當(dāng)前窗口，一般用來關(guān)閉window.open方法新建的窗口。
- 該方法只對(duì)頂層窗口有效，iframe框架之中的窗口使用該方法無效。
var a = window.open('baidu.html','baidu');
a.close()
//關(guān)閉a窗口
(二) element對(duì)象盒模型屬性
(1) Element.clientHeight，Element.clientWidth
-------------------可見部分寬高度-------------------
--------Element.clientHeight--------只包括padding
--------Element.offsetHeight--------包括padding，border，滾動(dòng)條
- Element.clientHeight屬性返回元素節(jié)點(diǎn) (可見部分的高度 ) 。
- Element.clientWidth 屬性返回元素節(jié)點(diǎn) (可見部分的寬度 ) 。
- 這兩個(gè)屬性可以計(jì)算得到，等于元素的CSS高度（或?qū)挾龋┘由螩SS的Padding，減去滾動(dòng)條（如果存在）。
-
對(duì)于整張網(wǎng)頁來說，當(dāng)前可見高度（即視口高度）要從document.documentElement對(duì)象（即<html>節(jié)點(diǎn)）上獲取，等同于window.innerHeight屬性減去水平滾動(dòng)條的高度。沒有滾動(dòng)條時(shí)，這兩個(gè)值是相等的；有滾動(dòng)條時(shí)，前者小于后者。
document.documentElement.clientHeight === window.innerHeight - 水平滾動(dòng)條的高度 - 所謂“可見部分”，指的是不包括溢出（overflow）的大小，只返回該元素在容器中占據(jù)的大小，對(duì)于有滾動(dòng)條的元素來說，它們等于滾動(dòng)條圍起來的區(qū)域大小。這兩個(gè)屬性的值包括Padding、但不包括滾動(dòng)條、邊框和Margin，單位為像素。
var rootElement = document.documentElement;
// 沒有水平滾動(dòng)條時(shí)
rootElement.clientHeight === window.innerHeight // true
// 沒有垂直滾動(dòng)條時(shí)
rootElement.clientWidth === window.innerWidth // true
(2) Element.clientLeft，Element.clientTop
-----------------邊框的寬高度-------------------
- Element.clientLeft屬性等于元素節(jié)點(diǎn) 左邊框（left border）的寬度，單位為像素。
- Element.clientTop屬性等于元素節(jié)點(diǎn) 頂部邊框 的高度，單位為像素。
- 注意：如果元素的顯示設(shè)為display: inline，它的clientLeft屬性一律為0，不管是否存在左邊框。
(3) Element.scrollHeight，Element.scrollWidth
-------------------總的寬高度-------------------
-------------------------不包括邊框和滾動(dòng)條-------------------------
- Element.scrollHeight屬性返回某個(gè)網(wǎng)頁元素的 ( 總高度 )。
- Element.scrollWidth 屬性返回某個(gè)網(wǎng)頁元素的 ( 總寬度 )。
- 它們返回的是整個(gè)元素的高度或?qū)挾龋ㄓ捎诖嬖跐L動(dòng)條而不可見的部分。
-
可以理解成元素在垂直和水平兩個(gè)方向上可以滾動(dòng)的距離。它們都包括由于溢出容器而無法顯示在網(wǎng)頁上的那部分高度或?qū)挾取＿@兩個(gè)屬性是只讀屬性。
整張網(wǎng)頁的總高度可以從document.documentElement或document.body上讀取。 - 如果內(nèi)容正好適合它的容器，沒有溢出，那么Element.scrollHeight和Element.clientHeight是相等的，scrollWidth屬性與clientWidth屬性是相等的。如果存在溢出，那么scrollHeight屬性大于clientHeight屬性，scrollWidth屬性大于clientWidth屬性。
element.scrollHeight - element.scrollTop === element.clientHeight
存在溢出時(shí)，當(dāng)滾動(dòng)條滾動(dòng)到內(nèi)容底部時(shí)，下面的表達(dá)式為true
如果滾動(dòng)條沒有滾動(dòng)到內(nèi)容底部，上面的表達(dá)式為false。
---------------------------------------------------
這個(gè)特性結(jié)合onscroll事件，可以判斷用戶是否滾動(dòng)到了指定元素的底部，
比如向用戶展示某個(gè)內(nèi)容區(qū)塊時(shí)，判斷用戶是否滾動(dòng)到了區(qū)塊的底部。
(4) Element.scrollLeft，Element.scrollTop
-------scrollTop頂部到最頂部的距離------可讀寫------
- Element.scrollLeft屬性表示網(wǎng)頁元素的水平滾動(dòng)條向右側(cè)滾動(dòng)的像素?cái)?shù)量。
- Element.scrollTop屬性表示網(wǎng)頁元素的垂直滾動(dòng)條向下滾動(dòng)的像素?cái)?shù)量。
- 這兩個(gè)屬性都可讀寫，設(shè)置該屬性的值，會(huì)導(dǎo)致瀏覽器將指定元素自動(dòng)滾動(dòng)到相應(yīng)的位置。
一個(gè)元素的 scrollTop 值是這個(gè)元素的頂部到它的最頂部可見內(nèi)容（的頂部）的距離的度量。當(dāng)一個(gè)元素的內(nèi)容沒有產(chǎn)生垂直方向的滾動(dòng)條，那么它的 scrollTop 值為0。
document.documentElement.scrollLeft
document.documentElement.scrollTop
如果要查看整張網(wǎng)頁的水平的和垂直的滾動(dòng)距離，要從document.documentElemen元素上讀取。
(5) Element.offsetHeight，Element.offsetWidth
--------Element.offsetHeight--------包括padding，border，滾動(dòng)條
--------Element.clientHeight--------只包括padding
- Element.offsetHeight屬性返回元素的垂直高度。
- Element.offsetWidth 屬性返回元素的水平寬度。
offsetHeight可以理解成元素左下角距離左上角的位移，offsetWidth是元素右上角距離左上角的位移。它們的單位為像素，都是只讀。 -
這兩個(gè)屬性值包括Padding和Border、以及滾動(dòng)條。
這也意味著，如果不存在內(nèi)容溢出，Element.offsetHeight只比Element.clientHeight多了邊框的高度。
// 網(wǎng)頁總高度
document.documentElement.offsetHeight
document.body.offsetHeight
// 網(wǎng)頁總寬度
document.documentElement.offsetWidth
document.body.offsetWidth
(6) Element.offsetLeft，Element.offsetTop
- Element.offsetLeft返回當(dāng)前元素左上角相對(duì)于Element.offsetParent節(jié)點(diǎn)的水平位移，
- Element.offsetTop返回垂直位移，單位為像素。通常，這兩個(gè)值是指相對(duì)于父節(jié)點(diǎn)的位移。
總結(jié)：
client，scroll，offset的區(qū)別：
http://blog.csdn.net/k491022087/article/details/52629743
整張網(wǎng)頁的高度和寬度，可以從document.documentElement（即<html>元素）或<body>元素上讀取。
// 網(wǎng)頁總高度
document.documentElement.offsetHeight
document.documentElement.scrollHeight
document.body.offsetHeight
document.body.scrollHeight
// 網(wǎng)頁總寬度
document.documentElement.offsetWidth
document.documentElement.scrollWidth
document.body.offsetWidth
document.body.scrollWidth
由于<html>和<body>的寬度可能設(shè)得不一樣，因此從<body>上取值會(huì)更保險(xiǎn)一點(diǎn)。
-----------------------------------------------------------------------
視口的高度和寬度（包括滾動(dòng)條），有兩種方法可以獲得。
對(duì)于整個(gè)網(wǎng)頁，基本都不會(huì)設(shè)置border，所以只考慮padding和滾動(dòng)條的影響
// 視口高度
window.innerHeight // 包括滾動(dòng)條
document.documentElement.clientHeight // 不包括滾動(dòng)條
// 視口寬度
window.innerWidth // 包括滾動(dòng)條
document.documentElement.clientWidth // 不包括滾動(dòng)條
-----------------------------------------------------------------------
網(wǎng)頁目前滾動(dòng)的距離，可以從document.documentElement節(jié)點(diǎn)，和document.body 上得到。
(重要)(重要)(重要))(重要))(重要))(重要))(重要))(重要))(重要))(重要))(重要)
// 網(wǎng)頁滾動(dòng)的水平距離
document.documentElement.scrollLeft
document.body.scrollLeft
// 網(wǎng)頁滾動(dòng)的垂直距離
document.documentElement.scrollTop
document.body.scrollTop
案列：
回到頂部按鈕功能：
(1) 監(jiān)聽滾動(dòng)事件，如果當(dāng)前的 scrollTop值 大于 文檔的可視高度clientHeight，就顯示回到頂部的按鈕；否則，隱藏；
(2) 設(shè)置總時(shí)間比如：500ms
(3) 求出滾動(dòng)的速度：當(dāng)前的scrollTop值 / 總時(shí)間
(4) 設(shè)置每次滾動(dòng)的時(shí)間stepTime：比如 10ms
(5) 計(jì)算每次滾動(dòng)的距離：速度*stepTime
(6) 設(shè)置定時(shí)器，當(dāng)scrollTop<=0時(shí)，清除定時(shí)器,并跳出定時(shí)器里面的距離計(jì)算
import React,{Component} from 'react';
export default class toTOP extends Component {
state = {
buttonShow: false
}
componentWillMount() {
window.addEventListener('scroll',this.onScroll) // 監(jiān)聽滾動(dòng)事件
}
onScroll = () => {
var currentTop = document.documentElement.scrollTop || document.body.scrollTop; // 頂部到最頂部的距離
var viewPortHeight = document.documentElement.clientHeight || document.body.clientHeight; // 可視高度
if ( currentTop > viewPortHeight) { // 大于顯示按鈕
this.setState({
buttonShow:true
})
} else {
this.setState({ // 小于隱藏按鈕
buttonShow: false
})
}
}
goTop = () => {
var currentTop = document.documentElement.scrollTop || document.body.scrollTop;
var totalTimes = 200;
var speed = currentTop/totalTimes ;
var StepTime = 10;
var setpDistance = speed * StepTime;
var timer = window.setInterval(()=>{ // var itmer = setInterval()也可以，不要window
if ( currentTop <=0 ) {
window.clearInterval(timer);
return;
}
currentTop = currentTop - setpDistance;
document.documentElement.scrollTop = currentTop;
document.body.scrollTop = currentTop;
},StepTime)
}
render() {
return (
<div >
<div>
回到頂部測(cè)試
</div>
<div
ref="button"
onClick={this.goTop}
style={
this.state.buttonShow
?
{
display:'inline-block',
border:'1px solid red',
background:'yellow',
padding:'10px 30px',
position:'fixed',
bottom:'60px',
right:'20px'
}
:
{
display:'none',
border:'1px solid red',
background:'yellow',
padding:'10px 30px',
position:'fixed',
bottom:'60px',
right:'20px'
}
}>
回到頂部
</div>
<div style={{padding:'20px 160px'}}>
年參演電視劇《與青春有關(guān)的日子》，開始在影視圈嶄露頭角[1] 。2005年拍攝古裝劇《錦衣衛(wèi)》。2007年主演趙寶剛導(dǎo)演的青春劇《奮斗》；[2] 同年，主演首部電影《走著瞧》。2008年主演滕華濤執(zhí)導(dǎo)的電視劇《蝸居》，飾演80后城市青年小貝。[1] 2009年，在電影《海洋天堂》中扮演自閉癥患者王大福；同年參演抗戰(zhàn)題材的電視劇《雪豹》[4] 。2011年，主演的電視劇《裸婚時(shí)代》在各大衛(wèi)視播出；[5] 2011年-2012年連續(xù)2年獲得北京大學(xué)生電影節(jié)[6-7] 最受大學(xué)生歡迎男演員獎(jiǎng)。2012年，憑借電影《失戀33天》獲得第31屆大眾電影百花獎(jiǎng)最佳男主角獎(jiǎng)；[8] 同年成立自己經(jīng)營(yíng)的北京君竹影視文化有限公司，并導(dǎo)演第一部影視作品《小爸爸》。2013年2月，主演的電影《西游·降魔篇》在全國(guó)上映。[9]
2014年3月28日，主演的中韓合資文藝愛情片《我在路上最愛你》在全國(guó)上映。2014年12月18日，在姜文執(zhí)導(dǎo)的動(dòng)作喜劇片《一步之遙》中扮演武七一角。[10] 2016年，主演電視劇《少帥》，飾演張學(xué)良[11] ；主演電視劇《剃刀邊緣》[12] 。7月15日導(dǎo)演的電影《陸垚知馬俐》上映。[13]
演藝事業(yè)外，文章也參與公益慈善事業(yè)，2010年成立大福自閉癥關(guān)愛基金。
2017年9月16日，憑借《陸垚知馬俐》獲得第31屆中國(guó)電影金雞獎(jiǎng)導(dǎo)演處女作獎(jiǎng)。[14]
關(guān)于你。就是因?yàn)槲业暮ε拢矣H眼看你走向她。我喜歡你是事實(shí)，你有女朋友也是事實(shí)。我以為我不說出口就會(huì)保持這樣的朋友關(guān)系，卻還是她趕了個(gè)巧，那應(yīng)該是個(gè)寒假，你有女朋友了，我還是聽說，我那么愛，卻還是無果。于是我和她之間就莫名其妙的就多少有了敵人的感覺，或許就是別人口中的那樣，世界上完全不相干的兩個(gè)女人，會(huì)因?yàn)橐粋€(gè)男人要么很友好，要么是仇恨。關(guān)于她我做不到友好，但也不是仇恨，只是你選擇了她，我就希望她好好愛你，照顧你，連我的份也一起愛了。自愛上你的那天起，思念便成了戒不掉的癮。你的一言一笑，一顰一蹙，無不牽動(dòng)我的心，百千塵思，唯念一縷；萬千紅顏，唯戀一人。我愿意一生漂泊浪跡在你的故事里，甘愿為你鞍前馬后，馬首是瞻，即使你從未給我一句承諾，即使你從未給我半分愛情，依然無悔無怨。
關(guān)于你。一場(chǎng)高考，考散了我們，畢業(yè)了會(huì)不會(huì)就是終生最后一見，很高興，我們不是。各奔東西了，你們繼續(xù)上了大學(xué)，值得欣慰的是，你們也是異地，這樣不能算是我心機(jī)，只能說是恰巧，你們的安排恰合我意。后來也有聽說，她從她的城市去看你，而那時(shí)的我能說什么呢。她是真心愛你，這是事實(shí)。我也曾和閨蜜說過，一生至少該有一次，為了某個(gè)人而忘了自己，不求有結(jié)果，不求同行，不求曾經(jīng)擁有，甚至不求你愛我，只求在我最美的年華里，遇到你。今生遇見你，我覺得是幸福的，盡管這幸福交雜著萬般痛苦。我也曾幻想著悄悄地去到你的學(xué)校，在某個(gè)陽光明媚的下午，在你去教室的路上和你來場(chǎng)偶遇，精心準(zhǔn)備的偶遇，。可是我還來不及去和你偶遇，你們就畢了業(yè)。愛是種很玄的東西，說不清，道不明，剪不斷，理還亂。世上，有種愛明知沒有結(jié)果，卻依然堅(jiān)守原地，不舍離去，哪怕握不住你的一絲余溫，依然選擇默默為你守候。一路來去，心門只為你獨(dú)開，山城只為你獨(dú)駐，白天只為你旖旎，黑夜只為你流連。因?yàn)閻勰悖呐滦娜胱』膷u，還是會(huì)以最深情的眼神，看著你幸福。
</div>
</div>
)
}
}
