(一) window對象

(1) 概述

在瀏覽器中碟联，window對象（注意荣病，w為小寫）指當前的瀏覽器窗口。它也是所有對象的頂層對象谭期。

window對象，w是小寫
window對象吧凉，是所以對象的頂層對象
頂層對象：指的是最高一層的對象隧出，所有其他對象都是它的下屬。
JavaScript規(guī)定阀捅，瀏覽器環(huán)境的所有全局變量胀瞪，都是window對象的屬性。

全局變量也搓，window對象屬性


var a = 1;
window.a // 1


上面代碼中赏廓，變量a是一個全局變量涵紊，但是實質(zhì)上它是window對象的屬性傍妒。

聲明一個全局變量，就是為window對象的同名屬性賦值摸柄。

(2) window對象的屬性

(1) window.window

window對象的window屬性指向自身颤练。


window.window === this // true

(2) window.name

window.name屬性用于設置當前瀏覽器窗口的名字。

與<iframe>窗口通信時驱负，非常有用嗦玖。

(3) window.location

window.location返回一個location對象患雇，用于獲取窗口當前的URL信息。它等同于document.location對象

window.location返回一個 location 對象
location對象包含了當前窗口的 URL 信息


window.location === document.location // true

window.location對象 = document.location對象

(4) window.closed

window.closed屬性返回一個布爾值宇挫，表示窗口是否關(guān)閉苛吱。

window.closed 這個屬性一般用來檢查，使用腳本打開的新窗口是否關(guān)閉器瘪。

var x = window.open();

x.closed    // false

if (x != null && !x.closed ){
    console.log('如果不等于null并且沒有關(guān)閉翠储，則輸出窗口仍然打開著')
}

(5) window.opener

window.opener屬性返回打開當前窗口的父窗口。如果當前窗口沒有父窗口橡疼，則返回null援所。

window.opener屬性返回打開當前窗口的父窗口
通過opener屬性，可以獲得父窗口的的全局變量和方法

(6) window.screenX屬性欣除，window.screenY屬性

window.screenX住拭，返回瀏覽器窗口左上角相對于當前屏幕左上角（(0, 0)）的水平距離
window.screenY，返回瀏覽器窗口左上角相對于當前屏幕左上角（(0, 0)）的垂直距離

(7) window.innerHeight历帚，window.innerWidth

window.innerHeight屬性滔岳，返回 ( 網(wǎng)頁 ) 在當前窗口中可見部分的 ( 高度 ) ，即“視口”（viewport）挽牢，單位為像素
window.innerWidth屬性澈蟆，返回 ( 網(wǎng)頁 ) 在當前窗口中可見部分的 ( 寬度 ) ，即“視口”（viewport）卓研，單位為像素
注意趴俘，這兩個屬性值包括滾動條的高度和寬度。

(8) window.outerHeight奏赘，window.outerWidth

window.outerHeight屬性返回 ( 瀏覽器窗口的高度 )寥闪，包括瀏覽器菜單和邊框，單位為像素磨淌。
window.outerWidth屬性返回 ( 瀏覽器窗口的寬度 )疲憋，包括瀏覽器菜單和邊框，單位為像素梁只。

(9) window.pageXOffset缚柳，window.pageYOffset

( 注意 )：----------------------------是只讀屬性
因為是只讀，所以不帶參數(shù)搪锣。
window.pageXOffset屬性返回頁面的水平滾動距離丰辣，單位都為像素。
window.pageYOffset屬性返回頁面的垂直滾動距離搪搏，單位都為像素架诞。
如果用戶向下拉動了垂直滾動條75像素，那么window.pageYOffset就是75。用戶水平向右拉動水平滾動條200像素弹澎，window.pageXOffset就是200朴下。

window.innerWidth，window.outerWidth苦蒿，window.screenX殴胧，window.pageXOffset

(3) window對象的方法

(1) window.scrollTo()--------滾動到

window.scrollTo方法用于將網(wǎng)頁 ( 滾動到 ) 文檔中的某個坐標。

