HTML5移動Web開發(fā)（第2版）全套教學(xué)課件

《HTML5移動Web開發(fā)（第2版）》第1章初識移動Web開發(fā)第2章HTML5新特性第3章移動端頁面布局和常用事件第4章跨平臺移動Web技術(shù)第5章Bootstrap響應(yīng)式移動Web開發(fā)第6章Boostrap常用組件第7章Bootstrap常用樣式第8章綜合項目——黑馬財富第1章初識移動Web開發(fā)《HTML5移動Web開發(fā)（第2版）》學(xué)習(xí)目標(biāo)/Target了解移動互聯(lián)網(wǎng)的發(fā)展?fàn)顩r，能夠說出移動互聯(lián)網(wǎng)發(fā)展的4個階段熟悉移動Web開發(fā)的3種方式，能夠說出移動Web、Native

App、Hybrid

App的特點了解移動Web開發(fā)，能夠說出移動Web開發(fā)與PC端Web開發(fā)的區(qū)別熟悉移動端的Web瀏覽器，能夠說出常用的移動Web瀏覽器掌握Visual

Studio

Code編輯器的使用，能夠獨立完成編輯器的安裝和設(shè)置章節(jié)概述/Summary移動互聯(lián)網(wǎng)是移動通信和互聯(lián)網(wǎng)的結(jié)合體，它的發(fā)展給人們的生活帶來了巨大的變化，用戶可以通過手機、平板計算機等可移動數(shù)據(jù)終端與互聯(lián)網(wǎng)連接，從而獲得互聯(lián)網(wǎng)中的海量資訊。本章將從移動互聯(lián)網(wǎng)的發(fā)展入手，結(jié)合現(xiàn)實生活中常用的移動應(yīng)用，讓讀者對移動Web開發(fā)有一個初步的了解，然后講解移動端開發(fā)的常見方式以及移動端的Web瀏覽器，讓讀者對移動Web開發(fā)有進(jìn)一步的了解，最后講解Visual

Studio

Code編輯器的使用，為后面案例代碼的編寫打下基礎(chǔ)。目錄/Contents010203移動互聯(lián)網(wǎng)的發(fā)展移動端開發(fā)的常見方式移動Web開發(fā)概述0405移動端的Web瀏覽器Visual

Studio

Code編輯器移動互聯(lián)網(wǎng)的發(fā)展1.1先定一個小目標(biāo)！了解移動互聯(lián)網(wǎng)的發(fā)展?fàn)顩r，能夠說出移動互聯(lián)網(wǎng)發(fā)展的4個階段1.1移動互聯(lián)網(wǎng)的發(fā)展1.1移動互聯(lián)網(wǎng)的發(fā)展移動互聯(lián)網(wǎng)發(fā)展背景在互聯(lián)網(wǎng)發(fā)展的同時，移動互聯(lián)網(wǎng)也呈現(xiàn)出爆發(fā)式的增長，根據(jù)CNNIC（中國互聯(lián)網(wǎng)絡(luò)信息中心）發(fā)布的第47次《中國互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計報告》可知，截至2020年12月，我國網(wǎng)民規(guī)模達(dá)9.89億，較2020年3月增長8540萬，互聯(lián)網(wǎng)普及率達(dá)70.4%。隨著移動通信網(wǎng)絡(luò)環(huán)境的不斷完善，以及智能手機的進(jìn)一步普及，移動互聯(lián)網(wǎng)應(yīng)用向用戶各類生活需求深入滲透，促進(jìn)手機上網(wǎng)使用率增長，增長勢頭強勁。移動互聯(lián)網(wǎng)結(jié)合日常生活移動互聯(lián)網(wǎng)已經(jīng)與人們的生活息息相關(guān)。用戶可以通過手機、平板計算機等終端設(shè)備接入移動應(yīng)用，與互聯(lián)網(wǎng)連接，從而在互聯(lián)網(wǎng)上獲取海量信息。例如，通過手機上的瀏覽器訪問購物、醫(yī)療、旅游等移動應(yīng)用程序。1.1移動互聯(lián)網(wǎng)的發(fā)展移動互聯(lián)網(wǎng)發(fā)展的4個階段1.1移動互聯(lián)網(wǎng)的發(fā)展第一階段是中國移動互聯(lián)網(wǎng)的起步階段。2000年11月10日，中國移動推出“移動夢網(wǎng)計劃”，

打造開放、合作、共贏的產(chǎn)業(yè)價值鏈。2002年5月17日，中國電信在廣州啟動“互聯(lián)星空”計劃，標(biāo)志著ISP和ICP開始聯(lián)合打造寬帶互聯(lián)網(wǎng)產(chǎn)業(yè)。2002年5月17日，中國移動率先在全國范圍內(nèi)正

式推出GPRS業(yè)務(wù)。第二階段是無線應(yīng)用協(xié)議（WAP）廣泛應(yīng)用階段。WAP于1998年初公布，1999-2000年，無線接入服務(wù)正式進(jìn)入商用領(lǐng)域，WAP廣為人知，成為各行業(yè)關(guān)注的重點。WAP是一項全球性的網(wǎng)絡(luò)通信協(xié)議，它使移動互聯(lián)網(wǎng)有了一個通行的標(biāo)準(zhǔn)，其目標(biāo)是將互聯(lián)網(wǎng)豐富的信息和先進(jìn)的業(yè)務(wù)引入手機等無線終端。用戶主要在移動互聯(lián)網(wǎng)上看新聞、讀小說、聽音樂，開始進(jìn)入以內(nèi)容為主的移動互聯(lián)網(wǎng)時代。第一階段

2000-2002第二階段

2003-2005移動互聯(lián)網(wǎng)發(fā)展的4個階段1.1移動互聯(lián)網(wǎng)的發(fā)展第三階段是互動娛樂的移動互聯(lián)網(wǎng)階段。中國移動互聯(lián)網(wǎng)除了內(nèi)容之外，開始有了一些功能性的應(yīng)用，如手機QQ、手機搜索、手機流媒體、手機游戲等，作為傳統(tǒng)互聯(lián)網(wǎng)的補充，移動互聯(lián)網(wǎng)占據(jù)了用戶大量的碎片時間。第四階段是移動互聯(lián)網(wǎng)產(chǎn)品廣泛應(yīng)用階段。隨著3G、4G和5G網(wǎng)絡(luò)的應(yīng)用，移動應(yīng)用在手機上得到了廣泛的使用，一些新名詞開始出現(xiàn)，如SoLoMoCo指Social（社交的）、Local（本地的）、Mobile（移動的）、Commerce（商務(wù)化）。這個階段，移動互聯(lián)網(wǎng)產(chǎn)品得到進(jìn)一步發(fā)展和重視，大部分互聯(lián)網(wǎng)公司都會設(shè)立專門的移動終端部門，負(fù)責(zé)公司產(chǎn)品在移動終端的戰(zhàn)略布局和發(fā)展。第三階段

2006-2008第四階段

2009年至今移動端開發(fā)的常見方式1.2先定一個小目標(biāo)！熟悉移動端開發(fā)的3種常見方式，能夠說出移動Web、Native

