定時器（兩種）

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)用很多次，重復調(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對象

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 國際標準化組織,制定的一項腳本語言的標準化規(guī)范砸泛。

為什么使用 ES6 ?
每一次標準的誕生都意味著語言的完善，功能的加強蛆封。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è)備屏幕尺寸非常多，碎片化嚴重涯曲。
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è)備的瀏覽器都默認設(shè)置了一個布局視口狠持，用于解決早期的PC端頁面在手機上顯示的問題疟位。

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

image

視覺視口 visual viewport
字面意思，它是用戶正在看到的網(wǎng)站的區(qū)域正勒。注意：是網(wǎng)站的區(qū)域得院。
我們可以通過縮放去操作視覺視口，但不會影響布局視口章贞，布局視口仍保持原來的寬度祥绞。

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

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

meta標簽

image

最標準的viewport設(shè)置

視口寬度和設(shè)備保持一致
視口的默認縮放比例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 布局。
當我們?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：復合屬性梦皮，相當于同時設(shè)置了 flex-direction 和 flex-wrap

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

在 flex 布局中炭分，是分為主軸和側(cè)軸兩個方向，同樣的叫法有：行和列剑肯、x 軸和y 軸
默認主軸方向就是 x 軸方向捧毛，水平向右
默認側(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;
            /*默認主軸是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è)置是否換行

默認情況下，項目都排在一條線（又稱”軸線”）上因篇。flex-wrap屬性定義泞辐，flex布局中默認是不換行的。
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;
            /*默認是不換行的惜犀， 如果裝不開铛碑， 會縮小子元素的寬度放到父元素里面*/
            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è)軸（默認是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>

Day06 Javascript 哗咆、 es6膘掰、flex布局

Day06 Javascript 钻蔑、 es6倔约、flex布局

定時器（兩種）

setTimeout() 炸彈定時器

雙十一倒計時

電子時鐘

發(fā)送短信

location對象

url的一般語法

this指向問題

ES6語法

什么是ES6

let（）

const

箭頭函數(shù)

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

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

視口

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

meta標簽

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

傳統(tǒng)布局

flex布局

建議

flex布局原理

父項常見屬性

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

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

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

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

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

Day06 Javascript 钻蔑、 es6倔约、flex布局

定時器（兩種）

setTimeout() 炸彈定時器

雙十一倒計時

電子時鐘

發(fā)送短信

location對象

url的一般語法

this指向問題

ES6語法

什么是ES6

let（）

const

箭頭函數(shù)

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

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

視口

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

meta標簽

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

傳統(tǒng)布局

flex布局

建議

flex布局原理

父項常見屬性

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

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

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

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

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

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