HTML5+CSS3+JavaScript網(wǎng)頁開發(fā)實(shí)戰(zhàn) 課件 模塊10、11 移動(dòng)端網(wǎng)頁設(shè)計(jì)、網(wǎng)頁交互功能設(shè)計(jì)_第1頁
HTML5+CSS3+JavaScript網(wǎng)頁開發(fā)實(shí)戰(zhàn) 課件 模塊10、11 移動(dòng)端網(wǎng)頁設(shè)計(jì)、網(wǎng)頁交互功能設(shè)計(jì)_第2頁
HTML5+CSS3+JavaScript網(wǎng)頁開發(fā)實(shí)戰(zhàn) 課件 模塊10、11 移動(dòng)端網(wǎng)頁設(shè)計(jì)、網(wǎng)頁交互功能設(shè)計(jì)_第3頁
HTML5+CSS3+JavaScript網(wǎng)頁開發(fā)實(shí)戰(zhàn) 課件 模塊10、11 移動(dòng)端網(wǎng)頁設(shè)計(jì)、網(wǎng)頁交互功能設(shè)計(jì)_第4頁
HTML5+CSS3+JavaScript網(wǎng)頁開發(fā)實(shí)戰(zhàn) 課件 模塊10、11 移動(dòng)端網(wǎng)頁設(shè)計(jì)、網(wǎng)頁交互功能設(shè)計(jì)_第5頁
已閱讀5頁，還剩65頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

模塊10移動(dòng)端網(wǎng)頁設(shè)計(jì)本模塊主要介紹視口、相對(duì)長(zhǎng)度單位、flex布局等移動(dòng)端開發(fā)內(nèi)容，并根據(jù)所學(xué)內(nèi)容進(jìn)行移動(dòng)端網(wǎng)頁設(shè)計(jì)。掌握視口和視口的設(shè)置方法；掌握CSS3中常見相對(duì)長(zhǎng)度單位的使用；掌握flex布局的方式。移動(dòng)端宣傳頁設(shè)計(jì)任務(wù)1任務(wù)概述本任務(wù)主要通過對(duì)視口和相對(duì)長(zhǎng)度單位的講解，幫助讀者了解移動(dòng)端網(wǎng)站開發(fā)中的視口設(shè)置方法和布局技巧，并能夠進(jìn)行簡(jiǎn)單移動(dòng)端宣傳頁設(shè)計(jì)。任務(wù)1移動(dòng)端宣傳頁設(shè)計(jì)1.1視口視口（Viewport）是移動(dòng)端網(wǎng)站開發(fā)中一個(gè)非常重要的概念，其目的是讓手機(jī)屏幕盡可能完整地顯示整個(gè)網(wǎng)頁。無論網(wǎng)頁原始的分辨率尺寸有多大，開發(fā)者通過設(shè)置視口都能將其縮小顯示在手機(jī)瀏覽器上，這樣保證網(wǎng)頁在手機(jī)上看起來更像在桌面瀏覽器中的樣子。視口，簡(jiǎn)單來說就是瀏覽器顯示頁面內(nèi)容的屏幕區(qū)域。移動(dòng)端瀏覽器中存在3種視口，分別是布局視口（LayoutViewport）、視覺視口（VisualViewport）和理想視口（IdealViewport）。1.1視口1．布局視口布局視口可以被看作網(wǎng)頁的實(shí)際寬高區(qū)域，一般移動(dòng)端瀏覽器都默認(rèn)設(shè)置了布局視口的寬度。根據(jù)設(shè)備的不同，布局視口的默認(rèn)寬度可能是768px、980px、1024px等。2．視覺視口視覺視口可以被看作瀏覽器可視窗口的寬高區(qū)域。PC端瀏覽器可視窗口支持隨意改變大小，用戶可以直觀地看到視覺視口的變化。而移動(dòng)端一般是不支持改變?yōu)g覽器寬高的，所以視覺視口就是其屏幕大小。視覺視口與布局視口如圖所示。視覺視口與布局視口IP地址1.1視口3．理想視口理想視口是指相對(duì)設(shè)備而言最理想的視口尺寸。采用理想視口可以使網(wǎng)頁在移動(dòng)端瀏覽器上獲得最佳的瀏覽和閱讀的寬度。在采用理想視口的情況下，布局視口的寬度和屏幕寬度是一致的，這樣就不需要左右滾動(dòng)頁面了。在移動(dòng)端網(wǎng)站的開發(fā)過程中，為了實(shí)現(xiàn)理想視口，需要給移動(dòng)端網(wǎng)頁添加標(biāo)簽配置視口，通知瀏覽器來進(jìn)行處理，如圖所示。理想視口1.1視口4．視口設(shè)置在移動(dòng)端網(wǎng)頁中，可以通過<meta>標(biāo)簽進(jìn)行視口設(shè)置。具體代碼如下：<metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>在以下示例代碼中，如果未進(jìn)行視口設(shè)置，則瀏覽器顯示效果如下圖所示。在進(jìn)行視口設(shè)置后，布局視口和設(shè)備的寬度一致，實(shí)現(xiàn)了理想視口的設(shè)置，瀏覽器顯示效果如圖所示。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge">