它的參數(shù)是相對于整張網(wǎng)頁的橫坐標和縱坐標佩迟。
window.scrollTo(x-coord,y-coord )滾動到文檔中的某個坐標溃肪。
x-coord 是文檔中的橫軸坐標。
y-coord 是文檔中的縱軸坐標音五。
該函數(shù)和 window.scroll是一樣的惫撰。

(2) window.scrollBy()--------滾動了，有正負

window.scrollBy方法用于將網(wǎng)頁移動指定距離躺涝，單位為像素厨钻。它接受兩個參數(shù)：向右滾動的像素，向下滾動的像素坚嗜。

注意參數(shù)有正負 ( 例如：window.scrollBy(-10,-10)表示上移動10px夯膀，向左移動10px )

(3) window.open()

window.open方法用于新建另一個瀏覽器窗口，并且返回該窗口對象苍蔬。

open方法一共可以接受四個參數(shù)诱建。
第一個參數(shù)：字符串，表示新窗口的網(wǎng)址碟绑。如果省略俺猿，默認網(wǎng)址就是about:blank。
第二個參數(shù)：字符串格仲，表示新窗口的名字押袍。如果該名字的窗口已經(jīng)存在，則跳到該窗口凯肋，不再新建窗口谊惭。如果省略，就默認使用_blank侮东，表示新建一個沒有名字的窗口圈盔。
第三個參數(shù)：字符串，內(nèi)容為逗號分隔的鍵值對悄雅，表示新窗口的參數(shù)驱敲，比如有沒有提示欄、工具條等等煤伟。如果省略癌佩，則默認打開一個完整UI的新窗口木缝。
第四個參數(shù)：布爾值便锨，表示第一個參數(shù)指定的網(wǎng)址围辙，是否應該替換history對象之中的當前網(wǎng)址記錄，默認值為false放案。顯然姚建，這個參數(shù)只有在第二個參數(shù)指向已經(jīng)存在的窗口時，才有意義


window.open('baidu.html');

// http://localhost:3000/baidu.html

上面代碼會讓瀏覽器彈出一個新建窗口吱殉，網(wǎ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)整大小押赊，有滾動條

(4) window.close()

window.close方法用于關(guān)閉當前窗口饺藤，一般用來關(guān)閉window.open方法新建的窗口。

該方法只對頂層窗口有效流礁，iframe框架之中的窗口使用該方法無效涕俗。

var a = window.open('baidu.html','baidu');

a.close()

//關(guān)閉a窗口

(二) element對象盒模型屬性

(1) Element.clientHeight，Element.clientWidth

-------------------可見部分寬高度-------------------

--------Element.clientHeight--------只包括padding

--------Element.offsetHeight--------包括padding神帅，border再姑，滾動條

Element.clientHeight屬性返回元素節(jié)點 (可見部分的高度 ) 。
Element.clientWidth 屬性返回元素節(jié)點 (可見部分的寬度 ) 找御。
這兩個屬性可以計算得到元镀，等于元素的CSS高度（或?qū)挾龋┘由螩SS的Padding，減去滾動條（如果存在）霎桅。
對于整張網(wǎng)頁來說凹联，當前可見高度（即視口高度）要從document.documentElement對象（即<html>節(jié)點）上獲取，等同于window.innerHeight屬性減去水平滾動條的高度哆档。沒有滾動條時蔽挠，這兩個值是相等的；有滾動條時瓜浸，前者小于后者澳淑。
document.documentElement.clientHeight === window.innerHeight - 水平滾動條的高度
所謂“可見部分”，指的是不包括溢出（overflow）的大小插佛，只返回該元素在容器中占據(jù)的大小杠巡，對于有滾動條的元素來說，它們等于滾動條圍起來的區(qū)域大小雇寇。這兩個屬性的值包括Padding氢拥、但不包括滾動條蚌铜、邊框和Margin，單位為像素嫩海。


var rootElement = document.documentElement;

// 沒有水平滾動條時
rootElement.clientHeight === window.innerHeight // true

// 沒有垂直滾動條時
rootElement.clientWidth === window.innerWidth // true

(2) Element.clientLeft冬殃，Element.clientTop

-----------------邊框的寬高度-------------------

