JavaScript第六天

定時器（兩種）

setTimeout()
setInterval()

setTimeout() 炸彈定時器

開啟定時器

image

5s之后關(guān)閉廣告

<img src="../imgs/ad.jpg" alt="" class="ad">
<script>
    setTimeout(function () {
        document.querySelector('.ad').style.display = 'none';
    }, 5000)
</script>

清除定時器

<button>點擊停止炸彈</button>
<script>
    function callback() {
        alert('來顆華子')
    }
    var timer = setTimeout(callback, 5000)
    document.querySelector('button').addEventListener('click', function () {
        // 清除定時器
        clearTimeout(timer)
    })

</script>

setInterval() 鬧鐘定時器
開啟定時器

image

<script>
    setInterval(function () {
        alert('來不來華子')
    }, 1000)
    // setTimeout  延時時間到了萌腿，就去調(diào)用這個回調(diào)函數(shù)，只調(diào)用一次 就結(jié)束了這個定時器
    // setInterval  每隔這個延時時間抖苦，就去調(diào)用這個回調(diào)函數(shù)毁菱，會調(diào)用很多次米死，重復(fù)調(diào)用這個函數(shù)
</script>

<button class="begin">開啟定時</button>
<button class="stop">關(guān)閉定時</button>
<script>
    var begin = document.querySelector('.begin')
    var stop = document.querySelector('.stop')
    var time = null;
    begin.addEventListener('click', function () {
        time = setInterval(function () {
            console.log('你最帥')
        },500)
    })
    stop.addEventListener('click', function () {
      clearInterval(time)
    })
</script>

雙十一倒計時

電子時鐘

發(fā)送短信

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
手機號碼： <input type="number"> <button>發(fā)送</button>
<script>
   var btn =  document.querySelector('button')
   var time = 3;
    btn.addEventListener('click', function () {
        btn.disabled = true;
        var timer = setInterval(function () {
            if (time == 0){
                time = 3;
                // 清除定時器
                clearInterval(timer);
                btn.disabled = false;
                btn.innerHTML = '發(fā)送';

            }else {
                btn.innerHTML = '還剩下'+time+'秒';
                time--;
            }
        }, 1000)
    })
</script>
</body>
</html>

location對象

image

url的一般語法

image

this指向問題

this的指向在函數(shù)定義的時候是確定不了的，只有函數(shù)執(zhí)行的時候才能確定this到底指向誰贮庞，一般情況下this的最終指向的是那個調(diào)用它的對象峦筒。
現(xiàn)階段，我們先了解一下幾個this指向

全局作用域或者普通函數(shù)中this指向全局對象window（注意定時器里面的this指向window）
方法調(diào)用中誰調(diào)用this指向誰
構(gòu)造函數(shù)中this指向構(gòu)造函數(shù)的實例

<button>點擊</button>
<script>
    // this 一般情況下this指向的是調(diào)用那個對象
    console.log(this)  // window
    // 全局作用域或者普通函數(shù)中this指向全局對象window
    function fn() {
        console.log(this)
    }
    window.fn()
    window.setTimeout(function () {
        console.log(this)
    }, 1000)
    2\. 方法調(diào)用中誰調(diào)用this就指向誰
    var o = {
        sayHi: function () {
            console.log(this)
        }
    }
    o.sayHi();
    var btn = document.querySelector('button')
    // btn.onclick = function () {
    //     console.log(this)// 指向btn
    // }
    btn.addEventListener('click', function () {
        console.log(this)// 指向btn
    })

    // 構(gòu)造函數(shù)
    function Fun() {
       console.log(this) // 指向f實例對象
    }
    var f = new Fun();
</script>

ES6語法

什么是ES6

ES 的全稱是 ECMAScript , 它是由 ECMA 國際標(biāo)準(zhǔn)化組織,制定的一項腳本語言的標(biāo)準(zhǔn)化規(guī)范窗慎。

image

為什么使用 ES6 ?
每一次標(biāo)準(zhǔn)的誕生都意味著語言的完善物喷，功能的加強。JavaScript語言本身也有一些令人不滿意的地方捉邢。

變量提升特性增加了程序運行時的不可預(yù)測性
語法過于松散脯丝，實現(xiàn)相同的功能，不同的人可能會寫出不同的代碼
ES6新增語法