<!--視口設(shè)置--><metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/><title>北京介紹</title></head><body><imgsrc="bj.jpg"alt="北京"width="330"height="250"><p>北京地處中國(guó)北部，是中國(guó)的首都。</p></body></html>未設(shè)置視口效果已設(shè)置視口效果域名1.2相對(duì)長(zhǎng)度單位在傳統(tǒng)的網(wǎng)站開發(fā)項(xiàng)目中，常用的單位有像素（px）、百分比（%）等，它們可以適用于大部分的PC端網(wǎng)站開發(fā)項(xiàng)目，且擁有良好的兼容性。從CSS3開始，瀏覽器對(duì)邏輯單位的支持得到了提升，新增了vw、vh、vmax、vmin、rem等相對(duì)長(zhǎng)度單位。利用這些新的單位能夠開發(fā)出良好的響應(yīng)式頁面，適用于多種不同分辨率的移動(dòng)端設(shè)備。下面我們一起來認(rèn)識(shí)CSS3中這些相對(duì)長(zhǎng)度單位。1.2相對(duì)長(zhǎng)度單位1．視口單位vw、vh、vmin、vmax是一種視口單位，也是相對(duì)單位。它們的大小是由視口（Viewport）決定的，其描述如下表所示。視口單位描述vwvw即視口寬度（ViewportWidth）。1vw相當(dāng)于視口寬度的1%vhvh即視口高度（ViewportHeight）。1vh相當(dāng)于視口高度的1%vmin當(dāng)前vw和vh中較小的值vmax當(dāng)前vw和vh中較大的值例如：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>視口單位</title><style>.box{width:30vw;height:20vh;background:skyblue;}</style></head><body><divclass="box"></div></body></html>響應(yīng)式工具使用示意圖視口單位隨橫豎屏進(jìn)行轉(zhuǎn)換HTTP與HTTPS2．remrem是一個(gè)相對(duì)單位，常用于響應(yīng)式頁面。1rem等于根節(jié)點(diǎn)（html節(jié)點(diǎn)）的font-size值。因?yàn)镃hrome等WebKit內(nèi)核瀏覽器的根節(jié)點(diǎn)文字大小默認(rèn)為16px，所以1rem的默認(rèn)大小為16px。例如：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>rem</title><style>html{font-size:100px;}.box{width:1rem;height:1rem;background:red;}</style></head><body><divclass="box"></div></body></html>rem單位設(shè)置效果1.2相對(duì)長(zhǎng)度單位1.2相對(duì)長(zhǎng)度單位3．媒體查詢媒體查詢提供了一種應(yīng)用CSS的規(guī)則和方法。當(dāng)瀏覽器和設(shè)備的環(huán)境與指定的規(guī)則相匹配時(shí)，規(guī)則下的CSS才會(huì)被應(yīng)用。媒體查詢的基礎(chǔ)語法格式如下：<style>@mediamedia-typeand(media-rule){

/*符合條件時(shí)，被應(yīng)用的CSS樣式*/}</style>其中，media-type為媒體類型，具體包括：lall（用于所有媒體類型設(shè)備）lprint（用于所有媒體類型設(shè)備）lscreen（用于所有媒體類型設(shè)備）lspeech（用于大聲“讀出”頁面的屏幕閱讀器）media-rule是一個(gè)媒體表達(dá)式，它包含CSS生效所需的規(guī)則。例如，通過以下媒體查詢代碼實(shí)現(xiàn)兩種尺寸屏幕的響應(yīng)式布局：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>狗狗</title><style>@mediascreenand(min-width:320px){

/*當(dāng)設(shè)備尺寸大于或等于320px時(shí)，根節(jié)點(diǎn)文字大小為100px*/html{font-size:100px;}}@mediascreenand(min-width:640px){

/*當(dāng)設(shè)備尺寸大于或等于320px時(shí)，根節(jié)點(diǎn)文字大小為200px*/html{font-size:200px;}}