App、Hybrid

App的特點1.2移動端開發(fā)的常見方式目前市場上主流的移動端開發(fā)方式有3種。移動Web開發(fā)：編寫運行在移動Web瀏覽器中的Web應(yīng)用，通常是通過單獨制作移動Web頁面或制作響應(yīng)式頁面同時兼容PC端和移動端的方式實現(xiàn)。Native

App開發(fā)：編寫運行在本地操作系統(tǒng)上（如iOS、Android）的應(yīng)用程序，交互性強。一般使用的開發(fā)語言是Java、C++、Objective-C等。Hybrid

App開發(fā)：通過原生應(yīng)用搭建App的外部容器，并使用HTML5、CSS3、Javascript等移動Web技術(shù)編寫移動Web頁面，將移動Web頁面封裝在外部容器中，以App的形式與用戶交互。1.2移動端開發(fā)的常見方式3種開發(fā)方式的區(qū)別1.2移動端開發(fā)的常見方式開發(fā)方式開發(fā)成本維護(hù)更新用戶體驗商店認(rèn)可安裝跨平臺移動Web低簡單差不認(rèn)可不需要優(yōu)Native

App高復(fù)雜優(yōu)認(rèn)可需要差Hybrid

App中簡單中認(rèn)可需要優(yōu)移動Web開發(fā)概述1.3先定一個小目標(biāo)！了解移動Web開發(fā)，能夠說出移動Web開發(fā)的特點1.3移動Web開發(fā)概述移動Web開發(fā)現(xiàn)狀隨著智能手機、平板計算機等移動設(shè)備的普及以及硬件設(shè)備的完善，移動Web瀏覽器對新技術(shù)的支持日益加大，移動Web開發(fā)的用戶體驗和網(wǎng)站性能也得到了逐步的提高，這些都極大地促進(jìn)了移動Web技術(shù)的發(fā)展。1.3移動Web開發(fā)概述1.3移動Web開發(fā)概述移動Web開發(fā)特點移動Web開發(fā)主要由HTML、CSS和Javascript等技術(shù)實現(xiàn)，項目的呈現(xiàn)依賴于移動端Web瀏覽器。注意事項：

由于屏幕大小的限制，在移動Web開發(fā)中，頁面的結(jié)構(gòu)不能過于復(fù)雜，開發(fā)人員要提煉出該網(wǎng)站核心的功能，并簡潔清晰地呈現(xiàn)出來。

頁面的一切交互活動由鼠標(biāo)控制變成了手指觸屏控制，操作方式更加豐富，如搖一搖、雙指放大、滑動、雙擊、單擊等。因此移動Web開發(fā)需要增加一些觸屏事件。移動端的Web瀏覽器1.4先定一個小目標(biāo)！熟悉移動端的Web瀏覽器，能夠說出常用的移動Web瀏覽器1.4移動端的Web瀏覽器1.4移動端的Web瀏覽器手機中常用的移動Web瀏覽器。例如，Android系統(tǒng)內(nèi)置的AndroidBrowser、iOS系統(tǒng)內(nèi)置的Mobile

Safari，以及一些國產(chǎn)的瀏覽器如UC瀏覽器、QQ瀏覽器、百度瀏覽器等。它們可以識別和解析HTML、CSS、Javascript代碼。QQ瀏覽器UC瀏覽器百度瀏覽器搜狗瀏覽器對比移動端網(wǎng)頁和PC端網(wǎng)頁。1.4移動端的Web瀏覽器1.4移動端的Web瀏覽器通過同一個網(wǎng)站針對不同終端的設(shè)計對比，可以反映出移動Web瀏覽器的以下3個特點。移動端Web瀏覽器受到屏幕尺寸的限制，不能顯示太多的內(nèi)容。移動端Web瀏覽器支持一些手勢操作，如觸屏、滑動、縮放等。移動端Web瀏覽器需要考慮硬件因素，設(shè)備性能問題。Visual

Studio

Code編輯器1.5先定一個小目標(biāo)！了解Visual

Studio

Code，能夠說出Visual

Studio

Code的特點1.5.1

Visual

Studio

Code概述1.5.1

Visual

Studio

Code概述Visual

Studio

Code是由微軟公司推出的一款免費、開源的代碼編輯器，一經(jīng)推出便受到開發(fā)者的歡迎。對于Web前端開發(fā)人員，一個強大的編輯器可以使開發(fā)變得簡單、便捷、高效。1.5.1

Visual

Studio

Code概述Visual

Studio

Code編輯器特點：輕巧、極速，占用系統(tǒng)資源較少。具備智能代碼補全、語法高亮顯示、自定義快捷鍵和代碼匹配等功能。跨平臺，可用于macOS、Windows和Linux系統(tǒng)。

主題界面的設(shè)計比較人性化。例如，可以快速查找文件并直接進(jìn)行開發(fā)，可以通過分屏顯示代碼，可以自定義主題顏色（默認(rèn)為黑色），也可以快速查看最近打開的項目文件和查看項目文件結(jié)構(gòu)。

提供豐富的擴展（extension），用戶可根據(jù)需要自行下載和安裝擴展。常用的擴展有

Chinese和Live

Server等。先定一個小目標(biāo)！掌握Visual

Studio

Code的下載和安裝，能夠獨立安裝編輯器1.5.2下載和安裝Visual

Studio

Code1.5.2下載和安裝Visual

Studio

Code下載Visual

Studio

Code編輯器：Visual

Studio

Code官方網(wǎng)站單擊按鈕下載安裝包至本地1.5.2下載和安裝Visual

Studio

Code安裝Visual

Studio

Code編輯器：許可協(xié)議界面雙擊安裝包啟動安裝程序選擇附加任務(wù)界面1.5.2下載和安裝Visual

Studio

Code安裝Visual

Studio

Code編輯器：準(zhǔn)備安裝界面進(jìn)入準(zhǔn)備安裝界面安裝完成界面1.5.2下載和安裝Visual

Studio

CodeVisual

Studio

Code編輯器的主界面：1.5.2下載和安裝Visual

Studio

Code多學(xué)一招：設(shè)置主題顏色將主界面默認(rèn)顏色（黑色）設(shè)置為“Light+(default

light)”。1.5.2下載和安裝Visual

Studio

Code多學(xué)一招：設(shè)置主題顏色設(shè)置后的效果如下。先定一個小目標(biāo)！掌握常用擴展的安裝，能夠成功安裝Chinese和Live

Server擴展1.5.3安裝常用擴展1.5.3安裝常用擴展安裝Chinese擴展將Visual

Studio

Code編輯器的語言（默認(rèn)英文）設(shè)置為中文。實現(xiàn)步驟：單擊左邊欄中的第5個圖標(biāo)按鈕”“（Extensions擴展按鈕）然后在搜索框中輸入關(guān)鍵詞“Chinese”找到中文語言擴展，最后單擊“Install”按鈕進(jìn)行安裝。Chinese擴展安裝過程Chinese擴展安裝成功1.5.3安裝常用擴展安裝Live

