1. offset client scroll三大系列
2. mouseenter 和mouseover的區(qū)別
3. 動畫函數(shù)封裝
4. 常見網(wǎng)頁特效案例
5. 觸屏事件
6. 移動端常見特效
7. classList 屬性
8. 案例分析
9. click 延時解決方案
10. 移動端常用開發(fā)插件
11. 移動端常用開發(fā)框架
12. 本地存儲
1.三大系列
1.1 **元素偏移量 offset 系列
1.1.1 offset 概述
offset 翻譯過來就是偏移量， 可以動態(tài)的得到該元素的位置（偏移）、大小等
獲得元素距離帶有定位父元素的位置
獲得元素自身的大小（寬度高度）
-
注意：返回的數(shù)值都不帶單位
offset系列屬性 作用 element.offsetParent 返回該元素帶有定位的父級元素 如果父級沒有定位則返回body element.offsetTop 返回元素相對帶有定位父元素上方的偏移 element.offsetLeft 返回元素相對帶有定位父元素左邊框的偏移 element.offsetWidth 返回自身包括padding、border、content的寬度 返回值不帶單位 element.offsetHeight 返回自身包括padding、border、content的高度 返回值不帶單位
1.1.2 offset 與 style 區(qū)別
offset
offset 可以得到任意樣式表中的樣式值
offset 系列獲得的數(shù)值是沒有單位的
offsetWidth 包含padding+border+width
offsetWidth 等屬性是只讀屬性，只能獲取不能賦值
所以，我們想要獲取元素大小位置，用offset更合適
style
style 只能得到行內(nèi)樣式表中的樣式值
style.width 獲得的是帶有單位的字符串
style.width 獲得不包含padding和border 的值
style.width 是可讀寫屬性，可以獲取也可以賦值
所以，我們想要給元素更改值，則需要用style改變
因?yàn)槠綍r我們都是給元素注冊觸摸事件，所以重點(diǎn)記住 targetTouches
1.1.3 案例：獲取鼠標(biāo)在盒子內(nèi)的坐標(biāo)
- 我們在盒子內(nèi)點(diǎn)擊，想要得到鼠標(biāo)距離盒子左右的距離
- 首先得到鼠標(biāo)在頁面中的坐標(biāo)（e.pageX, e.pageY）
- 其次得到盒子在頁面中的距離 ( box.offsetLeft, box.ocffsetTop)
- 用鼠標(biāo)距離頁面的坐標(biāo)減去盒子在頁面中的距離，得到 鼠標(biāo)在盒子內(nèi)的坐標(biāo)
- 如果想要移動一下鼠標(biāo)，就要獲取最新的坐標(biāo)，使用鼠標(biāo)移動
var box = document.querySelector('.box');
box.addEventListener('mousemove', function(e) {
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
this.innerHTML = 'x坐標(biāo)是' + x + ' y坐標(biāo)是' + y;
})
1.1.4 案例：模態(tài)框拖拽
彈出框，我們也稱為模態(tài)框
? 1.點(diǎn)擊彈出層，會彈出模態(tài)框， 并且顯示灰色半透明的遮擋層
? 2.點(diǎn)擊關(guān)閉按鈕，可以關(guān)閉模態(tài)框，并且同時關(guān)閉灰色半透明遮擋層
? 3.鼠標(biāo)放到模態(tài)框最上面一行，可以按住鼠標(biāo)拖拽模態(tài)框在頁面中移動
? 4.鼠標(biāo)松開，可以停止拖動模態(tài)框移動
1.1.5 案例分析
- 點(diǎn)擊彈出層， 模態(tài)框和遮擋層就會顯示出來 display:block;
- 點(diǎn)擊關(guān)閉按鈕，模態(tài)框和遮擋層就會隱藏起來 display:none;
- 在頁面中拖拽的原理：鼠標(biāo)按下并且移動， 之后松開鼠標(biāo)
- 觸發(fā)事件是鼠標(biāo)按下mousedown，鼠標(biāo)移動mousemove 鼠標(biāo)松開 mouseup
- 拖拽過程: 鼠標(biāo)移動過程中，獲得最新的值賦值給模態(tài)框的left和top值，這樣模態(tài)框可以跟著鼠標(biāo)走了
- 鼠標(biāo)按下觸發(fā)的事件源是最上面一行，就是 id 為 title
- 鼠標(biāo)的坐標(biāo)減去 鼠標(biāo)在盒子內(nèi)的坐標(biāo)， 才是模態(tài)框真正的位置
- 鼠標(biāo)按下，我們要得到鼠標(biāo)在盒子的坐標(biāo)
- 鼠標(biāo)移動，就讓模態(tài)框的坐標(biāo) 設(shè)置為 ：鼠標(biāo)坐標(biāo) 減去盒子坐標(biāo)即可，注意移動事件寫到按下事件里面
- 鼠標(biāo)松開，就停止拖拽，就是可以讓鼠標(biāo)移動事件解除
// 1. 獲取元素
var login = document.querySelector('.login');
var mask = document.querySelector('.login-bg');
var link = document.querySelector('#link');
var closeBtn = document.querySelector('#closeBtn');
var title = document.querySelector('#title');
// 2. 點(diǎn)擊彈出層這個鏈接 link 讓mask 和login 顯示出來
link.addEventListener('click', function() {
mask.style.display = 'block';
login.style.display = 'block';
})
// 3. 點(diǎn)擊 closeBtn 就隱藏 mask 和 login
closeBtn.addEventListener('click', function() {
mask.style.display = 'none';
login.style.display = 'none';
})
// 4. 開始拖拽
// (1) 當(dāng)我們鼠標(biāo)按下， 就獲得鼠標(biāo)在盒子內(nèi)的坐標(biāo)
title.addEventListener('mousedown', function(e) {
var x = e.pageX - login.offsetLeft;
var y = e.pageY - login.offsetTop;
// (2) 鼠標(biāo)移動的時候，把鼠標(biāo)在頁面中的坐標(biāo)，減去 鼠標(biāo)在盒子內(nèi)的坐標(biāo)就是模態(tài)框的left和top值
document.addEventListener('mousemove', move)
function move(e) {
login.style.left = e.pageX - x + 'px';
login.style.top = e.pageY - y + 'px';
}
// (3) 鼠標(biāo)彈起，就讓鼠標(biāo)移動事件移除
document.addEventListener('mouseup', function() {
document.removeEventListener('mousemove', move);
})
})
1.1.6 案例：仿京東放大鏡
- 整個案例可以分為三個功能模塊
- 鼠標(biāo)經(jīng)過小圖片盒子， 黃色的遮擋層 和 大圖片盒子顯示，離開隱藏2個盒子功能
- 黃色的遮擋層跟隨鼠標(biāo)功能。
- 移動黃色遮擋層，大圖片跟隨移動功能。
1.1.7 案例分析:
- 黃色的遮擋層跟隨鼠標(biāo)功能
- 把鼠標(biāo)坐標(biāo)給遮擋層不合適。因?yàn)檎趽鯇幼鴺?biāo)以父盒子為準(zhǔn)
- 首先是獲得鼠標(biāo)在盒子的坐標(biāo)
- 之后把數(shù)值給遮擋層做為left 和top
- 此時用到鼠標(biāo)移動事件，但是還是在小圖片盒子內(nèi)移動
- 發(fā)現(xiàn)，遮擋層位置不對，需要再減去盒子自身高度和寬度的一半
- 遮擋層不能超出小圖片盒子范圍
- 如果小于零，就把坐標(biāo)設(shè)置為0
- 如果大于遮擋層最大的移動距離，就把坐標(biāo)設(shè)置為最大的移動距離
- 遮擋層的最大移動距離：小圖片盒子寬度 減去 遮擋層盒子寬度
window.addEventListener('load', function() {
var preview_img = document.querySelector('.preview_img');
var mask = document.querySelector('.mask');
var big = document.querySelector('.big');
// 1. 當(dāng)我們鼠標(biāo)經(jīng)過 preview_img 就顯示和隱藏 mask 遮擋層 和 big 大盒子
preview_img.addEventListener('mouseover', function() {
mask.style.display = 'block';
big.style.display = 'block';
})
preview_img.addEventListener('mouseout', function() {
mask.style.display = 'none';
big.style.display = 'none';
})
// 2. 鼠標(biāo)移動的時候，讓黃色的盒子跟著鼠標(biāo)來走
preview_img.addEventListener('mousemove', function(e) {
// (1). 先計(jì)算出鼠標(biāo)在盒子內(nèi)的坐標(biāo)
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
// console.log(x, y);
// (2) 減去盒子高度 300的一半 是 150 就是我們mask 的最終 left 和top值了
// (3) 我們mask 移動的距離
var maskX = x - mask.offsetWidth / 2;
var maskY = y - mask.offsetHeight / 2;
// (4) 如果x 坐標(biāo)小于了0 就讓他停在0 的位置
// 遮擋層的最大移動距離
var maskMax = preview_img.offsetWidth - mask.offsetWidth;
if (maskX <= 0) {
maskX = 0;
} else if (maskX >= maskMax) {
maskX = maskMax;
}
if (maskY <= 0) {
maskY = 0;
} else if (maskY >= maskMax) {
maskY = maskMax;
}
mask.style.left = maskX + 'px';
mask.style.top = maskY + 'px';
// 3. 大圖片的移動距離 = 遮擋層移動距離 * 大圖片最大移動距離 / 遮擋層的最大移動距離
// 大圖
var bigIMg = document.querySelector('.bigImg');
// 大圖片最大移動距離
var bigMax = bigIMg.offsetWidth - big.offsetWidth;
// 大圖片的移動距離 X Y
var bigX = maskX * bigMax / maskMax;
var bigY = maskY * bigMax / maskMax;
bigIMg.style.left = -bigX + 'px';
bigIMg.style.top = -bigY + 'px';
})
})
1.2. 元素可視區(qū) client 系列
1.2.1 client概述
client 翻譯過來就是客戶端，來獲取元素可視區(qū)的相關(guān)信息，可以動態(tài)的得到該元素的邊框大小、元素大小等
element.clientTop//返回元素上邊距大小
element.clientLeft//返回元素左邊距大小
element.clientWidth//返回自身包括padding content的寬度 不包border 返回值不帶單位
element.clientHeight//返回自身包括padding content的高度 不包border 返回值不帶單位
1.2.2. 淘寶 flexible.js 源碼分析
立即執(zhí)行函數(shù) (function(){})() 或者 (function(){}())
主要作用： 創(chuàng)建一個獨(dú)立的作用域。 避免了命名沖突問題
(function flexible(window, document) {
// 獲取的html 的根元素
var docEl = document.documentElement
// dpr 物理像素比
var dpr = window.devicePixelRatio || 1
// adjust body font size 設(shè)置我們body 的字體大小
function setBodyFontSize() {
// 如果頁面中有body 這個元素 就設(shè)置body的字體大小
if (document.body) {
document.body.style.fontSize = (12 * dpr) + 'px'
} else {
// 如果頁面中沒有body 這個元素，則等著 我們頁面主要的DOM元素加載完畢再去設(shè)置body
// 的字體大小
document.addEventListener('DOMContentLoaded', setBodyFontSize)
}
}
setBodyFontSize();
// set 1rem = viewWidth / 10 設(shè)置我們html 元素的文字大小
function setRemUnit() {
var rem = docEl.clientWidth / 10
docEl.style.fontSize = rem + 'px'
}
setRemUnit()
// reset rem unit on page resize 當(dāng)我們頁面尺寸大小發(fā)生變化的時候，要重新設(shè)置下rem 的大小
window.addEventListener('resize', setRemUnit)
// pageshow 是我們重新加載頁面觸發(fā)的事件
window.addEventListener('pageshow', function(e) {
// e.persisted 返回的是true 就是說如果這個頁面是從緩存取過來的頁面，也需要從新計(jì)算一下rem 的大小
if (e.persisted) {
setRemUnit()
}
})
// detect 0.5px supports 有些移動端的瀏覽器不支持0.5像素的寫法
if (dpr >= 2) {
var fakeBody = document.createElement('body')
var testElement = document.createElement('div')
testElement.style.border = '.5px solid transparent'
fakeBody.appendChild(testElement)
docEl.appendChild(fakeBody)
if (testElement.offsetHeight === 1) {
docEl.classList.add('hairlines')
}
docEl.removeChild(fakeBody)
}
}(window, document))
下面三種情況都會刷新頁面都會觸發(fā) load 事件
1.a標(biāo)簽的超鏈接
2.F5或者刷新按鈕（強(qiáng)制刷新）
3.前進(jìn)后退按鈕
但是 火狐中，有個特點(diǎn)，有個“往返緩存”，這個緩存中不僅保存著頁面數(shù)據(jù)，還保存了DOM和JavaScript的狀態(tài)；實(shí)際上是將整個頁面都保存在了內(nèi)存里
所以此時后退按鈕不能刷新頁面
此時可以使用 pageshow事件來觸發(fā)。這個事件在頁面顯示時觸發(fā)，無論頁面是否來自緩存。在重新加載頁面中，pageshow會在load事件觸發(fā)后觸發(fā)；根據(jù)事件對象中的persisted來判斷是否是緩存中的頁面觸發(fā)的pageshow事件，e.persisted返回true 是指頁面從緩存取回來的頁面
`注意這個事件給window添加
1.3.元素滾動 scroll 系列
1.3.1. scroll 概述
scroll 翻譯過來就是滾動的，可以動態(tài)的得到該元素的大小、滾動距離等
element.scrollTop//overflow: auto被卷上去的上側(cè)距離，不帶單位
element.scrollLeft//被卷去的左側(cè)距離，不帶單位
element.scrollWidth//返回自身實(shí)際寬度，不含border 不帶單位
element.scrollHeight//返回自身實(shí)際高度，不含border 不帶單位
1.3.2. 頁面被卷去的頭部
如果瀏覽器的高（或?qū)挘┒炔蛔阋燥@示整個頁面時，會自動出現(xiàn)滾動條。當(dāng)滾動條向下滾動時，頁面上面被隱藏掉的高度，我們就稱為頁面被卷去的頭部。滾動條在滾動時會觸發(fā) onscroll事件,element.addEventListener('scroll', function(){})
1.3.3.案例：仿淘寶固定右側(cè)側(cè)邊欄
- 原先側(cè)邊欄是絕對定位
- 當(dāng)頁面滾動到一定位置，側(cè)邊欄改為固定定位
- 頁面繼續(xù)滾動，會讓 返回頂部顯示出來
1.3.4.案例分析:
- 需要用到頁面滾動事件 scroll 因?yàn)槭琼撁鏉L動，所以事件源是document
- 滾動到某個位置，就是判斷頁面被卷去的上部值
- 頁面被卷去的頭部：可以通過window.pageYOffset 獲得 如果是被卷去的左側(cè)window.pageXOffset
- 元素被卷去的頭部：element.scrollTop , 如果是頁面被卷去的頭部 則是 window.pageYOffset
- 其實(shí)這個值 可以通過盒子的 offsetTop可以得到，如果大于等于這個值，就可以讓盒子固定定位了
//1. 獲取元素
var sliderbar = document.querySelector('.slider-bar');
var banner = document.querySelector('.banner');
// banner.offestTop 就是被卷去頭部的大小 一定要寫到滾動的外面
var bannerTop = banner.offsetTop;
// 當(dāng)我們側(cè)邊欄固定定位之后應(yīng)該變化的數(shù)值
var sliderbarTop = sliderbar.offsetTop - bannerTop;
// 獲取main 主體元素
var main = document.querySelector('.main');
var goBack = document.querySelector('.goBack');
var mainTop = main.offsetTop;
// 2. 頁面滾動事件 scroll
document.addEventListener('scroll', function() {
// console.log(11);
// window.pageYOffset 頁面被卷去的頭部
// console.log(window.pageYOffset);
// 3 .當(dāng)我們頁面被卷去的頭部大于等于了 172 此時 側(cè)邊欄就要改為固定定位
if (window.pageYOffset >= bannerTop) {
sliderbar.style.position = 'fixed';
sliderbar.style.top = sliderbarTop + 'px';
} else {
sliderbar.style.position = 'absolute';
sliderbar.style.top = '300px';
}
// 4. 當(dāng)我們頁面滾動到main盒子，就顯示 goback模塊
if (window.pageYOffset >= mainTop) {
goBack.style.display = 'block';
} else {
goBack.style.display = 'none';
}
})
1.3.5.頁面被卷去的頭部兼容性解決方案
需要注意的是，頁面被卷去的頭部，有兼容性問題，因此被卷去的頭部通常有如下幾種寫法：
- 聲明了 DTD，使用 document.documentElement.scrollTop
- 未聲明 DTD，使用 document.body.scrollTop
- 新方法 window.pageYOffset和 window.pageXOffset，IE9 開始支持
function getScroll() {
return {
left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0,
top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
};
}
使用的時候 getScroll().left
1.4. 三大系列總結(jié)
element.offsetWidth//包含border
element.lientWidth//不包含border
element.scrollWidth//不包含border 包含超出的部分
他們主要用法：
1.offset系列 經(jīng)常用于獲得元素位置 offsetLeft offsetTop
2.client經(jīng)常用于獲取元素大小 clientWidth clientHeight
3.scroll 經(jīng)常用于獲取滾動距離 scrollTop scrollLeft
4.注意頁面滾動的距離通過 window.pageXOffset 獲得
2. mouseenter 和mouseover的區(qū)別
當(dāng)鼠標(biāo)移動到元素上時就會觸發(fā)mouseenter 事件
-
類似 mouseover，它們兩者之間的差別是
mouseover 鼠標(biāo)經(jīng)過自身盒子會觸發(fā)，經(jīng)過子盒子還會觸發(fā)。mouseenter 只會經(jīng)過自身盒子觸發(fā)
之所以這樣，就是因?yàn)閙ouseenter不會冒泡
跟mouseenter搭配鼠標(biāo)離開 mouseleave 同樣不會冒泡
3. 動畫函數(shù)封裝
3.1 動畫實(shí)現(xiàn)原理
核心原理：通過定時器 setInterval() 不斷移動盒子位置
實(shí)現(xiàn)步驟：
- 獲得盒子當(dāng)前位置
- 讓盒子在當(dāng)前位置加上1個移動距離
- 利用定時器不斷重復(fù)這個操作
- 加一個結(jié)束定時器的條件
- 注意此元素需要添加定位，才能使用element.style.left
3.2 動畫函數(shù) 給不同元素記錄不同定時器
如果多個元素都使用這個動畫函數(shù)，每次都要var 聲明定時器。我們可以給不同的元素使用不同的定時器（自己專門用自己的定時器）。
核心原理：利用 JS 是一門動態(tài)語言，可以很方便的給當(dāng)前對象添加屬性。
function animate(obj, target) {
// 當(dāng)我們不斷的點(diǎn)擊按鈕，這個元素的速度會越來越快，因?yàn)殚_啟了太多的定時器
// 解決方案就是 讓我們元素只有一個定時器執(zhí)行
// 先清除以前的定時器，只保留當(dāng)前的一個定時器執(zhí)行
clearInterval(obj.timer);
obj.timer = setInterval(function() {
if (obj.offsetLeft >= target) {
// 停止動畫 本質(zhì)是停止定時器
clearInterval(obj.timer);
}
obj.style.left = obj.offsetLeft + 1 + 'px';
}, 30);
}
animate(div, 300);
3.3 緩動效果原理
緩動效果就是讓元素運(yùn)動的速度有所變化，最常見的就是讓速度慢慢停下來
思路：
- 讓盒子每次移動的距離慢慢變小
- 核心算法：（目標(biāo)值-現(xiàn)在位置）/ 10作為每次移動距離
- 停止條件：當(dāng)前位置=目標(biāo)值時停止計(jì)時器
- 注意步長值需要取整
3.4 動畫函數(shù) 多個目標(biāo)值之間移動
可以讓動畫函數(shù)從 800 移動到 500
當(dāng)我們點(diǎn)擊按鈕時候，判斷步長是正值還是負(fù)值
? 1.如果是正值，則步長往大了取整 Math.ceil()
? 2.如果是負(fù)值，則步長 向小了取整 Math.floor()
3.5 動畫函數(shù) 添加回調(diào)函數(shù)
回調(diào)函數(shù)原理：函數(shù)可以作為一個參數(shù)。將這個函數(shù)作為參數(shù)傳到另一個函數(shù)里面，當(dāng)那個函數(shù)執(zhí)行完之后，再執(zhí)行傳進(jìn)去的這個函數(shù)，這個過程就叫做回調(diào)
回調(diào)函數(shù)寫的位置：定時器結(jié)束的位置
動畫完整版代碼:
function animate(obj, target, callback) {
// console.log(callback); callback = function() {} 調(diào)用的時候 callback()
// 先清除以前的定時器，只保留當(dāng)前的一個定時器執(zhí)行
clearInterval(obj.timer);
obj.timer = setInterval(function() {
// 步長值寫到定時器的里面
// 把我們步長值改為整數(shù) 不要出現(xiàn)小數(shù)的問題
// var step = Math.ceil((target - obj.offsetLeft) / 10);
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
// 停止動畫 本質(zhì)是停止定時器
clearInterval(obj.timer);
// 回調(diào)函數(shù)寫到定時器結(jié)束里面
// if (callback) {
// // 調(diào)用函數(shù)
// callback();
// }
callback && callback();
}
// 把每次加1 這個步長值改為一個慢慢變小的值 步長公式：(目標(biāo)值 - 現(xiàn)在的位置) / 10
obj.style.left = obj.offsetLeft + step + 'px';
}, 15);
}
3.6 動畫函數(shù)封裝
- 新建一個js文件 存儲動畫函數(shù)
- 引入js文件，如果index.js使用animate，需要寫在script src="index.js"前面
4. 常見網(wǎng)頁特效案例
4.1 案例：網(wǎng)頁輪播圖
輪播圖也稱為焦點(diǎn)圖，是網(wǎng)頁中比較常見的網(wǎng)頁特效。
功能需求：
? 1.鼠標(biāo)經(jīng)過輪播圖模塊，左右按鈕顯示，離開隱藏左右按鈕。
? 2.點(diǎn)擊右側(cè)按鈕一次，圖片往左播放一張，以此類推，左側(cè)按鈕同理。
? 3.圖片播放的同時，下面小圓圈模塊跟隨一起變化。
? 4.點(diǎn)擊小圓圈，可以播放相應(yīng)圖片。
? 5.鼠標(biāo)不經(jīng)過輪播圖，輪播圖也會自動播放圖片。
? 6.鼠標(biāo)經(jīng)過，輪播圖模塊， 自動播放停止。
window.addEventListener('load', function() {
// 1. 獲取元素
var arrow_l = document.querySelector('.arrow-l');
var arrow_r = document.querySelector('.arrow-r');
var focus = document.querySelector('.focus');
var focusWidth = focus.offsetWidth;
// 2. 鼠標(biāo)經(jīng)過focus 就顯示隱藏左右按鈕
focus.addEventListener('mouseenter', function() {
arrow_l.style.display = 'block';
arrow_r.style.display = 'block';
clearInterval(timer);
timer = null; // 清除定時器變量
});
focus.addEventListener('mouseleave', function() {
arrow_l.style.display = 'none';
arrow_r.style.display = 'none';
timer = setInterval(function() {
//手動調(diào)用點(diǎn)擊事件
arrow_r.click();
}, 2000);
});
// 3. 動態(tài)生成小圓圈 有幾張圖片，我就生成幾個小圓圈
var ul = focus.querySelector('ul');
var ol = focus.querySelector('.circle');
// console.log(ul.children.length);
for (var i = 0; i < ul.children.length; i++) {
// 創(chuàng)建一個小li
var li = document.createElement('li');
// 記錄當(dāng)前小圓圈的索引號 通過自定義屬性來做
li.setAttribute('index', i);
// 把小li插入到ol 里面
ol.appendChild(li);
// 4. 小圓圈的排他思想 我們可以直接在生成小圓圈的同時直接綁定點(diǎn)擊事件
li.addEventListener('click', function() {
// 干掉所有人 把所有的小li 清除 current 類名
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
// 留下我自己 當(dāng)前的小li 設(shè)置current 類名
this.className = 'current';
// 5. 點(diǎn)擊小圓圈，移動圖片 當(dāng)然移動的是 ul
// ul 的移動距離 小圓圈的索引號 乘以 圖片的寬度 注意是負(fù)值
// 當(dāng)我們點(diǎn)擊了某個小li 就拿到當(dāng)前小li 的索引號
var index = this.getAttribute('index');
// 當(dāng)我們點(diǎn)擊了某個小li 就要把這個li 的索引號給 num
num = index;
// 當(dāng)我們點(diǎn)擊了某個小li 就要把這個li 的索引號給 circle
circle = index;
// num = circle = index;
console.log(focusWidth);
console.log(index);
animate(ul, -index * focusWidth);
})
}
// 把ol里面的第一個小li設(shè)置類名為 current
ol.children[0].className = 'current';
// 6. 克隆第一張圖片(li)放到ul 最后面
var first = ul.children[0].cloneNode(true);
ul.appendChild(first);
// 7. 點(diǎn)擊右側(cè)按鈕， 圖片滾動一張
var num = 0;
// circle 控制小圓圈的播放
var circle = 0;
// flag 節(jié)流閥
var flag = true;
arrow_r.addEventListener('click', function() {
if (flag) {
flag = false; // 關(guān)閉節(jié)流閥
// 如果走到了最后復(fù)制的一張圖片，此時 我們的ul 要快速復(fù)原 left 改為 0
if (num == ul.children.length - 1) {
ul.style.left = 0;
num = 0;
}
num++;
animate(ul, -num * focusWidth, function() {
flag = true; // 打開節(jié)流閥
});
// 8. 點(diǎn)擊右側(cè)按鈕，小圓圈跟隨一起變化 可以再聲明一個變量控制小圓圈的播放
circle++;
// 如果circle == 4 說明走到最后我們克隆的這張圖片了 我們就復(fù)原
if (circle == ol.children.length) {
circle = 0;
}
// 調(diào)用函數(shù)
circleChange();
}
});
// 9. 左側(cè)按鈕做法
arrow_l.addEventListener('click', function() {
if (flag) {
flag = false;
if (num == 0) {
num = ul.children.length - 1;
ul.style.left = -num * focusWidth + 'px';
}
num--;
animate(ul, -num * focusWidth, function() {
flag = true;
});
// 點(diǎn)擊左側(cè)按鈕，小圓圈跟隨一起變化 可以再聲明一個變量控制小圓圈的播放
circle--;
// 如果circle < 0 說明第一張圖片，則小圓圈要改為第4個小圓圈（3）
// if (circle < 0) {
// circle = ol.children.length - 1;
// }
circle = circle < 0 ? ol.children.length - 1 : circle;
// 調(diào)用函數(shù)
circleChange();
}
});
function circleChange() {
// 先清除其余小圓圈的current類名
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
// 留下當(dāng)前的小圓圈的current類名
ol.children[circle].className = 'current';
}
// 10. 自動播放輪播圖
var timer = setInterval(function() {
//手動調(diào)用點(diǎn)擊事件
arrow_r.click();
}, 2000);
})
4.2 節(jié)流閥
防止輪播圖按鈕連續(xù)點(diǎn)擊造成播放過快。
節(jié)流閥目的：當(dāng)上一個函數(shù)動畫內(nèi)容執(zhí)行完畢，再去執(zhí)行下一個函數(shù)動畫，讓事件無法連續(xù)觸發(fā)。
核心實(shí)現(xiàn)思路：利用回調(diào)函數(shù)，添加一個變量來控制，鎖住函數(shù)和解鎖函數(shù)。
開始設(shè)置一個變量var flag= true;
If(flag){flag = false; do something} 關(guān)閉水龍頭
利用回調(diào)函數(shù)動畫執(zhí)行完畢， flag = true 打開水龍頭
4.3 案例：返回頂部
- 帶有動畫的返回頂部
- 此時可以繼續(xù)使用我們封裝的動畫函數(shù)
- 只需要把所有的left 相關(guān)的值改為 跟 頁面垂直滾動距離相關(guān)就可以了
- 頁面滾動了多少，可以通過 window.pageYOffset 得到
- 最后是頁面滾動，使用 window.scroll(x,y)
//1. 獲取元素
var sliderbar = document.querySelector('.slider-bar');
var banner = document.querySelector('.banner');
// banner.offestTop 就是被卷去頭部的大小 一定要寫到滾動的外面
var bannerTop = banner.offsetTop
// 當(dāng)我們側(cè)邊欄固定定位之后應(yīng)該變化的數(shù)值
var sliderbarTop = sliderbar.offsetTop - bannerTop;
// 獲取main 主體元素
var main = document.querySelector('.main');
var goBack = document.querySelector('.goBack');
var mainTop = main.offsetTop;
// 2. 頁面滾動事件 scroll
document.addEventListener('scroll', function() {
// console.log(11);
// window.pageYOffset 頁面被卷去的頭部
// console.log(window.pageYOffset);
// 3 .當(dāng)我們頁面被卷去的頭部大于等于了 172 此時 側(cè)邊欄就要改為固定定位
if (window.pageYOffset >= bannerTop) {
sliderbar.style.position = 'fixed';
sliderbar.style.top = sliderbarTop + 'px';
} else {
sliderbar.style.position = 'absolute';
sliderbar.style.top = '300px';
}
// 4. 當(dāng)我們頁面滾動到main盒子，就顯示 goback模塊
if (window.pageYOffset >= mainTop) {
goBack.style.display = 'block';
} else {
goBack.style.display = 'none';
}
})
// 3. 當(dāng)我們點(diǎn)擊了返回頂部模塊，就讓窗口滾動的頁面的最上方
goBack.addEventListener('click', function() {
// 里面的x和y 不跟單位的 直接寫數(shù)字即可
// window.scroll(0, 0);
// 因?yàn)槭谴翱跐L動 所以對象是window
animate(window, 0);
});
4.4 案例：筋頭云案例
- 利用動畫函數(shù)做動畫效果
- 原先筋斗云的起始位置是0
- 鼠標(biāo)經(jīng)過某個小li，把當(dāng)前小li的offsetLeft 位置做為目標(biāo)值即可
- 鼠標(biāo)離開某個小li，就把目標(biāo)值設(shè)為 0
- 如果點(diǎn)擊了某個小li， 就把li當(dāng)前的位置存儲起來，做為筋斗云的起始位置
window.addEventListener('load', function() {
// 1. 獲取元素
var cloud = document.querySelector('.cloud');
var c_nav = document.querySelector('.c-nav');
var lis = c_nav.querySelectorAll('li');
// 2. 給所有的小li綁定事件
// 這個current 做為筋斗云的起始位置
var current = 0;
for (var i = 0; i < lis.length; i++) {
// (1) 鼠標(biāo)經(jīng)過把當(dāng)前小li 的位置做為目標(biāo)值
lis[i].addEventListener('mouseenter', function() {
animate(cloud, this.offsetLeft);
});
// (2) 鼠標(biāo)離開就回到起始的位置
lis[i].addEventListener('mouseleave', function() {
animate(cloud, current);
});
// (3) 當(dāng)我們鼠標(biāo)點(diǎn)擊，就把當(dāng)前位置做為目標(biāo)值
lis[i].addEventListener('click', function() {
current = this.offsetLeft;
});
}
})
5. 觸屏事件
5.1 觸屏事件概述
移動端瀏覽器兼容性較好，我們不需要考慮以前 JS 的兼容性問題，可以放心的使用原生 JS 書寫效果，但是移動端也有自己獨(dú)特的地方。比如觸屏事件 touch（也稱觸摸事件），Android和 IOS 都有。
touch 對象代表一個觸摸點(diǎn)。觸摸點(diǎn)可能是一根手指，也可能是一根觸摸筆。觸屏事件可響應(yīng)用戶手指（或觸控筆）對屏幕或者觸控板操作。
常見的觸屏事件如下：
觸屏事件
touchstart//觸摸到dom元素時觸發(fā)
touchmove//滑動dom元素時觸發(fā)（在dom身上）
touchend//移開dom元素時觸發(fā)
5.2 觸摸事件對象（TouchEvent）
TouchEvent 是一類描述手指在觸摸平面的狀態(tài)變化的事件。這類事件用于描述一個或多個觸點(diǎn)，使開發(fā)者可以檢測觸點(diǎn)的移動，觸點(diǎn)的增加和減少，等等
touchstart、touchmove、touchend 三個事件都會各自有事件對象
觸摸事件對象e重點(diǎn)三個常見對象列表：
1.touches//正在觸摸屏幕的手指的所有列表
2.targetTouches//正在觸摸當(dāng)前dom元素的手指列表 console.log(targetTouches[0])拿到第一個手指的相關(guān)信息（最常用）
//如果偵聽的是同一個dom元素，二者相同
3.changedTouches//手指狀態(tài)發(fā)生改變的列表 從無到有 從有到無的列表
當(dāng)手指離開屏幕touchend時 沒有touches targetTouches 但是有changedTouches
因?yàn)槠綍r我們都是給元素注冊觸摸事件，所以重點(diǎn)記住 targetTocuhes
5.3 案例：移動端拖動元素
touchstart、touchmove、touchend可以實(shí)現(xiàn)拖動元素
但是拖動元素需要當(dāng)前手指的坐標(biāo)值 我們可以使用 targetTouches[0] 里面的pageX 和 pageY
移動端拖動的原理： 手指移動中，計(jì)算出手指移動的距離。然后用盒子原來的位置 + 手指移動的距離
-
手指移動的距離： 手指滑動中的位置 減去 手指剛開始觸摸的位置
拖動元素三步曲：
（1） 觸摸元素 touchstart： 獲取手指初始坐標(biāo)，同時獲得盒子原來的位置
（2） 移動手指 touchmove： 計(jì)算手指的滑動距離，并且移動盒子
（3） 離開手指 touchend:
注意： 手指移動也會觸發(fā)滾動屏幕所以這里要阻止默認(rèn)的屏幕滾動 e.preventDefault();var div = document.querySelector('div'); var startX = 0;//手指初始坐標(biāo) var startY = 0; var x = 0;//盒子初始坐標(biāo) var y = 0; div.addEventListener('touchstart', function(e) { startX = e.targetTouches[0].pageX; startY = e.targetTouches[0].pageY; x = this.offsetLeft; y = this.offsetTop; }); div.addEventListener('touchmove', function(e) { //手指移動距離 var moveX = e.targetTouches[0].pageX - startX; var moveY = e.targetTouches[0].pageY - startY; //移動盒子 this.style.left = x + moveX + 'px'; this.style.top = y + moveY + 'px'; //阻止屏幕默認(rèn)滾動行為 e.preventDefault(); });
6. 移動端常見特效
6.1 案例: 移動輪播圖
移動端輪播圖功能和基本PC端一致。
- 可以自動播放圖片
- 手指可以拖動播放輪播圖
6.2 案例分析:
自動播放功能
開啟定時器
移動端移動，可以使用translate 移動
-
想要圖片優(yōu)雅的移動，請?zhí)砑舆^渡效果
window.addEventListener('load', function() { var focus = document.querySelector('.focus'); var ul = focus.querySelector('ul'); var w = focus.offsetWidth; var index = 0; //2. var timer = setInterval(() => { index++; var translateX = -index * w; //4. ul.style.transition = 'all .3s'; //3. ul.style.transform = 'translateX('+translateX+'px)'; }, 2000); })
自動播放功能-無縫滾動
注意，我們判斷條件是要等到圖片滾動完畢再去判斷，就是過渡完成后判斷
此時需要添加檢測過渡完成事件 transitionend
判斷條件：如果索引號等于 3 說明走到最后一張圖片，此時 索引號要復(fù)原為 0
此時圖片，去掉過渡效果，然后移動
如果索引號小于0， 說明是倒著走， 索引號等于2
-
此時圖片，去掉過渡效果，然后移動
ul.addEventListener('transitionend', function () { ... if (index == 3) { index = 0; ul.style.transition = 'none'; var translateX = -index * w; ul.style.transform = 'translateX(' + translateX + 'px)'; } else if(index < 0) { index = 2; ul.style.transition = 'none'; var translateX = -index * w; ul.style.transform = 'translateX(' + translateX + 'px)'; } })
7. classList 屬性
classList屬性是HTML5新增的一個屬性，返回元素的類名。但是ie10以上版本支持(移動端不用管)
element.classList，返回元素的類名，偽數(shù)組
<div class = "one two"></div>
div.classList[1]
該屬性用于在元素中添加，移除及切換 CSS 類。有以下方法
添加類：
element.classList.add（’類名’）；
focus.classList.add('current');
移除類：
element.classList.remove（’類名’）;
focus.classList.remove('current');
切換類：
element.classList.toggle（’類名’）;
focus.classList.toggle('current');//從無到有 從有到無 開關(guān)
注意:以上方法里面，所有類名都不帶點(diǎn)
8. 案例分析
8.1 小圓點(diǎn)跟隨
小圓點(diǎn)跟隨變化效果
把ol里面li帶有current類名的選出來去掉類名 remove
讓當(dāng)前索引號的小li 加上 current add
-
但是，是等著過渡結(jié)束之后變化，所以這個寫到 transitionend 事件里面
//1.小圓點(diǎn)跟隨 ul.addEventListener('transitionend', function () { // 小圓點(diǎn)跟隨變化 var ol = focus.querySelector('.circle'); ol.querySelector('li.current').classList.remove('current'); // 當(dāng)前索引號加上current ol.children[index].classList.add('current'); })
8.2 移動端手動輪播
- 手指滑動輪播圖
- 本質(zhì)就是ul跟隨手指移動，簡單說就是移動端拖動元素
- 觸摸元素touchstart： 獲取手指初始坐標(biāo)
- 移動手指touchmove： 計(jì)算手指的滑動距離，并且移動盒子
- 離開手指touchend: 根據(jù)滑動的距離分不同的情況
- 如果移動距離小于某個像素 就回彈原來位置
- 如果移動距離大于某個像素就上一張下一張滑動。
- 滑動也分為左滑動和右滑動判斷的標(biāo)準(zhǔn)是 移動距離正負(fù) 如果是負(fù)值就是左滑 反之右滑
- 如果是左滑就播放下一張 （index++）
- 如果是右滑就播放上一張 (index--)
// 2.手動輪播
var startX = 0;
var moveX = 0;
var flag = false;
ul.addEventListener('touchstart', function (e) {
startX = e.targetTouches[0].pageX;
// 手指觸摸時就停止計(jì)時器
clearInterval(timer);
})
ul.addEventListener('touchmove', function (e) {
moveX = e.targetTouches[0].pageX - startX;
// 移動盒子：盒子原來距離+手指移動距離
var translateX = -index * w + moveX;
// 手指移動不需要動畫過渡效果
ul.style.transition = 'none';
ul.style.transform = 'translateX(' + translateX + 'px)';
// 手指有移動 才判斷播放上/下張效果
flag = true;
// 阻止屏幕滾動行為
e.preventDefault();
})
ul.addEventListener('touchend', function (e) {
// 手指有移動 判斷播放效果
if (flag) {
// 如果移動距離超過50px則播放上/下一張
if (Math.abs(moveX) > 50) {
if (moveX > 0) {//右滑 播放上一張
index--;
}
else {
index++;
}
var translateX = -index * w;
ul.style.transition = 'all .3s';
ul.style.transform = 'translateX(' + translateX + 'px)';
} else {
var translateX = -index * w;
ul.style.transition = 'all .1s';
ul.style.transform = 'translateX(' + translateX + 'px)';
}
}
// 手指移開開啟計(jì)時器
clearInterval(timer);
timer = setInterval(() => {
index++;
var translateX = -index * w;
ul.style.transition = 'all .3s';
ul.style.transform = 'translateX(' + translateX + 'px)';
}, 2000);
})
8.3 案例：返回頂部
當(dāng)頁面滾動某個地方，就顯示，否則隱藏
點(diǎn)擊可以返回頂部
案例分析
- 滾動某個地方顯示
- 事件：scroll頁面滾動事件
- 如果被卷去的頭部（window.pageYOffset ）大于某個數(shù)值
- 點(diǎn)擊，window.scroll(0,0) 返回頂部
var goback = document.querySelector('.goback');
var nav = document.querySelector('.nav-common');
window.addEventListener('scroll', function(e) {
if(window.pageYOffset >= nav.offsetTop) {
goback.style.display = 'block';
} else {
goback.style.display = 'none';
}
goback.addEventListener('click', function() {
window.scroll(0,0);
})
})
9. click 延時解決方案
移動端 click 事件會有 300ms 的延時，原因是移動端屏幕雙擊會縮放(double tap to zoom) 頁面
解決方案：
? 1. 禁用縮放。 瀏覽器禁用默認(rèn)的雙擊縮放行為，并且去掉300ms 的點(diǎn)擊延遲
<meta name="viewport" content="user-scalable=no">
? 2.利用touch事件自己封裝這個事件，解決300ms 延遲
? 原理就是：
- 當(dāng)我們手指觸摸屏幕，記錄當(dāng)前觸摸時間
- 當(dāng)我們手指離開屏幕， 用離開的時間減去觸摸的時間
- 如果時間小于150ms，并且沒有滑動過屏幕， 那么我們就定義為點(diǎn)擊
代碼如下:
//封裝tap，解決click 300ms 延時
function tap (obj, callback) {
var isMove = false;
var startTime = 0; // 記錄觸摸時候的時間變量
obj.addEventListener('touchstart', function (e) {
startTime = Date.now(); // 記錄觸摸時間
});
obj.addEventListener('touchmove', function (e) {
isMove = true; // 看看是否有滑動，有滑動算拖拽，不算點(diǎn)擊
});
obj.addEventListener('touchend', function (e) {
if (!isMove && (Date.now() - startTime) < 150) { // 如果手指觸摸和離開時間小于150ms 算點(diǎn)擊
callback && callback(); // 執(zhí)行回調(diào)函數(shù)
}
isMove = false; // 取反 重置
startTime = 0;
});
}
//調(diào)用
tap(div, function(){ // 執(zhí)行代碼 });
-
使用插件。fastclick 插件解決300ms 延遲
;(function () { //前面的;避免多個立即執(zhí)行函數(shù)之間沒有分號隔開 ... }使用方法：
-
復(fù)制代碼，新建fastclick.js文件
-
引入js文件
<script src="fastclick.js"></script> -
按照規(guī)定語法使用，取消頁面所有點(diǎn)擊延遲問題
<script> if ('addEventListener' in document) { document.addEventListener('DOMContentLoaded', function() { FastClick.attach(document.body); }, false); } </script>
-
10. 移動端常用開發(fā)插件
10.1 什么是插件
移動端要求的是快速開發(fā)，所以我們經(jīng)常會借助于一些插件來幫我完成操作
JS 插件是 js 文件，擁有特定功能且方便調(diào)用。如輪播圖和瀑布流插件
特點(diǎn)：它一般是為了解決某個問題而專門存在，其功能單一，并且比較小
我們以前寫的animate.js 也算一個最簡單的插件
10.2 fastclick 插件的使用
同第9點(diǎn)
10.3 Swiper 插件的使用
中文官網(wǎng)地址： https://www.swiper.com.cn/
- 引入插件相關(guān)文件（dist/css dist/js demo/.html-<link> <script>）
- 按照規(guī)定語法使用（html瀏覽器開發(fā)者模式，復(fù)制html css js到需要的頁面使用）
相關(guān)參數(shù)的更改：
js：相關(guān)配置參數(shù)可以在官網(wǎng)手冊查看，修改成想要的
css：直接新建css類覆蓋
10.4 其他移動端常見插件
lsuperslide： http://www.superslide2.com/
l iscroll： https://github.com/cubiq/iscroll
10.5 插件的使用總結(jié)
1.確認(rèn)插件實(shí)現(xiàn)的功能
2.去官網(wǎng)查看使用說明
3.下載插件
4.打開demo實(shí)例文件（官網(wǎng)上查看效果和對應(yīng)文件名），查看需要引入的相關(guān)文件，并且引入
5.復(fù)制demo實(shí)例文件中的結(jié)構(gòu)html，樣式css以及js代碼
10.6 移動端視頻插件 zy.media.js
H5 給我們提供了 video 標(biāo)簽，但是瀏覽器的支持情況不同
不同的視頻格式文件，我們可以通過source解決
但是外觀樣式，還有暫停，播放，全屏等功能我們只能自己寫代碼解決
這個時候我們可以使用插件方式來制作
我們可以通過 JS 修改元素的大小、顏色、位置等樣式
- 引入
<link rel="stylesheet" href="zy.media.min.css">
<script src="zy.media.min.js"></script>
- css代碼
<style type="text/css">
#modelView {
background-color: #DDDDDD;
z-index: 0;
opacity: 0.7;
height: 100%;
width: 100%;
position: relative;
}
.playvideo {
padding-top: auto;
z-index: 9999;
position: relative;
width: 300px;
height: 200px;
}
.zy_media {
z-index: 999999999
}
</style>
- html代碼
<div class="playvideo">
<div class="zy_media">
<video data-config='{"mediaTitle": "測試視頻--視頻"}'>
<source src="mov.mp4" type="video/mp4">
您的瀏覽器不支持HTML5視頻
</video>
</div>
<div id="modelView"> </div>
</div>
- js代碼
<script>
zymedia('video', {
autoplay: true
});
</script>
11. 移動端常用開發(fā)框架
11.1 框架概述
框架，顧名思義就是一套架構(gòu)，它會基于自身的特點(diǎn)向用戶提供一套較為完整的解決方案?？蚣艿目刂茩?quán)在框架本身，使用者要按照框架所規(guī)定的某種規(guī)范進(jìn)行開發(fā)
插件一般是為了解決某個問題而專門存在，其功能單一，并且比較小
前端常用的框架有 Bootstrap、Vue、Angular、React 等。既能開發(fā)PC端，也能開發(fā)移動端
前端常用的移動端插件有 swiper、superslide、iscroll等
框架： 大而全，一整套解決方案
插件： 小而專一，某個功能的解決方案
11.2 Bootstrap
Bootstrap 是一個簡潔、直觀、強(qiáng)悍的前端開發(fā)框架，它讓 web 開發(fā)更迅速、簡單。
它能開發(fā)PC端，也能開發(fā)移動端
Bootstrap JS插件使用步驟：
1.引入相關(guān)js 文件
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="bootstrap/js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
2.復(fù)制HTML 結(jié)構(gòu)
https://v3.bootcss.com/javascript/#carousel
js插件欄-右側(cè)導(dǎo)航-carousel（輪播）-復(fù)制html代碼
3.修改對應(yīng)樣式
.carousel,
.carousel img {
width: 100%;
height: 300px !important;
}
4.修改相應(yīng)JS 參數(shù)
<script>
$('.carousel').carousel({
interval: 2000
})
</script>
12. 本地存儲
隨著互聯(lián)網(wǎng)的快速發(fā)展，基于網(wǎng)頁的應(yīng)用越來越普遍，為了滿足各種各樣的需求，會經(jīng)常性在本地存儲大量的數(shù)據(jù)，HTML5規(guī)范提出了相關(guān)解決方案
12.1.本地存儲特性
1、數(shù)據(jù)存儲在用戶瀏覽器中
2、設(shè)置、讀取方便、甚至頁面刷新不丟失數(shù)據(jù)
3、容量較大，sessionStorage約5M、localStorage約20M（兆）
4、只能存儲字符串，可以將對象JSON.stringify() 編碼后存儲
12.2.window.sessionStorage
1、生命周期為關(guān)閉瀏覽器窗口
2、在同一個窗口(頁面)下數(shù)據(jù)可以共享
3、以鍵值對的形式存儲使用
存儲數(shù)據(jù)：
sessionStorage.setItem(key, value)
獲取數(shù)據(jù)：
sessionStorage.getItem(key)
刪除數(shù)據(jù)：
sessionStorage.removeItem(key)
清空數(shù)據(jù)：(所有都清除掉)
sessionStorage.clear()
12.3.window.localStorage
1、聲明周期永久生效，除非手動刪除 否則關(guān)閉頁面也會存在
2、可以多窗口（頁面）共享（同一瀏覽器可以共享）
- 以鍵值對的形式存儲使用
存儲數(shù)據(jù)：
localStorage.setItem(key, value)
獲取數(shù)據(jù)：
localStorage.getItem(key)
刪除數(shù)據(jù)：
localStorage.removeItem(key)
清空數(shù)據(jù)：(所有都清除掉)
localStorage.clear()
<input type="text">
<button class="set">set</button>
<button class="get">get</button>
<button class="remove">remove</button>
<button class="clear">clear</button>
<script>
var inp = document.querySelector('input');
var set = document.querySelector('.set');
set.addEventListener('click', function() {
localStorage.setItem('uname', inp.value);
})
var get = document.querySelector('.get');
get.addEventListener('click', function() {
console.log(localStorage.getItem('uname'));
})
var remove = document.querySelector('.remove');
remove.addEventListener('click', function() {
localStorage.removeItem('uname');
})
var clear = document.querySelector('.clear');
clear.addEventListener('click', function() {
localStorage.clear();
})
</script>
12.4.案例：記住用戶名
如果勾選記住用戶名， 下次用戶打開瀏覽器，就在文本框里面自動顯示上次登錄的用戶名
案例分析
把數(shù)據(jù)存起來，用到本地存儲
關(guān)閉頁面，也可以顯示用戶名，所以用到localStorage
打開頁面，先判斷是否有這個用戶名，如果有，就在表單里面顯示用戶名，并且勾選復(fù)選框
當(dāng)復(fù)選框發(fā)生改變的時候change事件
-
如果勾選，就存儲，否則就移除
<input type="text" id="uname"> <input type="checkbox" name="" id="remember">記住用戶名 <script> var uname = document.querySelector('#uname'); var remember = document.querySelector('#remember'); if(localStorage.getItem('uname')) { uname.value = localStorage.getItem('uname'); remember.checked = true; } remember.addEventListener('change', function() { if(this.checked) { localStorage.setItem('uname', uname.value); } else { localStorage.removeItem('uname'); } }) </script>