/*設(shè)置圖像寬度和高度為1rem*/img{width:1rem;height:1rem;}</style></head><body><imgsrc="dog.svg"alt="狗狗"></body></html>響應(yīng)式頁面的布局任務(wù)1移動(dòng)端宣傳頁設(shè)計(jì)1.3任務(wù)實(shí)施vw單位和rem單位都能夠?qū)崿F(xiàn)頁面的響應(yīng)式布局，這兩種布局方案各有利弊。在通過rem單位進(jìn)行頁面的響應(yīng)式布局時(shí)，需要和根節(jié)點(diǎn)的font-size值強(qiáng)耦合，當(dāng)系統(tǒng)字體被放大或縮小時(shí)，可能會(huì)導(dǎo)致布局錯(cuò)亂。在通過vw單位進(jìn)行頁面的響應(yīng)式布局時(shí)，需要考慮一定的兼容性問題，只有iOS8、Android4.4及以上版本才能完全支持。所以，響應(yīng)式頁面實(shí)現(xiàn)方案的選擇還需要根據(jù)項(xiàng)目實(shí)際情況來確定。本任務(wù)中將以vw單位進(jìn)行移動(dòng)端宣傳頁的響應(yīng)式布局設(shè)計(jì)，效果如圖所示。移動(dòng)端宣傳頁效果任務(wù)2移動(dòng)端首頁設(shè)計(jì)1.4任務(wù)拓展請(qǐng)讀者根據(jù)所學(xué)內(nèi)容，在本任務(wù)基礎(chǔ)上完成廣告欄切換效果設(shè)計(jì)。任務(wù)2移動(dòng)端宣傳頁設(shè)計(jì)任務(wù)概述flex布局是一種當(dāng)頁面需要適應(yīng)不同的屏幕大小及設(shè)備類型時(shí)確保元素?fù)碛星‘?dāng)行為的布局方式。對(duì)于響應(yīng)式頁面，flex布局能夠更加方便地實(shí)現(xiàn)頁面元素的排布和動(dòng)態(tài)尺寸響應(yīng)。本任務(wù)主要介紹flex布局的使用技巧，并通過flex布局設(shè)計(jì)移動(dòng)端首頁。任務(wù)2移動(dòng)端宣傳頁設(shè)計(jì)2.1flex布局1．基本概念flex是flexiblebox的縮寫，意為“彈性布局”。如果需要進(jìn)行flex布局，則可以直接在元素的樣式上使用如下代碼：display:flex;使用flex布局的元素，稱為flex容器（flexcontainer），它的所有子元素稱為flex項(xiàng)目（flexitem）。flex容器默認(rèn)存在兩根軸，即主軸和交叉軸，默認(rèn)主軸為水平方向的，交叉軸為豎直方向的，flex項(xiàng)目沿著主軸的方向進(jìn)行排列，如圖所示：flex容器2．flex容器屬性flex容器屬性主要包括flex-direction、justify-content、align-items、flex-wrap、align-content、flex-flow等。這些屬性被設(shè)置在flex容器上，下面將對(duì)flex容器屬性的使用方法進(jìn)行具體介紹。（1）flex-direction屬性。flex-direction屬性決定了主軸的方向。該屬性擁有如下4個(gè)取值：flex-direction:row|row-reverse|column|column-reverse;flex-direction屬性效果（2）justify-content屬性。justify-content屬性定義了項(xiàng)目在主軸上的對(duì)齊方式。justify-content:flex-start|flex-end|center|space-between|space-around;justify-content屬性效果2.1flex布局（3）align-items屬性。align-items屬性定義了項(xiàng)目在交叉軸上的對(duì)齊方式。其使用方法如下，取值如下表所示。align-items:flex-start|flex-end|center|baseline|stretch;值描述flex-start元素向交叉軸起點(diǎn)對(duì)齊flex-end元素向交叉軸終點(diǎn)對(duì)齊center元素在交叉軸居中對(duì)齊。如果元素在交叉軸上的高度大于其容器高度，則在兩個(gè)方向上溢出距離相同baseline所有元素向基線對(duì)齊stretch如果元素未設(shè)置高度或?qū)挾?，將?huì)在交叉軸方向被拉伸到與flex容器相同的高度或?qū)挾龋J(rèn)值）align-items屬性效果align-items屬性效果2.1flex布局（4）flex-wrap屬性。flex-wrap屬性用于指定flex項(xiàng)目采用單行顯示還是多行顯示，其使用方法如下，取值如下表所示。flex-wrap:nowrap|wrap|wrap-reverse;值描述nowrapflex項(xiàng)目被擺放到一行中，當(dāng)flex容器寬度不足時(shí)，將壓縮flex項(xiàng)目的寬度wrapflex項(xiàng)目被打斷到多行中wrap-reverseflex項(xiàng)目被打斷到多行中，以反方向排列flex-wrap屬性效果flex-wrap屬性的取值2.1flex布局（5）align-content屬性。align-content屬性定義了存在多根軸線時(shí)元素的對(duì)齊方式。如果僅存在一根軸線，則該屬性不起作用。其使用方法如下，取值如表所示。align-content:flex-start|flex-end|center|space-between|space-around|space-evenly|stretch;值描述flex-start所有行從交叉軸起點(diǎn)開始排列flex-end所有行從交叉軸末尾開始排列center所有行朝向容器的中心排列space-between所有行在容器中平均分布。相鄰兩行間距相等。容器的交叉軸起始線和終止線分別與第一行和最后一行的邊對(duì)齊space-around所有行在容器中平均分布，相鄰兩行間距相等。容器的交叉軸起始線與第一行，以及終止線與最后一行的距離是相鄰兩行間距的一半space-evenly所有行沿交叉軸均勻分布在對(duì)齊容器內(nèi)。相鄰行之間的間距，起始線和第一行，以及終止線和最后一行的距離都是完全相等的stretch拉伸所有行來填滿剩余空間。將剩余空間平均地分配給每一行align-content屬性的取值align-content屬性效果2.1flex布局（6）flex-flow屬性。flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫形式，默認(rèn)值為row和nowrap。flex-flow:<flex-direction>||<flex-wrap>;任務(wù)2移動(dòng)端宣傳頁設(shè)計(jì)2.2任務(wù)實(shí)施前文說過，使用flex布局的元素?fù)碛袕?qiáng)大的空間分布和對(duì)齊能力,能夠更加方便地實(shí)現(xiàn)頁面元素的排版布局。本任務(wù)主要完成移動(dòng)端首頁設(shè)計(jì)，效果如圖所示。（1）在html文件夾中新建index_mobile.html文件，在css文件夾中新建index_m.css文件，用于設(shè)計(jì)移動(dòng)端首頁。（2）在index_mobile.html文件中引入reset.css文件和index_m.css文件，并對(duì)頁面視口和網(wǎng)頁字體進(jìn)行設(shè)置。（3）在index_mobile.html文件中通過<header>標(biāo)簽布局頂部欄，在index_m.css文件中使用flex容器屬性進(jìn)行樣式設(shè)置。（4）移動(dòng)端廣告欄的設(shè)計(jì)與PC端基本相同，只需將圖10-18中的模塊內(nèi)容移除（因?yàn)樵撃K內(nèi)容不符合移動(dòng)端用戶的使用習(xí)慣），并將樣式表中的px單位轉(zhuǎn)換為vw單位即可。（移動(dòng)端頁面的廣告圖使用3張經(jīng)過壓縮的圖片，即m_banner_0.png、m_banner_1.png、m_banner_2.png以減少移動(dòng)端資源流量的消耗。）。2.2任務(wù)實(shí)施（5）導(dǎo)航欄的圖標(biāo)可以通過阿里巴巴矢量圖標(biāo)庫(kù)進(jìn)行選擇和下載，讀者可以根據(jù)自己的審美和喜好選擇相應(yīng)的主題圖標(biāo)，如圖所示，并將下載的SVG圖標(biāo)放置在img文件夾中。阿里巴巴矢量圖標(biāo)（6）通過<nav>標(biāo)簽和無序列表布局導(dǎo)航圖標(biāo)，并使用flex容器屬性進(jìn)行樣式設(shè)置。（7）通過<main>標(biāo)簽布局網(wǎng)頁主體部分，由于主體部分的結(jié)構(gòu)布局和PC端相同，因此可直接復(fù)用。而對(duì)于樣式部分，需要將px單位轉(zhuǎn)換為vw單位以實(shí)現(xiàn)響應(yīng)式布局，同時(shí)去除所有hover偽類樣式，這是因?yàn)橐苿?dòng)端沒有鼠標(biāo)指針懸停的概念。（8）通過<footer>標(biāo)簽布局底部欄。任務(wù)2移動(dòng)端宣傳頁設(shè)計(jì)2.3任務(wù)拓展使用移動(dòng)端響應(yīng)式布局相關(guān)知識(shí)，完成移動(dòng)端頂部欄效果，如圖所示。模塊11網(wǎng)頁交互功能設(shè)計(jì)本模塊主要介紹JavaScript的基本語法和DOM對(duì)象操作，并利用JavaScript實(shí)現(xiàn)網(wǎng)頁輪播圖的手動(dòng)切換廣告圖和自動(dòng)切換廣告圖功能。JavaScript入門任務(wù)1任務(wù)概述水仙花數(shù)是指一個(gè)三位數(shù)，它的每個(gè)數(shù)位上的數(shù)字的3次冪之和等于它本身（例如：13+53+33=153）。本任務(wù)要求在控制臺(tái)中輸出100～999范圍內(nèi)的水仙花數(shù)，并通過該任務(wù)的實(shí)施熟悉并掌握J(rèn)avaScript基本語法。任務(wù)1JavaScript入門JavaScript入門JavaScript是一種具有函數(shù)優(yōu)先的輕量級(jí)、解釋型、即時(shí)編譯型的編程語言，它作為開發(fā)Web頁面的腳本語言而聞名。JavaScript在1995年由Netscape公司的BrendanEich在網(wǎng)景導(dǎo)航者瀏覽器上首次設(shè)計(jì)實(shí)現(xiàn)而成。因?yàn)镹etscape公司與Sun公司合作，Netscape管理層希望其外觀看起來像Java，所以將其取名為JavaScript。JavaScript的標(biāo)準(zhǔn)是ECMAScript。2015年6月17日，ECMA國(guó)際組織發(fā)布了ECMAScript的第六版，該版本正式名稱為ECMAScript2015，但通常被稱為ECMAScript6或ES2015。1.1JavaScript代碼引入方式在網(wǎng)頁中引入JavaScript有3種常見方式，分別是外部引入、內(nèi)部引入和行內(nèi)引入。1．外部引入外部引入指的是將JavaScript程序單獨(dú)寫為一個(gè)擴(kuò)展名為js的文件，并在HTML文件的head部分通過一個(gè)語句進(jìn)行導(dǎo)入。其中，src屬性的值是JavaScript文件的完整相對(duì)路徑。<scripttype="text/javascript"src="路徑/文件名.js"></script>2．內(nèi)部引入內(nèi)部引入指的是在HTML文件的head部分單獨(dú)劃分區(qū)域來書寫JavaScript代碼，且書寫在<script>和</script>標(biāo)簽之間。<scripttype="text/javascript">內(nèi)部JavaScript代碼</script>3．行內(nèi)引入行內(nèi)引入指的是在HTML代碼中嵌入JavaScript代碼。嵌入的代碼必須以“JavaScript:”開頭。<inputtype="button"value="行內(nèi)引入方式"onclick="JavaScript:alert('我是行內(nèi)引入方式');">1.2JavaScript的輸出JavaScript的輸出可用于頁面彈窗警告、頁面寫入、控制臺(tái)交互測(cè)試等，JavaScript的常用輸出有如下幾種方式。1．調(diào)用window.alert()方法彈出警告框調(diào)用window對(duì)象的alert()方法可以彈出警告框。例如，書寫代碼“window.alert("請(qǐng)先登錄后操作！")”，運(yùn)行網(wǎng)頁，彈出警告框，效果如圖所示。警告框效果2．調(diào)用document.write()方法將內(nèi)容寫入HTML文件調(diào)用document對(duì)象的write()方法，可以將內(nèi)容嵌入HTML代碼中進(jìn)行輸出。例如，書寫代碼“document.write("請(qǐng)先注冊(cè)后登錄！")”，運(yùn)行網(wǎng)頁，網(wǎng)頁文件中就會(huì)出現(xiàn)“請(qǐng)先注冊(cè)后登錄！”文字內(nèi)容。3．調(diào)用console.log()方法將內(nèi)容寫入瀏覽器的控制臺(tái)調(diào)用console對(duì)象的log()方法可以將內(nèi)容寫入瀏覽器的控制臺(tái)，通?？梢允褂眠@種方法進(jìn)行程序調(diào)試輸出。在瀏覽器中使用快捷鍵“F12”啟用調(diào)試模式，在調(diào)試窗口中選擇“控制臺(tái)”菜單就能看到調(diào)試輸出信息。例如，書寫代碼“console.log("調(diào)試信息")”，效果如圖所示。調(diào)試信息效果1.3常量和變量1．常量常量可以被理解為一直不變的量，如圓周率。常量在被定義并賦初值后，在腳本的其他任何地方都不能改變。常量的定義語法格式如下：constname1=value1[,name2=value2[,...[,nameN=valueN]]];其中，nameN表示常量名稱，可以是任意合法的標(biāo)識(shí)符；valueN表示常量值，可以是任意合法的表達(dá)式。使用const定義常量“圓周率”的示例代碼如下：constPI=3.14;（1）var變量。使用var命令定義的變量為var變量，無論在何處定義var變量，都在執(zhí)行任何代碼之前進(jìn)行處理。使用var命令定義的變量的作用域是其當(dāng)前的執(zhí)行上下文，該變量可以是嵌套的函數(shù)，對(duì)于定義在任何函數(shù)外的變量來說是全局的。使用var命令定義變量的語法格式如下：1.3常量和變量varvarname1[=value1][,varname2[=value2]...[,varnameN[=valueN]]];其中，varnameN表示變量名，可以為任何合法標(biāo)識(shí)符；valueN表示變量的初始化值，可以是任何合法的表達(dá)式，默認(rèn)值為undefined。使用var命令定義變量的示例代碼如下：vara=[];for(vari=0;i<10;i++){a[i]=function(){console.log(i);};}a[6]();（2）let變量。ES6新增了let命令，用來定義變量。與使用var命令定義的變量不同的是，使用var命令定義的是全局變量，而使用let命令定義的變量是塊作用域的變量。將上面的示例改為使用let命令定義的變量，結(jié)果完全不同，代碼如下：vara=[];for(leti=0;i<10;i++){a[i]=function(){console.log(i);};}a[6]();