Server擴展LiveServer擴展可以創(chuàng)建一個本地服務(wù)器來預(yù)覽網(wǎng)頁，服務(wù)器的默認(rèn)端口是5500，用戶也可以自行設(shè)置端口號、默認(rèn)瀏覽器等。使用LiveServer擴展運行程序時，如果對代碼進(jìn)行了修改，不需要重新刷新瀏覽器即可更新頁面內(nèi)容?！本唧w安裝步驟：單擊左邊欄中的第5個圖標(biāo)按鈕“ （

Extensions擴展按鈕），然后在搜索框中輸入關(guān)鍵詞“l(fā)ive

server”找到該擴展，單擊“安裝”按鈕進(jìn)行安裝。Live

Server擴展安裝過程1.5.3安裝常用擴展安裝Live

Server擴展先定一個小目標(biāo)！掌握Visual

Studio

Code的使用，能夠靈活編寫網(wǎng)頁程序1.5.4使用Visual

Studio

Code1.5.4使用Visual

Studio

Code使用Visual

Studio

Code編輯器編寫一個簡單的Hello頁面，效果如圖：1.5.4使用Visual

Studio

Code

在Visual

Studio

Code歡迎頁面中單擊“打開文件夾…”選項，選擇某個文件夾（如C:\code），進(jìn)入Visual

Studio

Code代碼編輯頁面。在C:\code目錄下新建文件夾，命名為chapter01，用于存放第1章的代碼。創(chuàng)建C:\code\chapter01\demo01.html，編寫一個簡單的Hello頁面。演示在Visual

Studio

Code中如何編寫代碼在C:\code\chapter01\demo01.html文件中，編寫代碼。<!DOCTYPE

html><html><head><meta

charset="UTF-8"><title>Document</title></head><body>Hello</body></html>STEP

011.5.4使用Visual

Studio

Code完成代碼編寫后，Visual

Studio

Code編輯器中的代碼展示界面。1.5.4使用Visual

Studio

Code測試網(wǎng)頁程序通過Live

Server擴展運行demo01.html程序，在代碼編輯區(qū)域任意位置右擊鼠標(biāo)，在彈出的菜單中選擇“Open

with

Live

Server”。STEP

021.5.4使用Visual

Studio

Codedemo01.html文件運行結(jié)果：1.5.4使用Visual

Studio

Code網(wǎng)頁顯示“Hello”內(nèi)容。瀏覽器自動打開的網(wǎng)址為:5500/chapter01/demo01.html。（瀏覽器自動隱藏了“http://”）表示主機地址，也就是Live

Server創(chuàng)建的本地網(wǎng)站服務(wù)器的IP地址；5500表示端口，即訪問服務(wù)器中的5500端口；chapter01/demo01.html是文件資源在服務(wù)器上對應(yīng)的路徑。本章小結(jié)本

章

小

結(jié)本章首先介紹了移動互聯(lián)網(wǎng)的發(fā)展?fàn)顩r，然后講解了移動端開發(fā)的常見方式、移動Web開發(fā)概述以及移動端的Web瀏覽器相關(guān)內(nèi)容，最后講解了Visual

StudioCode編輯器的下載和安裝以及相關(guān)配置，并體驗了Visual

Studio

Code編輯器

的簡單使用。THEEND第2章HTML5新特性《HTML5移動Web開發(fā)（第2版）》學(xué)習(xí)目標(biāo)/Target掌握localStorage和sessionstorage的使用，能夠?qū)崿F(xiàn)數(shù)據(jù)的設(shè)置、獲取和刪除掌握Web

Storage事件監(jiān)聽，能夠監(jiān)聽數(shù)據(jù)的變化掌握<video>、<audio>標(biāo)簽的使用，能夠?qū)崿F(xiàn)頁面中視頻、音頻的處理熟悉地理定位的使用，能夠?qū)崿F(xiàn)Geolocation地理定位和百度地圖地理定位學(xué)習(xí)目標(biāo)/Target掌握拖曳操作，能夠使用拖曳事件實現(xiàn)源對象在目標(biāo)對象中的拖動效果掌握文件操作，能夠使用FileReader對象讀取文件內(nèi)容掌握Canvas的使用，能夠在畫布中繪制圖形章節(jié)概述/Summary隨著移動互聯(lián)網(wǎng)的快速發(fā)展，基于HTML5的應(yīng)用越來越普遍，也變得越來越復(fù)雜。為了滿足各種各樣的需求，HTML5提供了很多新的特性。HTML5新特性主要包括Web

Storage、視頻與音頻、地理定位、拖曳操作、文件操作和Canvas，這些新特性增強了網(wǎng)頁的功能。本章將針對這些HTML5新特性進(jìn)行詳細(xì)講解。目錄/Contents010203Web

Storage視頻與音頻地理定位目錄/Contents040506拖曳操作文件操作CanvasWeb

Storage2.12.1

Web

Storage為什么學(xué)習(xí)Web

Storage：在HTML5之前，我們通常使用Cookie進(jìn)行數(shù)據(jù)存儲，例如在本地設(shè)備上存儲歷史活動的信息，但這種方式的缺點是存儲的空間大小只有4KB左右，存儲的數(shù)據(jù)解析起來比較復(fù)雜。為此，HTML5提出了網(wǎng)絡(luò)存儲的相關(guān)解決方案，即Web

Storage（Web存儲）。先定一個小目標(biāo)！了解Web

Storage的概念，能夠說出Web

Storage的特點2.1.1

Web

Storage的概念2.1.1

Web

Storage的概念Web

Storage的作用：可以將數(shù)據(jù)存儲在本地，如保存用戶的偏好設(shè)置、復(fù)選框的選中狀態(tài)、文本框默認(rèn)填寫的值等。用戶在瀏覽器中刷新網(wǎng)頁時，網(wǎng)頁通過Web

Storage就可以知道用戶之前所做的一些修改，而不需要將用戶修改的內(nèi)容存儲在服務(wù)器端。2.1.1

Web

Storage的概念Web

Storage和Cookie的區(qū)別：類似于Cookie，但相比Cookie可以減少網(wǎng)絡(luò)流量，因為Web

Storage存儲的數(shù)據(jù)不會發(fā)送給服務(wù)器，而Cookie存儲的數(shù)據(jù)會由瀏覽器通過HTTP請求自動發(fā)送給服務(wù)器。將數(shù)據(jù)存儲在Web

Storage可以減少數(shù)據(jù)在瀏覽器和服務(wù)器間不必要地來回傳遞。2.1.1

Web

Storage的概念Web

Storage中包含兩個關(guān)鍵的對象，都是Web

Storage的實例，都能使用Web

Storage接口提供的方法和屬性。localStorage對象：用于本地存儲。sessionstorage對象：用于區(qū)域存儲。2.1.1

Web

Storage的概念Web