Element.clientLeft屬性等于元素節(jié)點左邊框（left border）的寬度，單位為像素叁怪。
Element.clientTop屬性等于元素節(jié)點頂部邊框的高度审葬，單位為像素。
注意：如果元素的顯示設為display: inline奕谭，它的clientLeft屬性一律為0涣觉，不管是否存在左邊框。

(3) Element.scrollHeight血柳，Element.scrollWidth

-------------------總的寬高度-------------------

-------------------------不包括邊框和滾動條-------------------------

Element.scrollHeight屬性返回某個網(wǎng)頁元素的 ( 總高度 )官册。
Element.scrollWidth 屬性返回某個網(wǎng)頁元素的 ( 總寬度 )。
它們返回的是整個元素的高度或?qū)挾饶寻疲ㄓ捎诖嬖跐L動條而不可見的部分膝宁。
可以理解成元素在垂直和水平兩個方向上可以滾動的距離。它們都包括由于溢出容器而無法顯示在網(wǎng)頁上的那部分高度或?qū)挾绕苷ァ＿@兩個屬性是只讀屬性昆汹。
整張網(wǎng)頁的總高度可以從document.documentElement或document.body上讀取。
如果內(nèi)容正好適合它的容器婴栽，沒有溢出满粗，那么Element.scrollHeight和Element.clientHeight是相等的，scrollWidth屬性與clientWidth屬性是相等的愚争。如果存在溢出映皆，那么scrollHeight屬性大于clientHeight屬性，scrollWidth屬性大于clientWidth屬性轰枝。


element.scrollHeight - element.scrollTop === element.clientHeight


存在溢出時捅彻，當滾動條滾動到內(nèi)容底部時，下面的表達式為true

如果滾動條沒有滾動到內(nèi)容底部鞍陨，上面的表達式為false步淹。



---------------------------------------------------

這個特性結(jié)合onscroll事件，可以判斷用戶是否滾動到了指定元素的底部诚撵，

比如向用戶展示某個內(nèi)容區(qū)塊時缭裆，判斷用戶是否滾動到了區(qū)塊的底部。

(4) Element.scrollLeft寿烟，Element.scrollTop

-------scrollTop頂部到最頂部的距離------可讀寫------

Element.scrollLeft屬性表示網(wǎng)頁元素的水平滾動條向右側(cè)滾動的像素數(shù)量澈驼。
Element.scrollTop屬性表示網(wǎng)頁元素的垂直滾動條向下滾動的像素數(shù)量。
這兩個屬性都可讀寫筛武，設置該屬性的值缝其，會導致瀏覽器將指定元素自動滾動到相應的位置挎塌。
一個元素的 scrollTop 值是這個元素的頂部到它的最頂部可見內(nèi)容（的頂部）的距離的度量。當一個元素的內(nèi)容沒有產(chǎn)生垂直方向的滾動條内边，那么它的 scrollTop 值為0榴都。


document.documentElement.scrollLeft

document.documentElement.scrollTop

如果要查看整張網(wǎng)頁的水平的和垂直的滾動距離，要從document.documentElemen元素上讀取假残。

(5) Element.offsetHeight缭贡，Element.offsetWidth

--------Element.offsetHeight--------包括padding炉擅，border辉懒，滾動條

--------Element.clientHeight--------只包括padding

Element.offsetHeight屬性返回元素的垂直高度。
Element.offsetWidth 屬性返回元素的水平寬度谍失。
offsetHeight可以理解成元素左下角距離左上角的位移眶俩，offsetWidth是元素右上角距離左上角的位移。它們的單位為像素快鱼，都是只讀颠印。
這兩個屬性值包括Padding和Border、以及滾動條抹竹。
這也意味著线罕，如果不存在內(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返回當前元素左上角相對于Element.offsetParent節(jié)點的水平位移，
Element.offsetTop返回垂直位移袄琳，單位為像素询件。通常，這兩個值是指相對于父節(jié)點的位移唆樊。

總結(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>的寬度可能設得不一樣，因此從<body>上取值會更保險一點片效。






-----------------------------------------------------------------------

視口的高度和寬度（包括滾動條）红伦，有兩種方法可以獲得。
對于整個網(wǎng)頁堤舒，基本都不會設置border色建，所以只考慮padding和滾動條的影響


// 視口高度
window.innerHeight // 包括滾動條
document.documentElement.clientHeight // 不包括滾動條

// 視口寬度
window.innerWidth // 包括滾動條
document.documentElement.clientWidth // 不包括滾動條






-----------------------------------------------------------------------

網(wǎng)頁目前滾動的距離，可以從document.documentElement節(jié)點舌缤，和document.body 上得到箕戳。

(重要)(重要)(重要))(重要))(重要))(重要))(重要))(重要))(重要))(重要))(重要)