transition屬性是一個(gè)簡(jiǎn)寫屬性，用于設(shè)置以下4個(gè)過渡屬性：transition-property、transition-duration、transition-timing-function、transition-delay，且書寫順序不能有誤。transition屬性可以設(shè)置多組過渡屬性，每組過渡屬性之間使用逗號(hào)分隔。例如：1.1.5transition屬性<style>.box{width:100px;height:100px;background:coral;}.box:hover{width:200px;height:200px;transition:width2slinear,height3sease-in-out1s;}</style><divclass="box"></div>

數(shù)據(jù)類型分為基本數(shù)據(jù)類型和引用數(shù)據(jù)類型?；緮?shù)據(jù)類型包含數(shù)值型、字符串型、布爾型、null類型和undefined類型。1.4數(shù)據(jù)類型1．?dāng)?shù)值型數(shù)值型可分為整型和浮點(diǎn)型。整型可以使用十進(jìn)制、八進(jìn)制和十六進(jìn)制，例如：letage=18;//十進(jìn)制letage=018;//八進(jìn)制Letage=0x15;//十六進(jìn)制浮點(diǎn)型可以帶小數(shù)點(diǎn)，分為標(biāo)準(zhǔn)格式和科學(xué)記數(shù)法格式，例如：letnum1=18.1;//標(biāo)準(zhǔn)格式letnum2=1.5E3;//科學(xué)記數(shù)法格式2．字符串型字符串型可以用來表示文本數(shù)據(jù)，如學(xué)生姓名、興趣愛好等。在JavaScript中，需要使用單引號(hào)或雙引號(hào)將字符串型數(shù)據(jù)包裹起來。例如：letmsg='我愛你，中國(guó)！';lethobby="運(yùn)動(dòng)促進(jìn)大腦發(fā)育";letmsg1="我們都有一個(gè)家，名字叫'中國(guó)'"3．布爾型布爾型只有兩個(gè)值，分別為true和false。布爾型變量通常用于判斷語句，作為判斷條件來決定程序的執(zhí)行流程。4．null類型null類型是一個(gè)特殊類型，表示變量不指向任何對(duì)象。需要注意的是，JavaScript的空類型只能使用全小寫形式的null。5．undefined類型undefined類型的變量表示這個(gè)變量已經(jīng)被定義但是還沒有被賦值。因?yàn)镴avaScript在定義變量時(shí)并沒有要求指定變量類型，只有在為變量賦值時(shí)才能確定變量類型，所以沒有被賦值的變量是無法判斷數(shù)據(jù)類型的。例如，下面代碼定義的變量msg并沒有被賦值，如果要輸出該變量類型，將輸出undefined類型。letmsgconsole.log(typeof(msg))1.4數(shù)據(jù)類型HTML1.5運(yùn)算符運(yùn)算符是指能完成一系列計(jì)算操作的符號(hào)。運(yùn)算符可分為算術(shù)運(yùn)算符、比較運(yùn)算符、賦值運(yùn)算符和邏輯運(yùn)算符。1．算術(shù)運(yùn)算符算術(shù)運(yùn)算符主要用于加減乘除等算術(shù)運(yùn)算。常見的算術(shù)運(yùn)算符如表11-1所示。運(yùn)算符描述示例+如果兩個(gè)操作數(shù)是數(shù)字，就將兩個(gè)數(shù)字相加；如果操作數(shù)中有一個(gè)是字符串，就對(duì)兩個(gè)操作數(shù)執(zhí)行拼接操作3+5//8"result="+5//result=5-相減操作8-2//6*乘法操作3*5//15/除法操作8/2//4%取模運(yùn)算9%2//1++放在操作數(shù)之后，先引用后自增放在操作數(shù)之前，先自增后引用x=1;y=x++x=1;y=++x--放在操作數(shù)之后，先引用后自減放在操作數(shù)之前，先自減后引用x=2;y=x--//y=2x=1X=2;y=--x//y=1x=12．比較運(yùn)算符比較運(yùn)算符可以對(duì)兩個(gè)操作數(shù)進(jìn)行比較，比較的結(jié)果為布爾型值。常見的比較運(yùn)算符如表所示。運(yùn)算符描述示例<小于3<5//true<=小于或等于3<=8//true>大于5>2//true>=大于或等于5>=3//true==若值相等，則返回true，否則返回false"3"==3//true!=若值不相等，則返回true，否則返回false"3"!=3//false===若值和數(shù)據(jù)類型同時(shí)相等，則返回true，否則返回false"3"===3//false!==若值和數(shù)據(jù)類型中有一個(gè)不等，則返回true，否則返回false"3"!==3//true1.5運(yùn)算符3．賦值運(yùn)算符賦值運(yùn)算符可以用于為變量和常量賦值。常見的賦值運(yùn)算符如表所示。運(yùn)算符描述示例=將右邊表達(dá)式的值賦給左邊的變量a=3+=將左邊變量加上右邊表達(dá)式的值賦給左邊的變量a+=3//a=a+3-=將左邊變量減去右邊表達(dá)式的值賦給左邊的變量a-=b//a=a-b*=將左邊變量乘以右邊表達(dá)式的值賦給左邊的變量a*=2/=將左邊變量除以右邊表達(dá)式的值賦給左邊的變量a/=2//a=a/2%=將左邊變量除以右邊表達(dá)式后取余數(shù)的值賦給左邊的變量a%=2//a=a%24．邏輯運(yùn)算符邏輯運(yùn)算符通常用于多重判斷條件的構(gòu)造。常見的邏輯運(yùn)算符如表所示。運(yùn)算符描述示例&&邏輯與。當(dāng)兩個(gè)操作數(shù)均為true時(shí)，結(jié)果為true，否則為false3===3&&5==5//true||邏輯或。當(dāng)有一個(gè)操作數(shù)為true時(shí)，結(jié)果為true，否則為false3==3||3==5//true！邏輯非。操作數(shù)的值取反!3===5//true1.6流程控制語句在沒有書寫流程控制語句的情況下，程序的代碼是按照從上到下的順序執(zhí)行的。但是在現(xiàn)實(shí)生活中，人們?cè)谧鲆患虑榈臅r(shí)候，需要有很多先決條件。例如，在過馬路時(shí)，需要耐心等待綠燈亮起。在很多情況下，人們要達(dá)到既定的目標(biāo)，需要多次實(shí)施任務(wù)，不斷完善，精益求精，這時(shí)通常不能使用簡(jiǎn)單的順序結(jié)構(gòu)。下面主要介紹條件分支結(jié)構(gòu)、循環(huán)結(jié)構(gòu)。1.6流程控制語句1．條件分支結(jié)構(gòu)條件分支結(jié)構(gòu)可以根據(jù)不同的條件，選擇執(zhí)行不同的代碼塊。常見的條件分支結(jié)構(gòu)主要有單分支結(jié)構(gòu)、雙分支結(jié)構(gòu)和多分支結(jié)構(gòu)。（1）單分支結(jié)構(gòu)。單分支結(jié)構(gòu)是指如果滿足某種條件，則執(zhí)行語句塊，否則跳過語句塊繼續(xù)往下執(zhí)行。其語法格式如下：