Storage具有以下5個特點：數(shù)據(jù)的設(shè)置和讀取比較方便。容量較大，可以存儲大約5MB數(shù)據(jù)。只能存儲字符串，如果要存儲JSON對象，則可以使用JSON.stringify()和JSON.parse()方法分別進(jìn)行序列化和反序列化。本地數(shù)據(jù)可以即時獲得。借助瀏覽器的緩存，整個頁面和數(shù)據(jù)都可以保存在本地，從本地讀數(shù)據(jù)比通過網(wǎng)絡(luò)從服務(wù)器獲得數(shù)據(jù)快得多，可以立即顯示網(wǎng)頁中的緩存的內(nèi)容。數(shù)據(jù)可以臨時存儲。很多時候數(shù)據(jù)只需要在用戶瀏覽單個頁面期間使用，關(guān)閉頁面后數(shù)據(jù)就可以丟棄，這種情況使用sessionstorage非常方便。先定一個小目標(biāo)！掌握localStorage，能夠使用localStorage提供的屬性和方法實現(xiàn)數(shù)據(jù)的設(shè)置、獲取和刪除2.1.2

localStorage2.1.2

localStoragelocalStorage的主要作用：本地存儲，它可以將數(shù)據(jù)按照鍵值對的方式保存在瀏覽器中，直到用戶或者腳本主動清除數(shù)據(jù)，否則該數(shù)據(jù)會一直存在。也就是說，使用了本地存儲的數(shù)據(jù)將被持久化保存。localStorage與sessionstorage的區(qū)別：存儲數(shù)據(jù)的生命周期不同。locaStorage是永久性存儲，而sessionstorage的生命周期與會話保持一致，會話結(jié)束時數(shù)據(jù)消失。從硬件方面理解，localStorage的數(shù)據(jù)是存儲在硬盤中的，關(guān)閉瀏覽器時數(shù)據(jù)仍然在硬盤上，再次打開瀏覽器仍然可以獲取localStorage保存的數(shù)據(jù)。而sessionstorage的數(shù)據(jù)保存在內(nèi)存中，當(dāng)瀏覽器關(guān)閉后，內(nèi)存將被自動清除。2.1.2

localStoragelocalStorage的優(yōu)勢：拓展了Cookie的4KB限制，并且可以將第一次請求的數(shù)據(jù)直接存儲到本地，其容量相當(dāng)于一個5MB大小的數(shù)據(jù)庫。localStorage也有一些局限：IE瀏覽器在8以上版本才支持localStorage。不同瀏覽器保存的數(shù)據(jù)量大小不統(tǒng)一。目前所有的瀏覽器都會把localStorage的值類型限定為String類型，對于比較常用的Javascript對象類型需要轉(zhuǎn)換成字符串保存。localStorage在瀏覽器的隱私模式下是不可讀取的。

localStorage不能被網(wǎng)絡(luò)爬蟲抓取到。2.1.2

localStoragelocalStorage對象提供的方法和屬性方法/屬性描述key(n)該方法用于返回localStorage對象中第n個key的名稱setItem(key,value)該方法接收鍵名和值作為參數(shù)，將會把鍵值對存儲到localStorage中，如果鍵名存在，則更新其對應(yīng)的值getItem(key)該方法接收一個鍵名作為參數(shù)，返回鍵名對應(yīng)的值removeItem(key)該方法刪除鍵名為key的存儲內(nèi)容clear()該方法清空所有存儲內(nèi)容length該屬性返回localStorage對象中包含的item的數(shù)量2.1.2

localStorage使用localStorage對象的方法來設(shè)置、獲取和刪除數(shù)據(jù)：2.1.2

localStorage使用localStorage對象的方法來設(shè)置、獲取和刪除數(shù)據(jù)：2.1.2

localStorage<!DOCTYPE

html><html><head><meta

charset="UTF-8"><title>Document</title></head><body><input

type="text"

id="username"><button

id="setData">設(shè)置數(shù)據(jù)</button><button

id="getData">獲取數(shù)據(jù)</button><button

id="delData">刪除數(shù)據(jù)</button></body></html>STEP

01定義按鈕創(chuàng)建C:\code\chapter02\demo01.html，定義用于輸入數(shù)據(jù)的文本框和用于設(shè)置數(shù)據(jù)、獲取數(shù)據(jù)和刪除數(shù)據(jù)的按鈕。2.1.2

localStorage<script>var

username

=

document.querySelector("#username");//單擊“設(shè)置數(shù)據(jù)”按鈕，設(shè)置數(shù)據(jù)

document.querySelector("#setData").onclick=function(){var

val=username.value;

//獲取username里面的值

localStorage.setItem("username",val);};</script>STEP

02綁定單擊事件修改demo01.html，在</body>結(jié)束標(biāo)簽前添加Javascript代碼，分別獲取設(shè)置數(shù)據(jù)、獲取數(shù)據(jù)和刪除數(shù)據(jù)按鈕的元素并綁定單擊事件。2.1.2

localStorage//單擊“獲取數(shù)據(jù)”按鈕，獲得數(shù)據(jù)

document.querySelector("#getData").onclick=function(){alert(localStorage.getItem("username"));};//單擊“刪除數(shù)據(jù)”按鈕，刪除數(shù)據(jù)

document.querySelector("#delData").onclick=function(){localStorage.removeItem("username");};STEP

02綁定單擊事件修改demo01.html，在</body>結(jié)束標(biāo)簽前添加Javascript代碼，分別獲取設(shè)置數(shù)據(jù)、獲取數(shù)據(jù)和刪除數(shù)據(jù)按鈕的元素并綁定單擊事件。2.1.2

localStorageSTEP

03在瀏覽器中訪問demo01.html初始頁面效果。2.1.2

localStorageSTEP

04設(shè)置數(shù)據(jù)在文本框中輸入“admin”，然后單擊“設(shè)置數(shù)據(jù)”按鈕。2.1.2

localStorageSTEP

05獲取數(shù)據(jù)查看數(shù)據(jù)是否設(shè)置成功。如果成功會顯示在警告框中。2.1.2

localStorageSTEP

06刪除數(shù)據(jù)刪除后再次單擊“獲取數(shù)據(jù)”的按鈕。先定一個小目標(biāo)！掌握sessionstorage，能夠使用sessionstorage提供的屬性和方法實現(xiàn)數(shù)據(jù)的設(shè)置、獲取和刪除2.1.3

sessionstorage2.1.3

sessionstoragesessionstorage的特點：存儲的數(shù)據(jù)只在當(dāng)前網(wǎng)頁所在的瀏覽器標(biāo)簽頁內(nèi)有效，只要這個瀏覽器標(biāo)簽頁沒有關(guān)閉，即使刷新頁面或進(jìn)入同源的另一頁面，數(shù)據(jù)仍然存在。當(dāng)瀏覽器標(biāo)簽頁關(guān)閉后，sessionstorage中存儲的數(shù)據(jù)將被自動清除。如果打開了不同的標(biāo)簽頁，即使是同一頁面，sessionstorage對象也是不同的。所以如果想要讓不同標(biāo)簽頁下的網(wǎng)頁不能互相訪問數(shù)據(jù)，可以將數(shù)據(jù)保存在sessionstorage中。sessionstorage對象也提供了一些方法和屬性：與localStorage對象的方法和屬性類似。2.1.3