let（★★★）

ES6中新增了用于聲明變量的關(guān)鍵字

let聲明的變量只在所處于的塊級有效

<script>
    let a = 10;
    console.log(a)
    if (true){
        let b = 20;
        console.log(b)
    }
    // console.log(b) //  b is not defined

    if (true){
        var c = 100;
        console.log(c)
    }
    console.log("c"+ c)
    // 在一個大括號中 使用let聲明的變量才具有塊級作用域
    // var 不具備這個特點
    // 為了防止循環(huán)變量稱為全局變量可以使用 let聲明變量
    for (let i = 0; i < 2; i++) {
        console.log(i)
    }
    // 使用 let聲明的變量具有暫時性死區(qū)特性伏伐，
    // 該變量會綁定在塊級作用域宠进， 不受外界的影響
    var tmp = 123;
    if (true){
        console.log(tmp)
        let  tmp = 'abc';

    }

</script>

經(jīng)典面試題

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var arr = [];
    for (var i = 0; i < 2 ; i++) {
        arr[i] =  function () {
            console.log(i)
        }
    }
    // console.log(i)
    arr[0](); // 2
    arr[1]();  // 2
    // let arr = [];
    // for (let i = 0; i < 2 ; i++) {
    //     arr[i] =  function () {
    //         console.log(i)
    //     }
    // }
    // arr[0](); // 0
    // arr[1]();  // 1

</script>
</body>
</html>

小結(jié)

let關(guān)鍵字就是用來聲明變量的
使用let關(guān)鍵字聲明的變量具有塊級作用域
在一個大括號中使用let關(guān)鍵字聲明的變量才具有塊級作用域 var關(guān)鍵字是不具備這個特點的
防止循環(huán)變量變成全局變量
使用let關(guān)鍵字聲明的變量沒有變量提升
使用let關(guān)鍵字聲明的變量具有暫時性死區(qū)特性

const

聲明常量，常量就是值（內(nèi)存地址）不能變化的量
具有塊級作用域

<script>
    // if (true){
    //     const a = 10;
    // }
    // console.log(a) // a is not defined
    //使用const 聲明的變量必須賦初始值
    // const PI; X
    // const PI = 3.14;
    // 常量聲明后的值不可更改藐翎， 地址值不變
    // PI  = 100;
    // console.log(PI)
    // const  fn = function () {
    //     console.log('haha')
    // }
    // fn();
    const ary = [100, 200];
    ary[0] = 123;
    // ary = [1, 2]
    console.log(ary)
</script>

let材蹬、const、var 的區(qū)別
使用 var 聲明的變量吝镣，其作用域為該語句所在的函數(shù)內(nèi)堤器，且存在變量提升現(xiàn)象
使用 let 聲明的變量，其作用域為該語句所在的代碼塊內(nèi)末贾，不存在變量提升
使用 const 聲明的是常量闸溃，在后面出現(xiàn)的代碼中不能再修改該常量的值

image

箭頭函數(shù)

ES6中新增的定義函數(shù)的方式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    // 箭頭函數(shù)是用來簡化函數(shù)定義的
    const fn = () => {
        console.log(123)
    }
    fn();
    // 在箭頭函數(shù)中拱撵。 如果函數(shù)體只有一句代碼辉川，
    // 并且代碼的執(zhí)行結(jié)果就是函數(shù)的返回值， 大括號可以省略
    const sum = (s1, s2) => s1 + s2;
    console.log(sum(10, 20))
    // 在箭頭函數(shù)中拴测。 如果形參只有一個乓旗，
    // 小括號可以省略，
    const fnn = v => v*v;
    console.log(fnn(2))
    // 箭頭函數(shù)不綁定this集索， 箭頭函數(shù)沒有自己this關(guān)鍵字
    // 如果在箭頭函數(shù)中使用this屿愚， this關(guān)鍵字將指向箭頭函數(shù)定義位置中的this

    function nnn() {
        console.log(this);
        return() =>{
            console.log(this);
        }
    }
    nnn()

</script>
</body>
</html>

移動web開發(fā)流式布局