if(條件)

語句塊;單分支結(jié)構(gòu)的程序流程如圖所示。單分支結(jié)構(gòu)的程序流程leta,abs;if(a>=0)abs=a;示例代碼如下：（2）雙分支結(jié)構(gòu)。雙分支結(jié)構(gòu)是指如果滿足某種條件，則進(jìn)行某種處理，否則進(jìn)行另一種處理。其語法格式如下：if(判斷條件){

執(zhí)行語句1...}else{

執(zhí)行語句2...}雙分支結(jié)構(gòu)的程序流程示例代碼如下：leta,abs;if(a>=0)abs=a;elseabs=-a;1.6流程控制語句（3）多分支結(jié)構(gòu)。多分支結(jié)構(gòu)可以根據(jù)多個(gè)不同的條件進(jìn)行不同的處理。其語法格式如下：if(判斷條件1){

執(zhí)行語句1}elseif(判斷條件2){

執(zhí)行語句2}...elseif(判斷條件n){

執(zhí)行語句n}else{

執(zhí)行語句n+1}多分支結(jié)構(gòu)的程序流程（4）switch多分支結(jié)構(gòu)。switch多分支結(jié)構(gòu)由一個(gè)switch控制表達(dá)式和多個(gè)case關(guān)鍵字組成。與if條件語句不同的是，switch多分支結(jié)構(gòu)的控制表達(dá)式的結(jié)果類型只能是byte、short、char、int、String等類型，而不能是boolean類型。語法結(jié)構(gòu)如下：switch(控制表達(dá)式){case目標(biāo)值1:

執(zhí)行語句1break;case目標(biāo)值2:

執(zhí)行語句2break;

．．．case目標(biāo)值n:

執(zhí)行語句nbreak;default:

執(zhí)行語句n+1break;}1.6流程控制語句2．循環(huán)結(jié)構(gòu)循環(huán)結(jié)構(gòu)是指根據(jù)條件重復(fù)執(zhí)行代碼塊。常用的循環(huán)結(jié)構(gòu)有while循環(huán)、do…while循環(huán)和for循環(huán)。（1）while循環(huán)。while循環(huán)首先判斷循環(huán)條件，如果為真，則執(zhí)行循環(huán)體，否則退出循環(huán)體。其語法格式如下：while(循環(huán)條件){

執(zhí)行語句...}while循環(huán)（模糊）的程序流程（2）do…while循環(huán)。do…while循環(huán)語句也被稱為后測(cè)試循環(huán)語句，它和while循環(huán)語句的功能類似。while循環(huán)會(huì)先判斷條件再執(zhí)行循環(huán)體，而do…while循環(huán)會(huì)無條件先執(zhí)行一次循環(huán)體再判斷條件。其語法格式如下：do{

執(zhí)行語句...}while(循環(huán)條件);do…while循環(huán)的程序流程