sessionstorage使用sessionstorage對象的方法設(shè)置數(shù)據(jù)，效果如圖：2.1.3

sessionstorage<!DOCTYPE

html><html><head><meta

charset="UTF-8"><title>Document</title></head><body><input

type="text"

id="username"><button

id="setData">設(shè)置數(shù)據(jù)</button></body></html>STEP

01定義按鈕創(chuàng)建C:\code\chapter02\demo02.html，定義一個文本框和一個“設(shè)置數(shù)據(jù)”按鈕，具體代碼如下。2.1.3

sessionstorage<script>var

username

=

document.querySelector("#username");//單擊“設(shè)置數(shù)據(jù)”按鈕，設(shè)置數(shù)據(jù)

document.querySelector("#setData").onclick=function(){var

val=username.value;

//獲取username里面的值

sessionstorage.setItem("username",val);};</script>STEP

02綁定單擊事件修改demo02.html，在</body>結(jié)束標(biāo)簽前添加Javascript代碼，獲取“設(shè)置數(shù)據(jù)”按鈕的元素并綁定單擊事件。2.1.3

sessionstorageSTEP

03在瀏覽器中訪問demo01.html初始頁面效果。2.1.3

sessionstorageSTEP

04設(shè)置數(shù)據(jù)在文本框中輸入“admin”，然后單擊“設(shè)置數(shù)據(jù)”按鈕。2.1.3

sessionstorageSTEP

05打開新標(biāo)簽頁，觀察數(shù)據(jù)是否存在在瀏覽器重新訪問瀏覽器中訪問demo01.html文件，查看sessionstorage中的admin數(shù)據(jù)是否存在。先定一個小目標(biāo)！掌握Web

Storage事件監(jiān)聽，能夠監(jiān)聽數(shù)據(jù)的變化2.1.4

Web

Storage事件監(jiān)聽2.1.4

Web

Storage事件監(jiān)聽storage事件觸發(fā)的條件：當(dāng)使用Web

Storage存儲的數(shù)據(jù)發(fā)生變化時，會觸發(fā)window對象的storage事件。我們可

以監(jiān)聽該事件并指定事件處理函數(shù)，當(dāng)其他頁面中的localStorage或sessionstorage中保存的數(shù)據(jù)發(fā)生改變時，就會執(zhí)行事件處理函數(shù)。2.1.4

Web

Storage事件監(jiān)聽監(jiān)聽storage事件的示例代碼如下：//window.addEventListener(事件名,事件處理函數(shù));

window.addEventListener("storage",function

(event){console.log(event.key);});上述代碼中，事件處理函數(shù)接收一個event對象作為參數(shù)，event對象的key屬性保存發(fā)生變化的數(shù)據(jù)的鍵名。2.1.4

Web

Storage事件監(jiān)聽event對象的屬性屬性描述event.key獲取在sessionstorage或localStorage中被修改的數(shù)據(jù)鍵值event.oldValue獲取在sessionstorage或localStorage中被修改前的值event.newValue獲取在sessionstorage或localStorage中被修改后的值event.url獲取在sessionstorage或localStorage中值的頁面URL地址event.storageArea獲取變動的sessionstorage對象或localStorage對象2.1.4

Web

Storage事件監(jiān)聽storage事件并不在導(dǎo)致數(shù)據(jù)變化的當(dāng)前頁面觸發(fā)。如果瀏覽器同時打開一個域名下面的多個頁面，當(dāng)其中的一個頁面改變sessionstorage或localStorage的數(shù)據(jù)時，其他所有頁面的storage事件會被觸發(fā)，而原始頁面并不觸發(fā)storage事件。通過這種機制，可以實現(xiàn)多個頁面之間的通信。由于sessionstorage無法在不同標(biāo)簽頁的網(wǎng)頁中互相訪問數(shù)據(jù)，當(dāng)使用storage事件時，可以將頁面放在<iframe>標(biāo)簽創(chuàng)建的框架中，此時在框架內(nèi)通過storage事件可以監(jiān)聽外層頁面的sessionstorage的數(shù)據(jù)變化。2.1.4

Web

Storage事件監(jiān)聽使用storage事件對頁面中的數(shù)據(jù)進(jìn)行監(jiān)聽，效果如圖：demo03-1初始頁面效果設(shè)置數(shù)據(jù)2.1.4

Web

Storage事件監(jiān)聽使用storage事件對頁面中的數(shù)據(jù)進(jìn)行監(jiān)聽，效果如圖：demo03-2初始頁面效果修改后與修改前的用戶名<!DOCTYPE

html><html><head><meta

charset="UTF-8"><title>Document</title></head><body><label>用戶名：</label><input

type="text"id="username"><button

id="save">保存</button></body></html>STEP

01定義頁面結(jié)構(gòu)創(chuàng)建C:\code\chapter02\demo03-1.html，定義一個文本框用來輸入用戶名，定義一個“保存”按鈕用來將文本框中的用戶名保存在localStorage中。2.1.4

Web

Storage事件監(jiān)聽<script>var

username

=

document.querySelector("#username");//單擊“保存”按鈕，設(shè)置數(shù)據(jù)

document.querySelector("#save").onclick=function(){var

val=username.value;

//獲取username里面的值

localStorage.setItem("username",val);};</script>STEP

01獲取元素并綁定事件修改demo03-1.html文件，在</body>結(jié)束標(biāo)簽前添加Javascript代碼，獲取“保存”按鈕的元素并綁定單擊事件。2.1.4

Web

Storage事件監(jiān)聽STEP

02在瀏覽器中訪問demo03-1.htmldemo03-1.html初始頁面效果如下。2.1.4

Web

Storage事件監(jiān)聽STEP

03設(shè)置數(shù)據(jù)在文本框中輸入“user1”，單擊“保存”按鈕。2.1.4

Web

Storage事件監(jiān)聽<body><span>新的用戶名:</span><span

id="newval"></span><br><span>舊的用戶名:</span><span

id="oldval"></span></body>STEP

04監(jiān)聽數(shù)據(jù)變化并顯示創(chuàng)建C:\code\chapter02\demo03-2.html，通過storage事件監(jiān)聽數(shù)據(jù)的變化，并定義兩個<span>標(biāo)簽用來顯示數(shù)據(jù)修改前和修改后的值。2.1.4

Web

Storage事件監(jiān)聽<script>var

newdata

=

document.getElementById("newval");var

olddata

=

document.getElementById("oldval");window.addEventListener("storage",

function

(e)

{//設(shè)置元素的內(nèi)容為修改后的值//設(shè)置元素的內(nèi)容為修改前的值newdata.innerHTML

=

e.newValue;olddata.innerHTML

=

e.oldValue;});</script>STEP

04監(jiān)聽數(shù)據(jù)變化并顯示修改demo03-2.html文件，在</body>結(jié)束標(biāo)簽前添加Javascript代碼，實現(xiàn)數(shù)據(jù)的監(jiān)聽。2.1.4

Web

Storage事件監(jiān)聽STEP

05在瀏覽器中訪問demo03-2.htmldemo03-2.html初始頁面效果。2.1.4

Web

Storage事件監(jiān)聽STEP