// 網(wǎng)頁滾動的水平距離
document.documentElement.scrollLeft
document.body.scrollLeft

// 網(wǎng)頁滾動的垂直距離
document.documentElement.scrollTop
document.body.scrollTop

案列：

回到頂部按鈕功能：
(1) 監(jiān)聽滾動事件某残，如果當前的 scrollTop值大于文檔的可視高度clientHeight，就顯示回到頂部的按鈕陵吸；否則玻墅，隱藏；
(2) 設置總時間比如：500ms
(3) 求出滾動的速度：當前的scrollTop值 / 總時間
(4) 設置每次滾動的時間stepTime：比如 10ms
(5) 計算每次滾動的距離：速度*stepTime
(6) 設置定時器壮虫，當scrollTop<=0時澳厢，清除定時器,并跳出定時器里面的距離計算


import React,{Component} from 'react';



export default class toTOP extends Component {
    state = {
        buttonShow: false
    }
    componentWillMount() {
        window.addEventListener('scroll',this.onScroll)  // 監(jiān)聽滾動事件
    }
    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>
                    回到頂部測試
                </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年主演趙寶剛導演的青春劇《奮斗》饶唤；[2]  同年徐伐，主演首部電影《走著瞧》。2008年主演滕華濤執(zhí)導的電視劇《蝸居》募狂，飾演80后城市青年小貝办素。[1]  2009年，在電影《海洋天堂》中扮演自閉癥患者王大福祸穷；同年參演抗戰(zhàn)題材的電視劇《雪豹》[4]  性穿。2011年，主演的電視劇《裸婚時代》在各大衛(wèi)視播出雷滚；[5]  2011年-2012年連續(xù)2年獲得北京大學生電影節(jié)[6-7]  最受大學生歡迎男演員獎需曾。2012年，憑借電影《失戀33天》獲得第31屆大眾電影百花獎最佳男主角獎揭措；[8]  同年成立自己經(jīng)營的北京君竹影視文化有限公司胯舷，并導演第一部影視作品《小爸爸》。2013年2月绊含，主演的電影《西游·降魔篇》在全國上映桑嘶。[9]  
2014年3月28日，主演的中韓合資文藝愛情片《我在路上最愛你》在全國上映躬充。2014年12月18日逃顶，在姜文執(zhí)導的動作喜劇片《一步之遙》中扮演武七一角。[10]  2016年充甚，主演電視劇《少帥》以政，飾演張學良[11]  ；主演電視劇《剃刀邊緣》[12]  伴找。7月15日導演的電影《陸垚知馬俐》上映盈蛮。[13]  
演藝事業(yè)外，文章也參與公益慈善事業(yè)技矮，2010年成立大福自閉癥關(guān)愛基金抖誉。
2017年9月16日殊轴，憑借《陸垚知馬俐》獲得第31屆中國電影金雞獎導演處女作獎。[14]  

關(guān)于你袒炉。就是因為我的害怕旁理，我親眼看你走向她。我喜歡你是事實我磁，你有女朋友也是事實孽文。我以為我不說出口就會保持這樣的朋友關(guān)系，卻還是她趕了個巧夺艰，那應該是個寒假芋哭，你有女朋友了，我還是聽說劲适，我那么愛楷掉，卻還是無果厢蒜。于是我和她之間就莫名其妙的就多少有了敵人的感覺霞势，或許就是別人口中的那樣，世界上完全不相干的兩個女人斑鸦，會因為一個男人要么很友好愕贡，要么是仇恨。關(guān)于她我做不到友好巷屿，但也不是仇恨固以，只是你選擇了她，我就希望她好好愛你嘱巾，照顧你憨琳，連我的份也一起愛了。自愛上你的那天起旬昭，思念便成了戒不掉的癮篙螟。你的一言一笑，一顰一蹙问拘，無不牽動我的心遍略，百千塵思，唯念一縷骤坐；萬千紅顏绪杏，唯戀一人。我愿意一生漂泊浪跡在你的故事里纽绍，甘愿為你鞍前馬后蕾久，馬首是瞻，即使你從未給我一句承諾拌夏，即使你從未給我半分愛情僧著，依然無悔無怨叫编。
　　 關(guān)于你。一場高考霹抛，考散了我們搓逾，畢業(yè)了會不會就是終生最后一見，很高興杯拐，我們不是霞篡。各奔東西了，你們繼續(xù)上了大學端逼，值得欣慰的是朗兵，你們也是異地，這樣不能算是我心機顶滩，只能說是恰巧余掖，你們的安排恰合我意。后來也有聽說礁鲁，她從她的城市去看你盐欺，而那時的我能說什么呢。她是真心愛你仅醇，這是事實冗美。我也曾和閨蜜說過，一生至少該有一次析二，為了某個人而忘了自己粉洼，不求有結(jié)果，不求同行叶摄，不求曾經(jīng)擁有属韧，甚至不求你愛我，只求在我最美的年華里蛤吓，遇到你宵喂。今生遇見你，我覺得是幸福的柱衔，盡管這幸福交雜著萬般痛苦樊破。我也曾幻想著悄悄地去到你的學校，在某個陽光明媚的下午唆铐，在你去教室的路上和你來場偶遇哲戚，精心準備的偶遇，艾岂∷成伲可是我還來不及去和你偶遇，你們就畢了業(yè)。愛是種很玄的東西脆炎，說不清梅猿，道不明，剪不斷秒裕，理還亂袱蚓。世上，有種愛明知沒有結(jié)果几蜻，卻依然堅守原地喇潘，不舍離去，哪怕握不住你的一絲余溫梭稚，依然選擇默默為你守候颖低。一路來去，心門只為你獨開弧烤，山城只為你獨駐忱屑，白天只為你旖旎，黑夜只為你流連暇昂。因為愛你莺戒，哪怕心入住荒島，還是會以最深情的眼神话浇，看著你幸福脏毯。
                </div>
               