do…while循環(huán)的程序流程將前面的while循環(huán)示例改成do…while循環(huán)版本，代碼如下：letn=0;letsum=0;do{n++;sum+=n;}while(n<3)Chrome瀏覽器（3）for循環(huán)。for循環(huán)是最常用的循環(huán)結(jié)構(gòu)，一般用在循環(huán)次數(shù)已知的情況下，通?？梢源鎤hile循環(huán)。其語法格式如下：for（初始化表達(dá)式;循環(huán)條件;操作表達(dá)式）{

執(zhí)行語句塊}for循環(huán)的程序流程將前面的while循環(huán)示例改成for循環(huán)版本，代碼如下：letsum=0;for（letn=0;n<3;n++）{sum+=n;}1.6流程控制語句其它瀏覽器1.6流程控制語句3．循環(huán)嵌套循環(huán)嵌套是指在一個(gè)循環(huán)語句的循環(huán)體中再定義一個(gè)循環(huán)語句的語法結(jié)構(gòu)。在實(shí)際開發(fā)中，最常用的是for循環(huán)嵌套。雙層for循環(huán)嵌套語法格式如下：for(初始化表達(dá)式;循環(huán)條件;操作表達(dá)式){...for(初始化表達(dá)式;循環(huán)條件;操作表達(dá)式){

執(zhí)行語句...}...}在雙層for循環(huán)嵌套中，外層循環(huán)每執(zhí)行一輪，都要執(zhí)行內(nèi)層循環(huán)中的整個(gè)for循環(huán)，之后執(zhí)行外層循環(huán)的第二輪，再執(zhí)行內(nèi)層循環(huán)中的整個(gè)for循環(huán)，以此類推，直至外層循環(huán)的循環(huán)條件不成立，才會(huì)跳出整個(gè)雙層for循環(huán)嵌套。4．跳轉(zhuǎn)語句跳轉(zhuǎn)語句用于實(shí)現(xiàn)循環(huán)語句執(zhí)行過程中程序流程的跳轉(zhuǎn)。跳轉(zhuǎn)語句有break語句和continue語句。（1）break語句。在switch多分支結(jié)構(gòu)和循環(huán)結(jié)構(gòu)語句中都可以使用break語句。當(dāng)它出現(xiàn)在switch多分支結(jié)構(gòu)語句中時(shí)，其作用是終止某個(gè)case分支并跳出switch多分支結(jié)構(gòu)；當(dāng)它出現(xiàn)在循環(huán)結(jié)構(gòu)語句中時(shí)，其作用是跳出當(dāng)前循環(huán)結(jié)構(gòu)語句，執(zhí)行后面的代碼。（2）continue語句。continue語句用于循環(huán)結(jié)構(gòu)語句，作用是終止本次循環(huán)，執(zhí)行下一次循環(huán)。任務(wù)1JavaScript入門本任務(wù)應(yīng)用條件分支結(jié)構(gòu)語句和循環(huán)結(jié)構(gòu)語句在控制臺(tái)中輸出100～999范圍內(nèi)的水仙花數(shù)，輸出結(jié)果如圖所示。水仙花數(shù)的輸出結(jié)果1.7任務(wù)實(shí)施1.7任務(wù)實(shí)施（2）通過循環(huán)語句獲取100～999的每個(gè)數(shù)。for(leti=100;i<1000;i++){}//i表示100～999的每個(gè)數(shù)（3）獲取每個(gè)數(shù)的百位、十位、個(gè)位上的數(shù)值。for(leti=100;i<1000;i++){letnum1=parseInt(i/100);//百位數(shù)值letnum2=parseInt(i%100/10);//十位數(shù)值letnum3=parseInt(i%100%10);//個(gè)位數(shù)值}（4）將每個(gè)數(shù)的百位數(shù)值、十位數(shù)值、個(gè)位數(shù)值的三次冪相加。for(leti=100;i<1000;i++){letnum1=parseInt(i/100);//百位數(shù)值letnum2=parseInt(i%100/10);//十位數(shù)值letnum3=parseInt(i%100%10);//個(gè)位數(shù)值letsum=Math.pow(num1,3)+Math.pow(num2,3)+Math.pow(num3,3)//立方之和}（5）根據(jù)規(guī)則判斷是否是水仙花數(shù)，如果是，則在控制臺(tái)輸出該值；如果不是，則進(jìn)入下一個(gè)數(shù)值的獲取及判斷。for(leti=100;i<1000;i++){letnum1=parseInt(i/100);//百位數(shù)值letnum2=parseInt(i%100/10);//十位數(shù)值letnum3=parseInt(i%100%10);//個(gè)位數(shù)值letsum=Math.pow(num1,3)+Math.pow(num2,3)+Math.pow(num3,3)//立方之和if(sum==i){console.log(i)}}任務(wù)1JavaScript入門1.8任務(wù)拓展斐波那契數(shù)列指的是這樣一個(gè)數(shù)列1,1,2,3,5,8,13,21,34,55,89,144,233，377........這個(gè)數(shù)列從第3項(xiàng)開始，每一項(xiàng)都等于前兩項(xiàng)之和。使用JavaScript語言進(jìn)行程序編寫，在控制臺(tái)輸出斐波那契數(shù)列中的第37個(gè)數(shù)。輪播圖設(shè)計(jì)任務(wù)2任務(wù)概述模塊7中已經(jīng)實(shí)現(xiàn)了企業(yè)官網(wǎng)首頁廣告欄的設(shè)計(jì)。在實(shí)際項(xiàng)目開發(fā)中，廣告圖通常不止1張，開發(fā)者需要將多張廣告圖輪換顯示，這就是所謂的“輪播圖”。本任務(wù)需要求實(shí)現(xiàn)手動(dòng)切換廣告圖和自動(dòng)切換廣告圖功能。任務(wù)2輪播圖設(shè)計(jì)2.1

