定時器（兩種）

setTimeout()
setInterval()

setTimeout() 炸彈定時器

開啟定時器

image

5s之后關閉廣告

<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  延時時間到了，就去調用這個回調函數(shù)痢站，只調用一次 就結束了這個定時器
    // setInterval  每隔這個延時時間黔酥，就去調用這個回調函數(shù)描馅，會調用很多次笤妙，重復調用這個函數(shù)
</script>

<button class="begin">開啟定時</button>
<button class="stop">關閉定時</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的最終指向的是那個調用它的對象渗勘。
現(xiàn)階段细疚，我們先了解一下幾個this指向

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

<button>點擊</button>
<script>
    // this 一般情況下this指向的是調用那個對象
    console.log(this)  // window
    // 全局作用域或者普通函數(shù)中this指向全局對象window
    function fn() {
        console.log(this)
    }
    window.fn()
    window.setTimeout(function () {
        console.log(this)
    }, 1000)
    2\. 方法調用中誰調用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
    })

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

ES6語法

什么是ES6

ES 的全稱是 ECMAScript , 它是由 ECMA 國際標準化組織,制定的一項腳本語言的標準化規(guī)范蔗彤。

image

為什么使用 ES6 ?
每一次標準的誕生都意味著語言的完善，功能的加強疯兼。JavaScript語言本身也有一些令人不滿意的地方然遏。

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

let（★★★）

ES6中新增了用于聲明變量的關鍵字

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>

小結

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

const

聲明常量姨裸，常量就是值（內存地址）不能變化的量
具有塊級作用域

<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ù)內农猬，且存在變量提升現(xiàn)象
使用 let 聲明的變量，其作用域為該語句所在的代碼塊內售淡，不存在變量提升
使用 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í)行結果就是函數(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關鍵字
    // 如果在箭頭函數(shù)中使用this递瑰， this關鍵字將指向箭頭函數(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安全瀏覽器夫啊，谷歌瀏覽器，搜狗手機瀏覽器辆憔，獵豹瀏覽器撇眯，以及其他雜牌瀏覽器。

國內的UC和QQ虱咧，百度等手機瀏覽器都是根據(jù)Webkit修改過來的內核熊榛，國內尚無自主研發(fā)的內核，就像國內的手機操作系統(tǒng)都是基于Android修改開發(fā)的一樣腕巡。
總結：兼容移動端主流瀏覽器玄坦，處理Webkit內核瀏覽器即可。

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

移動端設備屏幕尺寸非常多绘沉，碎片化嚴重营搅。
Android設備有多種分辨率：480x800, 480x854, 540x960, 720x1280云挟，1080x1920等，還有的2K转质，4k屏园欣。
近年來iPhone的碎片化也加劇了，其設備的主要分辨率有：640x960, 640x1136, 750x1334, 1242x2208等休蟹。
作為開發(fā)者無需關注這些分辨率沸枯，因為我們常用的尺寸單位是 px 。

視口

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

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

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

image

視覺視口 visual viewport
字面意思赤套，它是用戶正在看到的網(wǎng)站的區(qū)域。注意：是網(wǎng)站的區(qū)域珊膜。
我們可以通過縮放去操作視覺視口容握，但不會影響布局視口，布局視口仍保持原來的寬度车柠。

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

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

meta標簽

image

最標準的viewport設置

視口寬度和設備保持一致
視口的默認縮放比例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為 flex 布局以后占遥，子元素的 float俯抖、clear 和 vertical-align 屬性將失效。
flex布局又叫伸縮布局瓦胎、彈性布局芬萍、伸縮盒布局尤揣、彈性盒布局
采用 Flex 布局的元素，稱為 Flex 容器（flex container）柬祠，簡稱"容器"北戏。它的所有子元素自動成為容器成員，稱為 Flex 項目（flex item）漫蛔，簡稱"項目"嗜愈。
總結：就是通過給父盒子添加flex屬性，來控制子盒子的位置和排列方式

父項常見屬性

flex-direction：設置主軸的方向
justify-content：設置主軸上的子元素排列方式
flex-wrap：設置子元素是否換行
align-content：設置側軸上的子元素的排列方式（多行）
align-items：設置側軸上的子元素排列方式（單行）
flex-flow：復合屬性莽龟，相當于同時設置了 flex-direction 和 flex-wrap

flex-direction設置主軸的方向

在 flex 布局中蠕嫁，是分為主軸和側軸兩個方向，同樣的叫法有：行和列毯盈、x 軸和y 軸
默認主軸方向就是 x 軸方向剃毒，水平向右
默認側軸方向就是 y 軸方向，水平向下

image

注意：主軸和側軸是會變化的搂赋，就看 flex-direction 設置誰為主軸赘阀，剩下的就是側軸。而我們的子元素是跟著主軸來排列的

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軸就是側軸    */
        /*    我們的元素是跟隨主軸進行排列*/
        /*    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 設置主軸上的子元素排列方式

image

flex-wrap設置是否換行

默認情況下，項目都排在一條線（又稱”軸線”）上捺信。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 設置側軸上的子元素排列方式（單行）

該屬性是控制子項在側軸（默認是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 設置側軸上的子元素的排列方式（多行）


<!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>

JavaScript第六天

JavaScript第六天

定時器（兩種）

setTimeout() 炸彈定時器

雙十一倒計時

電子時鐘

發(fā)送短信

location對象

url的一般語法

this指向問題

ES6語法

什么是ES6

let（★★★）

const

箭頭函數(shù)

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

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

視口

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

meta標簽

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

傳統(tǒng)布局

flex布局

建議

flex布局原理

父項常見屬性

flex-direction設置主軸的方向

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

flex-wrap設置是否換行

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

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

JavaScript第六天

定時器（兩種）

setTimeout() 炸彈定時器

雙十一倒計時

電子時鐘

發(fā)送短信

location對象

url的一般語法

this指向問題

ES6語法

什么是ES6

let（★★★）

const

箭頭函數(shù)

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

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

視口

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

meta標簽

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

傳統(tǒng)布局

flex布局

建議

flex布局原理

父項常見屬性

flex-direction設置主軸的方向

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

flex-wrap設置是否換行

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

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

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