06切換到demo03-1.html頁面在文本框中輸入“user2”，單擊“保存”按鈕。再切換到demo03-2.html網(wǎng)頁。2.1.4

Web

Storage事件監(jiān)聽視頻與音頻2.2先定一個小目標(biāo)！掌握<video>標(biāo)簽，能夠使用<video>標(biāo)簽實現(xiàn)頁面中視頻效果2.2.1<video>標(biāo)簽2.2.1<video>標(biāo)簽HTML5為網(wǎng)頁提供了處理視頻的能力，那么視頻在網(wǎng)頁中的應(yīng)用有哪些呢？2.2.1<video>標(biāo)簽<video>標(biāo)簽的作用：用于定義視頻播放器，它不僅是一個播放視頻的標(biāo)簽，還提供了控制欄，用來實現(xiàn)播放、暫停、進(jìn)度和音量控制、全屏等功能。<video>標(biāo)簽的基本語法如下：<video

src="視頻文件路徑"controls>瀏覽器不支持video</video>2.2.1<video>標(biāo)簽<video>標(biāo)簽的基本屬性：src屬性：用于設(shè)置視頻文件的路徑。controls屬性：用于為視頻提供控制欄。也可以使用width和height屬性設(shè)置視頻寬度和高度。2.2.1<video>標(biāo)簽<video>標(biāo)簽支持以下3種視頻格式：Ogg：帶有Theora視頻編碼和Vorbis音頻編碼的Ogg文件。MPEG4：帶有H.264視頻編碼和AAC音頻編碼的MPEG4文件。WebM：帶有VP8視頻編碼和Vorbis音頻編碼的WebM文件。2.2.1<video>標(biāo)簽<video>標(biāo)簽中可以使用<source>標(biāo)簽指定多個備用的不同格式的文件路徑，語法如下：<video

controls><source

src="視頻文件地址"type="video/格式"><source

src="視頻文件地址"type="video/格式"></video>上述代碼中，Ogg對應(yīng)的type為video/ogg，MPEG4對應(yīng)的type為video/mp4，WebM對應(yīng)的type為video/webm。2.2.1<video>標(biāo)簽創(chuàng)建網(wǎng)頁中的視頻播放器，效果如圖：<!DOCTYPE

html><html><head><meta

charset="UTF-8"><title>Document</title></head><body><video

controls

width="400"><source

src="video/scenery.mp4"

type="video/mp4"></video></body></html>STEP

01定義視頻播放器創(chuàng)建C:\code\chapter02\demo04.html，使用<video>標(biāo)簽定義視頻播放器。2.2.1<video>標(biāo)簽STEP

02在瀏覽器中訪問demo04.html頁面中顯示視頻播放器。2.2.1<video>標(biāo)簽先定一個小目標(biāo)！掌握<audio>標(biāo)簽，能夠使用<audio>標(biāo)簽實現(xiàn)頁面中音頻效果2.2.2<audio>標(biāo)簽2.2.2<audio>標(biāo)簽HTML5為網(wǎng)頁提供了處理音頻的能力。音頻在網(wǎng)頁中種的應(yīng)用有很多，例如使用網(wǎng)頁中QQ音樂播放器聽音樂。2.2.2<audio>標(biāo)簽<audio>標(biāo)簽的作用：HTML5提供的<audio>標(biāo)簽用來定義Web上的聲音文件或音頻流。<audio>標(biāo)簽的基本語法如下：<audio

src="音頻文件路徑"controls>瀏覽器不支持audio</audio>2.2.2<audio>標(biāo)簽<audio>標(biāo)簽支持以下3種視頻格式：Ogg：Ogg音頻格式類似于MP3音頻格式。同等條件下，Ogg格式音頻文件的音質(zhì)、體積大小優(yōu)于MP3音頻格式，其音頻文件格式表示方式為audio/ogg。MP3：是一種音頻壓縮技術(shù)，其全稱是動態(tài)影像專家壓縮標(biāo)準(zhǔn)音頻層面3（MovingPictureExpertsGroupAudioLayerIII），簡稱為MP3，它被用來大幅度地降低音頻數(shù)據(jù)量，其音頻文件格式表示方式為audio/mp3。WAV：是錄音時用的標(biāo)準(zhǔn)的Windows文件格式，數(shù)據(jù)本身的格式為PCM或壓縮型，屬于無損音樂格式的一種，其音頻文件格式表示方式為audio/wav。2.2.2<audio>標(biāo)簽<audio>標(biāo)簽同樣支持引入多個音頻源，使用<source>標(biāo)簽使用<source>標(biāo)簽來定義，語法如下：<audio

controls><source

src="音頻文件地址"type="audio/格式"><source

src="音頻文件地址"type="audio/格式"></audio>2.2.2<audio>標(biāo)簽創(chuàng)建頁面中的音頻播放器，效果如圖：STEP

01定義音頻播放器創(chuàng)建C:\code\chapter02\demo05.html，使用<audio>標(biāo)簽定義音頻播放器。2.2.2<audio>標(biāo)簽<!DOCTYPE

html><html><head><meta

charset="UTF-8"><title>Document</title></head><body><audio

src="audio/music.mp3"controls>您的瀏覽器不支持audio</audio></body></html>STEP

02在瀏覽器中訪問demo05.html頁面中顯示音頻播放器。2.2.2<audio>標(biāo)簽先定一個小目標(biāo)！掌握video和audio對象，能夠使用這些對象的方法和屬性實現(xiàn)手動控制視頻和音頻播放器2.2.3

video和audio對象2.2.3

video和audio對象video和audio對象的常用方法方法描述load()加載媒體文件，為播放做準(zhǔn)備，通常用于播放前的預(yù)加載，也用于重新加載媒體文件play()播放媒體文件。如果視頻沒有加載，則加載并播放；如果視頻是暫停的，則變?yōu)椴シ舙ause()暫停播放媒體文件canPlayType()測試瀏覽器是否支持指定的媒體類型2.2.3

video和audio對象video和audio對象的常用屬性屬性描述currentSrc返回當(dāng)前視頻/音頻的URLcurrentTime設(shè)置或返回視頻/音頻中的當(dāng)前播放位置（以秒計）duration返回視頻/音頻的長度（以秒計）ended返回視頻/音頻的播放是否已結(jié)束error返回表示視頻/音頻錯誤狀態(tài)的MediaError對象paused返回視頻/音頻是否暫停muted設(shè)置或返回是否靜音volume設(shè)置或返回視頻/音頻的音量2.2.3

video和audio對象手動控制視頻播放器，效果如圖：<body><video

width="300"

controls><source

src="video/scenery.mp4"

type="video/mp4"></video><br><button>播放</button><button>暫停</button><button>靜音</button></body>STEP

01定義音頻播放器頁面結(jié)構(gòu)創(chuàng)建C:\code\chapter02\demo06.html，使用<video>標(biāo)簽定義視頻播放器，并定義3個按鈕。2.2.3

video和audio對象<script>var

video

=

document.getElementsByTagName("video")[0];var

btn

=

document.getElementsByTagName("button");btn[0].onclick