函數(shù)函數(shù)是指能實(shí)現(xiàn)特定功能的語句塊。使用函數(shù)能增加代碼的重用性。JavaScript中的函數(shù)分為內(nèi)置函數(shù)和自定義函數(shù)兩大類。1．內(nèi)置函數(shù)內(nèi)置函數(shù)是系統(tǒng)已經(jīng)定義好，可以被直接使用的函數(shù)。在JavaScript中，內(nèi)置函數(shù)主要有警告對(duì)話框函數(shù)、確認(rèn)對(duì)話框函數(shù)、提示對(duì)話框函數(shù)、周期執(zhí)行函數(shù)和定時(shí)器函數(shù)等。（1）警告對(duì)話框函數(shù)。使用alert()函數(shù)可以彈出警告對(duì)話框。警告對(duì)話框中只有“確認(rèn)”按鈕。alert()函數(shù)的語法格式如下：alert("警告信息")（2）確認(rèn)對(duì)話框函數(shù)。使用confirm()函數(shù)可以彈出確認(rèn)對(duì)話框。確認(rèn)對(duì)話框中有“確認(rèn)”和“取消”兩個(gè)按鈕。單擊“確認(rèn)”按鈕返回ture，單擊“取消”按鈕返回false。（3）提示對(duì)話框函數(shù)。使用prompt()函數(shù)可以彈出提示對(duì)話框。提示對(duì)話框可以接收用戶通過鍵盤輸入的數(shù)據(jù)。需要注意的是，這里接收的輸入數(shù)據(jù)是字符串型的，如果要進(jìn)行算術(shù)運(yùn)算，則需要先進(jìn)行類型轉(zhuǎn)換。2.1