瀏覽器現(xiàn)狀
PC端常見瀏覽器：360瀏覽器、谷歌瀏覽器务荆、火狐瀏覽器船庇、QQ瀏覽器派歌、百度瀏覽器、搜狗瀏覽器、IE瀏覽器医吊。

移動端常見瀏覽器：UC瀏覽器踩麦，QQ瀏覽器，歐朋瀏覽器，百度手機瀏覽器祠锣，360安全瀏覽器，谷歌瀏覽器咽安，搜狗手機瀏覽器伴网，獵豹瀏覽器，以及其他雜牌瀏覽器妆棒。

國內(nèi)的UC和QQ澡腾，百度等手機瀏覽器都是根據(jù)Webkit修改過來的內(nèi)核，國內(nèi)尚無自主研發(fā)的內(nèi)核糕珊，就像國內(nèi)的手機操作系統(tǒng)都是基于Android修改開發(fā)的一樣动分。
總結(jié)：兼容移動端主流瀏覽器，處理Webkit內(nèi)核瀏覽器即可红选。

手機屏幕的現(xiàn)狀

移動端設(shè)備屏幕尺寸非常多澜公，碎片化嚴(yán)重。
Android設(shè)備有多種分辨率：480x800, 480x854, 540x960, 720x1280喇肋，1080x1920等坟乾，還有的2K，4k屏蝶防。
近年來iPhone的碎片化也加劇了甚侣，其設(shè)備的主要分辨率有：640x960, 640x1136, 750x1334, 1242x2208等。
作為開發(fā)者無需關(guān)注這些分辨率间学，因為我們常用的尺寸單位是 px 殷费。

視口

視口（viewport）就是瀏覽器顯示頁面內(nèi)容的屏幕區(qū)域。視口可以分為布局視口低葫、視覺視口和理想視口

布局視口 layout viewport
一般移動設(shè)備的瀏覽器都默認(rèn)設(shè)置了一個布局視口详羡，用于解決早期的PC端頁面在手機上顯示的問題。

iOS, Android基本都將這個視口分辨率設(shè)置為 980px氮采，所以PC上的網(wǎng)頁大多都能在手機上呈現(xiàn)殷绍，只不過元素看上去很小染苛，一般默認(rèn)可以通過手動縮放網(wǎng)頁

image

視覺視口 visual viewport
字面意思鹊漠，它是用戶正在看到的網(wǎng)站的區(qū)域。注意：是網(wǎng)站的區(qū)域茶行。
我們可以通過縮放去操作視覺視口躯概，但不會影響布局視口，布局視口仍保持原來的寬度畔师。

image
理想視口 ideal viewport
為了使網(wǎng)站在移動端有最理想的瀏覽和閱讀寬度而設(shè)定理想視口娶靡，對設(shè)備來講，是最理想的視口尺寸需要手動添寫meta視口標(biāo)簽通知瀏覽器操作
meta視口標(biāo)簽的主要目的：布局視口的寬度應(yīng)該與理想視口的寬度一致看锉，簡單理解就是設(shè)備有多寬姿锭，我們布局的視口就多寬

總結(jié)：我們開發(fā)最終會用理想視口塔鳍，而理想視口就是將布局視口的寬度修改為視覺視口

meta標(biāo)簽

image

最標(biāo)準(zhǔn)的viewport設(shè)置

視口寬度和設(shè)備保持一致
視口的默認(rèn)縮放比例1.0
不允許用戶自行縮放
最大允許的縮放比例1.0
最小允許的縮放比例1.0

移動web開發(fā)——flex布局

傳統(tǒng)布局

兼容性好
布局繁瑣
局限性，不能再移動端很好的布局

flex布局

操作方便呻此，布局極其簡單轮纫，移動端使用比較廣泛
pc端瀏覽器支持情況比較差
IE11或更低版本不支持flex或僅支持部分

建議

如果是pc端頁面布局，還是采用傳統(tǒng)方式
如果是移動端或者是不考慮兼容的pc則采用flex

flex布局原理