=

function

()

{video.play();};btn[1].onclick

=

function

()

{video.pause();};btn[2].onclick

=

function

()

{video.muted

=

!video.muted;};</script>STEP

02設(shè)置按鈕控制視頻播放器修改demo06.html，添加Javascript代碼，實現(xiàn)手動控制視頻的播放、暫停和靜音。2.2.3

video和audio對象STEP

03在瀏覽器中訪問demo06.html頁面中顯示視頻播放器和三個按鈕。設(shè)置按鈕控制視頻的播放、暫停、靜音2.2.3

video和audio對象地理定位2.32.3地理定位地理定位在日常生活中應(yīng)用比較廣泛，如互聯(lián)網(wǎng)打車、在線地圖等。HTML5增加了獲取用戶地理位置信息的接口Geolocation，開發(fā)者可以通過經(jīng)緯度來獲取用戶的地理位置信息。另外，百度等互聯(lián)網(wǎng)公司也提供了地理定位的接口。先定一個小目標(biāo)！熟悉Geolocation地理定位的使用，能夠在網(wǎng)頁中顯示地理定位信息2.3.1

Geolocation地理定位2.3.1

Geolocation地理定位Geolocation接口：封裝了獲取位置信息的技術(shù)細(xì)節(jié)，開發(fā)者不需要關(guān)心信息的來源，只需關(guān)注如何使用即可，這極大地簡化了開發(fā)的難度。目前，Geolocation接口已經(jīng)得到了大部分瀏覽器的支持：FirefoxIE

9OperaSafariChrome2.3.1

Geolocation地理定位Geolocation的用法：navigator.geolocation對象提供了getCurrentPosition()方法獲取當(dāng)前地理位置。navigator是瀏覽器的內(nèi)置對象。當(dāng)getCurrentPosition()方法被調(diào)用時，會發(fā)起一個異步請求，瀏覽器會調(diào)用底層的硬件來更新當(dāng)前的位置信息。2.3.1

Geolocation地理定位getCurrentPosition()方法的參數(shù)說明如下：getCurrentPosition(successCallback,

errorCallback)successCallback：定位成功時執(zhí)行的回調(diào)函數(shù)。errorCallback：定位失敗時執(zhí)行的回調(diào)函數(shù)。2.3.1

Geolocation地理定位當(dāng)getCurrentPosition()方法成功獲取地理信息后，會在successCallback回調(diào)函數(shù)中傳入position對象。該position對象包含coords和timestamp兩個屬性。Coords：是一個coordinates對象，包含當(dāng)前位置的一些信息。Timestamp：獲取到位置的時間戳。2.3.1

Geolocation地理定位coords包含的信息屬性名描述latitude十進(jìn)制表示的緯度坐標(biāo)longitude十進(jìn)制表示的經(jīng)度坐標(biāo)accuracy當(dāng)前經(jīng)緯度信息的精度（單位：m）altitude海拔高度（單位：m）altitudeAccuracy當(dāng)前海拔高度的精度heading當(dāng)前設(shè)備的朝向（單位：弧度），從正北開始計算2.3.1

Geolocation地理定位獲取用戶當(dāng)前位置信息，效果如圖：頁面初始效果是否允許獲取您的位置獲取地理位置2.3.1

Geolocation地理定位獲取用戶當(dāng)前位置信息，效果如圖：設(shè)置虛擬地理定位獲取地理位置<!DOCTYPE

html><html><head><meta

charset="UTF-8"><title>Document</title></head><body><p

id="demo">獲得您的坐標(biāo)：</p><button

onclick="getLocation()">試一下</button></body>STEP

01獲取用戶當(dāng)前的經(jīng)緯度坐標(biāo)創(chuàng)建C:\code\chapter02\demo07.html，利用Geolocation進(jìn)行地理位置定位，獲取用戶當(dāng)前的經(jīng)緯度坐標(biāo)。2.3.1

Geolocation地理定位<script>var

x

=

document.getElementById("demo");function

getLocation()

{if

(navigator.geolocation)

{navigator.geolocation.getCurrentPosition(showPosition,

showError);}

else

{x.innerHTML="當(dāng)前瀏覽器不支持地理定位";}}</script>STEP

02獲取用戶當(dāng)前的經(jīng)緯度坐標(biāo)修改demo07.html，添加Javascript代碼，判斷當(dāng)前瀏覽器是否支持地理定位。2.3.1

Geolocation地理定位//緯度//經(jīng)度//獲取定位成功，顯示位置信息

function

showPosition(position){x.innerHTML

="Latitude:"

+

position.coords.latitude

+"<br>Longitude:"

+

position.coords.longitude;}STEP

03獲取用戶當(dāng)前的經(jīng)緯度坐標(biāo)修改demo07.html，繼續(xù)添加Javascript代碼，定義showPosition()函數(shù)，用于顯示位置信息。2.3.1

Geolocation地理定位獲取用戶當(dāng)前的經(jīng)緯度坐標(biāo)定義showError()函數(shù)，用于顯示出錯信息。function

showError(error)

{switch

(error.code)

{case

error.PERMISSION_DENIED:x.innerHTML="用戶拒絕地理定位請求";

break;case

error.POSITION_UNAVAILABLE:x.innerHTML="位置信息不可用";

break;case

error.TIMEOUT:x.innerHTML="獲取用戶位置的請求超時";

break;case

error.UNKNOWN_ERROR:x.innerHTML="發(fā)生了一個不明錯誤";

break;}}STEP

042.3.1

Geolocation地理定位STEP

05在瀏覽器中訪問demo07.html初始頁面效果。2.3.1

Geolocation地理定位STEP

06獲取位置單擊“試一下”按鈕后，會提示是否允許當(dāng)前頁面獲取您的位置。2.3.1

Geolocation地理定位STEP

07顯示位置信息單擊“允許”按鈕后，頁面就會顯示獲取定位后的結(jié)果。2.3.1

Geolocation地理定位STEP

08設(shè)置虛擬地理定位單擊開發(fā)者工具右上角的“”按鈕，在彈出的菜單中選擇“More

tools”-

“Sensors”，然后在Location下拉菜單中選擇“Shanghai”，表示虛擬上海的地理位置。2.3.1

Geolocation地理定位STEP

09顯示位置信息再次“試一下”按鈕，頁面顯示虛擬位置的信息。2.3.1

Geolocation地理定位先定一個小目標(biāo)！熟悉百度地圖地理定位的使用，能夠?qū)崿F(xiàn)百度地圖地理定位2.3.2百度地圖地理定位百度地圖的作用：在實際開發(fā)中，利用第三方的API（例如百度地圖）可以很方便地實現(xiàn)地理定位和信息的獲取。百度地圖提供了豐富的地圖數(shù)據(jù)庫以及地理定位、地圖、導(dǎo)航、搜索和路線規(guī)劃等功能。百度地圖的定位API：基于用戶當(dāng)前位置的，將用戶位置（經(jīng)/緯度）作為參數(shù)進(jìn)行傳遞，從而實現(xiàn)相應(yīng)的功能，并支持各類應(yīng)用的開發(fā)者對地理位置的獲取需求。2.3.2百度地圖地理定位2.3.2百度地圖地理定位實現(xiàn)全景圖頁面，效果如圖：全景圖頁面效果STEP