            </div>
        )
    }
}

React.js學習筆記(15) window對象 + ( element對象盒模型屬性 ) + 滾動到最頂部按鈕

React.js學習筆記(15) window對象 + ( element對象盒模型屬性 ) + 滾動到最頂部按鈕

(一) window對象

(1) 概述

(2) window對象的屬性

(1) window.window

(2) window.name

(3) window.location

(4) window.closed

(5) window.opener

(6) window.screenX屬性欣除，window.screenY屬性

(7) window.innerHeight历帚，window.innerWidth

(8) window.outerHeight奏赘，window.outerWidth

(9) window.pageXOffset缚柳，window.pageYOffset

(3) window對象的方法

(1) window.scrollTo()--------滾動到

(2) window.scrollBy()--------滾動了，有正負

(3) window.open()

(4) window.close()

(二) element對象盒模型屬性

(1) Element.clientHeight，Element.clientWidth

-------------------可見部分寬高度-------------------

--------Element.clientHeight--------只包括padding

--------Element.offsetHeight--------包括padding神帅，border再姑，滾動條

(2) Element.clientLeft冬殃，Element.clientTop

-----------------邊框的寬高度-------------------

(3) Element.scrollHeight血柳，Element.scrollWidth

-------------------總的寬高度-------------------

-------------------------不包括邊框和滾動條-------------------------

(4) Element.scrollLeft寿烟，Element.scrollTop

-------scrollTop頂部到最頂部的距離------可讀寫------

(5) Element.offsetHeight缭贡，Element.offsetWidth

--------Element.offsetHeight--------包括padding炉擅，border辉懒，滾動條

--------Element.clientHeight--------只包括padding

(6) Element.offsetLeft钞楼，Element.offsetTop

總結(jié)：

案列：