函數(shù)（4）周期執(zhí)行函數(shù)。使用setInterval()函數(shù)可以實(shí)現(xiàn)每隔一段時(shí)間就重復(fù)執(zhí)行一段代碼。例如，街上的霓虹燈就是每隔一段時(shí)間輪換點(diǎn)亮一盞。setInterval()函數(shù)的語法格式如下：setInterval(func,interval);其中，func表示要重復(fù)調(diào)用的函數(shù)，interval表示每次調(diào)用間隔的毫秒數(shù)。（5）定時(shí)器函數(shù)。使用setTimeout()函數(shù)可以設(shè)置一個(gè)定時(shí)器，該定時(shí)器在指定時(shí)間到期后執(zhí)行一個(gè)函數(shù)或指定的一段代碼。setTimeout()函數(shù)的語法格式如下：setTimeout(fun[,delay]);其中，func表示要執(zhí)行的函數(shù)，delay表示延遲的毫秒數(shù)，默認(rèn)為0。2．自定義函數(shù)自定義函數(shù)是根據(jù)業(yè)務(wù)需求定義的代碼塊，分為匿名函數(shù)和具名函數(shù)。匿名函數(shù)就是沒有名字的函數(shù)，語法格式如下：function(){

alert("加油，中國(guó)！")};（2）具名函數(shù)。具名函數(shù)就是有名字的函數(shù)，可以使用函數(shù)名多次調(diào)用。其語法格式如下：function函數(shù)名([參數(shù)1],[參數(shù)2]...){

函數(shù)體;}2.2DOM對(duì)象操作DOM全稱為DocumentObjectModel，即文檔對(duì)象模型。一個(gè)HTML頁面可以被還原成一棵DOM樹。DOM樹上的每一個(gè)節(jié)點(diǎn)都可以被稱為DOM對(duì)象。下面介紹DOM對(duì)象的查找、增加、修改和刪除操作。1．DOM對(duì)象的查找可以通過DOM對(duì)象的id、name、標(biāo)簽名、類名來查找DOM對(duì)象，具體方法如表所示。方法名描述document.getElementById()根據(jù)元素的id查找元素，因?yàn)閕d值唯一，因此查找出來的也是唯一的一個(gè)節(jié)點(diǎn)document.getElementsByName()根據(jù)給定的name返回一

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論