flex 是 flexible Box 的縮寫焚鲜，意為"彈性布局"掌唾，用來為盒狀模型提供最大的靈活性，任何一個容器都可以指定為 flex 布局忿磅。
當(dāng)我們?yōu)楦负凶釉O(shè)為 flex 布局以后糯彬，子元素的 float、clear 和 vertical-align 屬性將失效葱她。
flex布局又叫伸縮布局撩扒、彈性布局、伸縮盒布局览效、彈性盒布局
采用 Flex 布局的元素却舀，稱為 Flex 容器（flex container），簡稱"容器"锤灿。它的所有子元素自動成為容器成員挽拔，稱為 Flex 項目（flex item），簡稱"項目"但校。
總結(jié)：就是通過給父盒子添加flex屬性螃诅，來控制子盒子的位置和排列方式

父項常見屬性

flex-direction：設(shè)置主軸的方向
justify-content：設(shè)置主軸上的子元素排列方式
flex-wrap：設(shè)置子元素是否換行
align-content：設(shè)置側(cè)軸上的子元素的排列方式（多行）
align-items：設(shè)置側(cè)軸上的子元素排列方式（單行）
flex-flow：復(fù)合屬性，相當(dāng)于同時設(shè)置了 flex-direction 和 flex-wrap

flex-direction設(shè)置主軸的方向

在 flex 布局中状囱，是分為主軸和側(cè)軸兩個方向术裸，同樣的叫法有：行和列、x 軸和y 軸
默認(rèn)主軸方向就是 x 軸方向亭枷，水平向右
默認(rèn)側(cè)軸方向就是 y 軸方向袭艺，水平向下

image

注意：主軸和側(cè)軸是會變化的，就看 flex-direction 設(shè)置誰為主軸叨粘，剩下的就是側(cè)軸猾编。而我們的子元素是跟著主軸來排列的

image

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <style>
        div{
            /*給父級添加flex屬性*/
            display: flex;
            width: 800px;
            height: 300px;
            background-color: pink;
            /*默認(rèn)主軸是x軸， 行 row升敲， 那么y軸就是側(cè)軸    */
        /*    我們的元素是跟隨主軸進行排列*/
        /*    flex-direction: row;*/
        /*    flex-direction: column;*/
        /*    flex-direction: row-reverse;*/
            flex-direction: column-reverse;
        }
        div span{
            width: 150px;
            height: 100px;
            background-color: blue;
            color: white;
        }
    </style>
</head>
<body>

<div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>

</body>
</html>

justify-content 設(shè)置主軸上的子元素排列方式

image

flex-wrap設(shè)置是否換行

默認(rèn)情況下答倡，項目都排在一條線（又稱”軸線”）上。flex-wrap屬性定義驴党，flex布局中默認(rèn)是不換行的瘪撇。
nowrap 不換行
wrap 換行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <style>
        div{
            /*給父級添加flex屬性*/
            display: flex;
            /*width: 600px;*/
            width: 80%;
            height: 400px;
            background-color: pink;
            /*默認(rèn)是不換行的， 如果裝不開， 會縮小子元素的寬度放到父元素里面*/
            flex-wrap: wrap;
            /*flex-wrap: nowrap;*/

        }
        div span{
            width: 150px;
            height: 100px;
            background-color: blue;
            color: white;
        }
    </style>
</head>
<body>

<div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
</div>

</body>
</html>

align-items 設(shè)置側(cè)軸上的子元素排列方式（單行）

該屬性是控制子項在側(cè)軸（默認(rèn)是y軸）上的排列方式在子項為單項（單行）的時候使用
flex-start 從頭部開始
flex-end 從尾部開始
center 居中顯示
stretch 拉伸


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <style>
        div{
            /*給父級添加flex屬性*/
            display: flex;
            width: 100%;
            height: 400px;
            background-color: pink;
            flex-direction: column;
            justify-content: center;
            /*align-items: center;*/
            /*拉伸 但是不要給盒子高度*/
            align-items: stretch;
        }
        div span{
            /*width: 150px;*/
            height: 100px;
            background-color: blue;
            color: white;
        }
    </style>
</head>
<body>

<div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>

</body>
</html>

align-content 設(shè)置側(cè)軸上的子元素的排列方式（多行）


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <style>
        div{
            /*給父級添加flex屬性*/
            display: flex;
            width: 400px;
            height: 400px;
            background-color: pink;
            flex-wrap: wrap;
            /*align-content: space-between;*/
            /*align-content: space-around;*/
            align-content: center;
        }
        div span{
            width: 150px;
            height: 100px;
            background-color: blue;
            color: white;
        }
    </style>