01進(jìn)入百度地圖開放平臺官網(wǎng)進(jìn)入百度地圖開放平臺官網(wǎng)，選擇導(dǎo)航欄中的“開發(fā)文檔”下的“Web開發(fā)”，找到“Javascript

API”選項。2.3.2百度地圖地理定位STEP

02Javascript

API單擊“Javascript

API”，進(jìn)入以下頁面。2.3.2百度地圖地理定位STEP

03DEMO演示單擊“Javascript

API

v2.0”選項，進(jìn)入新頁面。2.3.2百度地圖地理定位STEP

04展示全景圖單擊“DEMO演示”按鈕，進(jìn)入新頁面。2.3.2百度地圖地理定位STEP

05復(fù)制代碼并粘貼創(chuàng)建C:\code\chapter02\demo08.html，復(fù)制代碼并將代碼粘貼到本文件中。<!DOCTYPE

html><html><head><title>普通地圖&全景圖</title><meta

http-equiv="Content-Type"

content="text/html;

charset=utf-8"

/></head><body><div

id="panorama"></div><div

id="normal_map"></div></body>2.3.2百度地圖地理定位STEP

06復(fù)制代碼并粘貼將代碼復(fù)制到</head>標(biāo)簽結(jié)束前。<script

type="text/javascript"src="/api?v=3.0&ak=您的密鑰"></script>2.3.2百度地圖地理定位STEP

07復(fù)制代碼并粘貼將代碼復(fù)制到</head>標(biāo)簽結(jié)束前。<style

type="text/css">body,html

{width:

100%;height:

100%;overflow:

hidden;margin:

0;font-family:"微軟雅黑";}#panorama

{height:

50%;overflow:

hidden;}#normal_map

{height:

50%;overflow:

hidden;}</style>2.3.2百度地圖地理定位STEP

08復(fù)制代碼并粘貼將代碼復(fù)制到</body>標(biāo)簽結(jié)束前。<script

type="text/javascript">//全景圖展示var

panorama

=

new

BMap.Panorama("panorama");panorama.setPosition(new

BMap.Point(120.320032,31.589666));//根據(jù)經(jīng)緯度坐標(biāo)展示全景圖

panorama.setPov({heading:-40,pitch:6});

panorama.addEventListener("position_changed",function

(e){//全景圖位置改變后，普通地圖中心點也隨之改變var

pos=panorama.getPosition();map.setCenter(new

BMap.Point(pos.lng,pos.lat));marker.setPosition(pos);});</script>2.3.2百度地圖地理定位STEP

09復(fù)制代碼并粘貼將代碼復(fù)制到</script>標(biāo)簽結(jié)束前。//普通地圖展示var

mapOption={mapType:

BMAP_NORMAL_MAP,maxZoom:

18,drawMargin:

0,enableFulltimeSpotClick:

true,enableHighResolution:

true}var

map

=

new

BMap.Map("normal_map",

mapOption);var

testpoint

=

new

BMap.Point(120.320032,

31.589666);map.centerAndZoom(testpoint,

18);2.3.2百度地圖地理定位STEP

10復(fù)制代碼并粘貼將代碼復(fù)制到</script>標(biāo)簽結(jié)束前。var

marker

=

new

BMap.Marker(testpoint);marker.enableDragging();map.addOverlay(marker);marker.addEventListener("dragend",

function

(e)

{panorama.setPosition(e.point);//拖動marker后，全景圖位置也隨著改變

panorama.setPov({heading:-40,pitch:6});});map.enableScrollWheelZoom();map.enableContinuousZoom();//啟用滾輪放大縮小，默認(rèn)禁用//啟用地圖慣性拖拽，默認(rèn)禁用2.3.2百度地圖地理定位STEP

11在瀏覽器中訪問demo08.html頁面顯示“百度未授權(quán)使用地圖API”。2.3.2百度地圖地理定位STEP

12申請個人密鑰在百度地圖開放平臺中申請密鑰。2.3.2百度地圖地理定位STEP

13復(fù)制密鑰申請成功后復(fù)制密鑰。2.3.2百度地圖地理定位STEP

14粘貼密鑰粘貼到demo08.html文件中“您的密鑰”位置，保存代碼并刷新頁面。2.3.2百度地圖地理定位STEP

15坐標(biāo)拾取器打開百度地圖開放平臺官網(wǎng)，選擇導(dǎo)航欄中的“開發(fā)文檔”下的“開發(fā)者工具”，找到“坐標(biāo)拾取器”選項。2.3.2百度地圖地理定位STEP

16選取坐標(biāo)單擊“坐標(biāo)拾取器”后，可以在搜索欄搜索關(guān)鍵字，也可以直接在地圖上選擇坐標(biāo)，然后復(fù)制右上角的坐標(biāo)點，粘貼到文件中坐標(biāo)處。2.3.2百度地圖地理定位STEP

17展示坐標(biāo)對應(yīng)的全景圖將選取坐標(biāo)的經(jīng)緯度復(fù)制到代碼中，頁面顯示坐標(biāo)對應(yīng)的全景圖。2.3.2百度地圖地理定位拖曳操作2.42.4拖曳操作拖曳操作的實現(xiàn)：需要借助于鼠標(biāo)來實現(xiàn)，如文件或圖片的移動操作等。在開發(fā)中，我們經(jīng)常使用原生的Javascript來實現(xiàn)拖曳效果，實現(xiàn)起來比較復(fù)雜。如何讓實現(xiàn)拖曳效果變得簡單呢？HTML5為我們提供了更好用的接口或者事件，在很大程度上降低了頁面中拖曳交互的實現(xiàn)難度。先定一個小目標(biāo)！熟悉拖曳的概念，能夠說出拖曳的的基本過程2.4.1拖曳的概念拖曳的概念：是頁面中的元素從初始位置被拖動到新的位置的用戶行為，如拖曳頁面中的指定元素到另一個元素中。拖曳過程：首先使用鼠標(biāo)指針進(jìn)入源對象，然后按住鼠標(biāo)左鍵拖動源對象，當(dāng)移動鼠標(biāo)時源對象會跟隨鼠標(biāo)指針移動，如果源對象進(jìn)入了目標(biāo)對象，就松開鼠標(biāo)左鍵讓源對象放置在目標(biāo)對象中。2.4.1拖曳的概念2.4.1拖曳的概念源對象：表示被拖動的元素。為元素添加draggable屬性可以設(shè)置此元素為源對象，示例代碼如下。<p

draggable="true"></p><p>標(biāo)簽的draggable屬性的值為true，表示<p>標(biāo)簽是一個可以被鼠標(biāo)拖曳的源對象。需要注意的是，圖片和鏈接默認(rèn)是可以拖動的，它們不用添加

draggable屬性，就可以進(jìn)行拖曳。2.4.1拖曳的概念目標(biāo)對象：源對象進(jìn)入的元素稱作目標(biāo)對象