</head>
<body>

<div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
</div>

</body>
</html>

最后編輯于：2020.08.21 19:59:09

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末倔既，一起剝皮案震驚了整個濱河市恕曲，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌渤涌，老刑警劉巖码俩，帶你破解...
沈念sama閱讀 218,204評論 6贊 506
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異歼捏，居然都是意外死亡稿存，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,091評論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門瞳秽，熙熙樓的掌柜王于貴愁眉苦臉地迎上來瓣履，“玉大人，你說我怎么就攤上這事练俐⌒溆” “怎么了？”我有些...
開封第一講書人閱讀 164,548評論 0贊 354
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵腺晾，是天一觀的道長燕锥。經(jīng)常有香客問我，道長悯蝉，這世上最難降的妖魔是什么归形？我笑而不...
開封第一講書人閱讀 58,657評論 1贊 293
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮鼻由，結(jié)果婚禮上暇榴，老公的妹妹穿的比我還像新娘。我一直安慰自己蕉世，他們只是感情好蔼紧，可當(dāng)我...
茶點故事閱讀 67,689評論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著狠轻，像睡著了一般奸例。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上向楼，一...
開封第一講書人閱讀 51,554評論 1贊 305
城市分裂傳說
那天查吊，我揣著相機與錄音，去河邊找鬼蜜自。笑死菩貌，一個胖子當(dāng)著我的面吹牛卢佣，可吹牛的內(nèi)容都是我干的重荠。我是一名探鬼主播，決...
沈念sama閱讀 40,302評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼戈鲁！你這毒婦竟也來了仇参？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 39,216評論 0贊 276
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤婆殿，失蹤者是張志新（化名）和其女友劉穎诈乒，沒想到半個月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體婆芦，經(jīng)...
沈念sama閱讀 45,661評論 1贊 314
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡怕磨，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 37,851評論 3贊 336
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了消约。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片肠鲫。...
茶點故事閱讀 39,977評論 1贊 348
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖或粮，靈堂內(nèi)的尸體忽然破棺而出导饲，到底是詐尸還是另有隱情，我是刑警寧澤氯材，帶...
沈念sama閱讀 35,697評論 5贊 347
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布渣锦，位于F島的核電站，受9級特大地震影響氢哮，放射性物質(zhì)發(fā)生泄漏袋毙。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點故事閱讀 41,306評論 3贊 330
男人毒藥：我在死后第九天來索命
文/蒙蒙一冗尤、第九天我趴在偏房一處隱蔽的房頂上張望娄猫。院中可真熱鬧，春花似錦生闲、人聲如沸媳溺。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,898評論 0贊 22
一樁弒父案碍讯，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽悬蔽。三九已至，卻和暖如春捉兴，著一層夾襖步出監(jiān)牢的瞬間蝎困，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 33,019評論 1贊 270
情欲美人皮
我被黑心中介騙來泰國打工倍啥，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留禾乘，地道東北人。一個月前我還...
沈念sama閱讀 48,138評論 3贊 370
代替公主和親
正文我出身青樓虽缕，卻偏偏與公主長得像始藕，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 44,927評論 2贊 355

JavaScript第六天

定時器（兩種）

setTimeout() 炸彈定時器

雙十一倒計時

電子時鐘

發(fā)送短信

location對象

url的一般語法

this指向問題

ES6語法

什么是ES6

let（★★★）

const

箭頭函數(shù)

移動web開發(fā)流式布局

手機屏幕的現(xiàn)狀

視口

總結(jié)：我們開發(fā)最終會用理想視口塔鳍，而理想視口就是將布局視口的寬度修改為視覺視口

meta標(biāo)簽

移動web開發(fā)——flex布局

傳統(tǒng)布局

flex布局

建議

flex布局原理

父項常見屬性

flex-direction設(shè)置主軸的方向

justify-content 設(shè)置主軸上的子元素排列方式

flex-wrap設(shè)置是否換行

align-items 設(shè)置側(cè)軸上的子元素排列方式（單行 ）

align-content 設(shè)置側(cè)軸上的子元素的排列方式（多行）

推薦閱讀更多精彩內(nèi)容

align-items 設(shè)置側(cè)軸上的子元素排列方式（單行）