web前端技術(shù) 課件 模塊４ 網(wǎng)站交互頁面實(shí)現(xiàn)_第1頁
web前端技術(shù) 課件 模塊４ 網(wǎng)站交互頁面實(shí)現(xiàn)_第2頁
web前端技術(shù) 課件 模塊４ 網(wǎng)站交互頁面實(shí)現(xiàn)_第3頁
web前端技術(shù) 課件 模塊４ 網(wǎng)站交互頁面實(shí)現(xiàn)_第4頁
web前端技術(shù) 課件 模塊４ 網(wǎng)站交互頁面實(shí)現(xiàn)_第5頁
已閱讀5頁，還剩167頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

主頁歡迎彈窗效果實(shí)現(xiàn)Web前端技術(shù)延時符CONTENTS目錄01任務(wù)描述03知識點(diǎn)導(dǎo)圖02學(xué)習(xí)目標(biāo)

04相關(guān)知識05任務(wù)實(shí)施延時符任務(wù)描述延時符任務(wù)描述一個友好的網(wǎng)頁，往往能夠?qū)τ脩舻牟僮鬟M(jìn)行合適的交互提示，引導(dǎo)用戶正確的進(jìn)行網(wǎng)頁的使用。在這個任務(wù)中，我們就將使用JavaScript中的彈窗，來引導(dǎo)用戶。效果如圖4-1-1所示。延時符學(xué)習(xí)目標(biāo)延時符學(xué)習(xí)目標(biāo)掌握J(rèn)avaScript常量，變量，數(shù)據(jù)類型等基礎(chǔ)概念；掌握瀏覽器“開發(fā)人員工具”中調(diào)試JavaScript代碼；掌握J(rèn)avaScript中prompt()和alert()的使用方法；掌握J(rèn)avaScript中條件控制語句if的使用方法。知識目標(biāo)能夠根據(jù)要求編寫JavaScript代碼實(shí)現(xiàn)彈窗功能；能夠使用內(nèi)部JavaScript代碼；；技能目標(biāo)延時符培養(yǎng)嚴(yán)謹(jǐn)、精益求精的工作態(tài)度；培養(yǎng)良好的審美觀念；培養(yǎng)團(tuán)隊合作的意識。素養(yǎng)目標(biāo)知識點(diǎn)導(dǎo)圖延時符知識點(diǎn)導(dǎo)圖延時符相關(guān)知識延時符JavaScript簡介JavaScript使用JavaScript變量JavaScript數(shù)據(jù)類型算術(shù)運(yùn)算prompt()if語句JavaScript簡介延時符JavaScript是一種高級的、解釋型的腳本語言，主要用于在頁面上實(shí)現(xiàn)交互功能。與HTML和CSS一起使用，用于創(chuàng)建動態(tài)網(wǎng)頁和網(wǎng)頁應(yīng)用程序。隨著技術(shù)的不斷發(fā)展，JavaScript的應(yīng)用范圍也在不斷擴(kuò)大，成為了web前端開發(fā)的核心技術(shù)之一。JavaScript最初由Netscape公司開發(fā)，最早稱為LiveScript，后來改名為JavaScript。它是一種多范式語言，支持面向?qū)ο缶幊?、函?shù)式編程和基于原型的編程。JavaScript可以在客戶端（瀏覽器）和服務(wù)器端（Node.js）運(yùn)行，使其成為一種非常靈活的語言。它可以用于創(chuàng)建動態(tài)網(wǎng)頁、表單驗(yàn)證、交互式用戶界面、游戲開發(fā)、服務(wù)器端編程等各種用途。通常而言在HTML文件中使用javascript代碼有三種方式：外部JavaScript，內(nèi)部JavaScript和元素內(nèi)嵌JavaScript方式，我們首先需要熟練掌握的是內(nèi)部JavaScript方式。顧名思義，內(nèi)部JavaScript是指HTML代碼和JavaScript代碼放在同一個頁面文件（.html）中。其中，所有JavaScript代碼應(yīng)當(dāng)寫在<script></script>標(biāo)簽對內(nèi)。JavaScript的使用：內(nèi)部使用延時符1.<!--

Demo4_1.html

-->

2.<!DOCTYPE

html>

3.<html>

4.<head>

5.<title>使用內(nèi)部JavaScript</title>

6.<!--

1.在head中使用JavaScript

-->

7.<script>

8.//內(nèi)部JavaScript代碼段1

9.</script>

10.</head>

11.<body>

12.<!--

2.在body中使用JavaScript

-->

13.<script>

14.//內(nèi)部JavaScript代碼段2

15.</script>

16.</body>

17.</html>

JavaScript的使用：數(shù)據(jù)類型延時符在JavaScript中定義了以下5種基礎(chǔ)數(shù)據(jù)類型，數(shù)值型（number)、字符串(string)、布爾值、數(shù)組和對象類型：JavaScript基礎(chǔ)數(shù)據(jù)類型講解Number類型：JavaScript中的數(shù)值型不再區(qū)分整數(shù)和浮點(diǎn)數(shù)，統(tǒng)一用Number表示，01字符串類型：JavaScript中字符串是以單引號’或雙引號”括起來的任意文本02布爾類型：JavaScript中的布爾值類型只有true、false兩種值，可以通過比較、邏輯運(yùn)算計算得出03數(shù)組類型：數(shù)組是一組按順序排列的集合，其中的每個值稱為元素。數(shù)組可以包括任意數(shù)據(jù)類型。04對象類型：JavaScript的對象是一組由鍵-值組成的無序集合，對象的鍵都是字符串類型，值可以是任意數(shù)據(jù)類型。05JavaScript的使用：變量延時符JavaScript中的變量的概念基本上和初中代數(shù)的方程變量是一致的，只是在JavaScript程序中，變量不僅可以是數(shù)字，還可以是任意數(shù)據(jù)類型。（1）變量命名規(guī)則：①

變量名是大小寫英文、數(shù)字、$和_的組合。②變量名是不能以數(shù)字開頭。③變量名也不能是JavaScript的關(guān)鍵字或者保留字。注意：

理論上變量名是可以用中文，但是，請不要這樣做。因?yàn)樵谒械木幊陶Z言說明中，一般都不建議使用非英文字符作為標(biāo)識符，文件名，文件夾名甚至是項(xiàng)目名稱。JavaScript的使用：變量延時符（2）變量賦值：在JavaScript中，使用賦值號“=”對變量進(jìn)行賦值。例如：可以把任意數(shù)據(jù)類型賦值給變量，同一個變量可以反復(fù)賦值，而且可以是不同類型的變量，但是要注意只能用var申明一次，例如：這種變量本身數(shù)據(jù)類型不固定的語言稱之為動態(tài)語言，與之對應(yīng)的是靜態(tài)語言。vara;//申明了變量a，此時a的值為undefinedvar$b=1;//申明了變量$b，同時給$b賦值，此時$b的值為1vars_007='007';//s_007是一個字符串varAnswer=true;//Answer是一個布爾值truevart=null;//t的值是nullvara=123;//a的值是整數(shù)123a='ABC';//a變?yōu)樽址甁avaScript的使用：變量延時符（3）使用控制臺檢查變量：要顯示變量的內(nèi)容，可以用console.log(x)，打開Chrome的控制臺就可以看到結(jié)果。例如：控制臺使用console.log()代替alert()的好處是可以避免彈出煩人的對話框，從而可以避免代碼被阻斷運(yùn)行。varx=10;console.log(x,x+2)//配合ChromeJavaScript的使用：算術(shù)運(yùn)算延時符在JavaScript中Number類型是可以直接進(jìn)行算術(shù)運(yùn)算，除了加減乘除，分別使用+、-、*、/符號之外，還可以進(jìn)行求余運(yùn)算%。1+2;//3(1+2)*5/2;//7.52/0;//Infinity0/0;//NaN10%3;//110.5%3;//1.5JavaScript的使用：alert()和prompt()延時符Javascript中常用使用alert()進(jìn)行信息的彈窗輸出，在之前任務(wù)1-1的學(xué)習(xí)中，我們使用過這個方法。另外，prompt()方法用于顯示可提示用戶進(jìn)行輸入的對話框。而且prompt方法可以返回用戶輸入的字符串。語法如下：Prompt方法有兩個可選參數(shù)，分別是msg和defaultText，msg參數(shù)要在對話框中顯示的純文本（而不是HTML格式的文本）；defaultText參數(shù)作為對話框的默認(rèn)輸入文本。prompt(msg,defaultText)JavaScript的使用：if語句延時符JavaScript使用if語句來進(jìn)行條件判斷，可以實(shí)現(xiàn)分支控制。語法如下：if語句講解if(){...//條件為真}else{...//條件為假}JavaScript的使用：if語句延時符例如，根據(jù)年齡顯示不同內(nèi)容，可以用if語句實(shí)現(xiàn)如下：注意：其中else語句是可選的。如果語句塊只包含一條語句，那么從JavaScript的語法規(guī)定而言，可以省略{}，但是強(qiáng)烈建議保留。1.varage=prompt(“輸入年齡”);2.if(age>=18){//如果age>=18為true，則執(zhí)行if語句塊3.alert('adult');4.}else{//否則執(zhí)行else語句塊5.alert('teenager');6.}任務(wù)實(shí)施延時符任務(wù)分析技術(shù)分析與實(shí)現(xiàn)完成代碼任務(wù)分析延時符初次使用JavaScript代碼實(shí)現(xiàn)頁面交互功能，使用內(nèi)部JavaScript代碼方式，先定義變量，然后使用prompt()彈窗并提示用戶輸入，獲取用戶輸入內(nèi)容傳入變量，根據(jù)變量進(jìn)行判斷，使用alert()彈窗輸出。流程圖如右側(cè)所示：技術(shù)分析與實(shí)現(xiàn)：步驟1延時符步驟1：在html文件head標(biāo)簽中插入<script></script>標(biāo)簽。代碼如下所示：1.<script>2.//實(shí)現(xiàn)功能的JavaScript代碼……3.</script>技術(shù)分析與實(shí)現(xiàn)：步驟2延時符步驟2：定義變量，在這個任務(wù)中需要使用name變量接受輸入輸入框輸入的內(nèi)容。使用str變量設(shè)置警告框信息。雖然在JavaScript語法中并不強(qiáng)制要求變量先定義后使用，但養(yǎng)成先定義的好習(xí)慣對于今后更為復(fù)雜的應(yīng)用環(huán)境下的變量作用域等問題會起到很好的作用，所以在本教材中我們都會對變量進(jìn)行先定義后使用。此處代碼如下：1.<script>

2.//定義變量name和str3.

varname,str;4.</script>

技術(shù)分析與實(shí)現(xiàn)：步驟3延時符步驟3：接收輸入框信息，輸入框方法prompt()是能夠?qū)㈨撁嬗脩舻妮斎胱鳛榉祷刂递斎氲匠绦?，此處使用上面定義的變量name接收。此處代碼如下：1.<script>

2.

varname,str;3.name=prompt("請輸入您的姓名");

4.</script>

技術(shù)分析與實(shí)現(xiàn)：步驟4延時符步驟4：接收輸入框信息，通過if語句判斷用戶輸入信息是否為“user”，如果是將輸出信息字符串變量str賦值為“Welcome！”，否則將str賦值為“NONAME”。此處代碼如下：1.if(name=="user"){

2.

str="Welcome!";

3.

}else{

4.

str="NO

NAME";

5.

}技術(shù)分析與實(shí)現(xiàn)：步驟4延時符步驟5,：警告框輸出信息，使用alert()將上面處理好的輸出信息字符串str進(jìn)行輸出。此處代碼如下：1.1.

alert(str);

任務(wù)實(shí)現(xiàn)講解謝謝觀看！主頁榜單鼠標(biāo)滑過功能實(shí)現(xiàn)Web前端技術(shù)主講老師：***延時符CONTENTS目錄01任務(wù)描述03知識點(diǎn)導(dǎo)圖02學(xué)習(xí)目標(biāo)

04相關(guān)知識05任務(wù)實(shí)施延時符任務(wù)描述延時符任務(wù)描述在頁面瀏覽過程中，常常會遇到鏈接文字或者按鈕的滑動動畫。例如在下面的頁面中鼠標(biāo)滑過歌曲名稱時，對應(yīng)的播放，加入歌曲列表和收藏按鈕就會出現(xiàn)；當(dāng)鼠標(biāo)滑出后，按鈕又會再次隱藏。又比如，當(dāng)鼠標(biāo)滑過播放按鈕時，按鈕也會發(fā)生顏色等變化；當(dāng)鼠標(biāo)滑出后，按鈕又會恢復(fù)到原來的樣式。下面，我們將學(xué)習(xí)如何使用JavaScript相關(guān)知識完成鼠標(biāo)滑過動畫任務(wù)。效果如圖4-2-1所示。延時符學(xué)習(xí)目標(biāo)延時符學(xué)習(xí)目標(biāo)掌握外部使用JavaScript的方法；掌握DOM基礎(chǔ)知識，以及DOM對象獲取和操作HTML元素的方法；掌握J(rèn)avaScript中常用事件的使用方法；知識目標(biāo)能夠根據(jù)要求編寫JavaScript代碼實(shí)現(xiàn)鼠標(biāo)滑過動畫功能；能夠通過DOM對象對html元素進(jìn)行操作；能夠使用外部JavaScript代碼的方法；技能目標(biāo)延時符培養(yǎng)分析問題能力；培養(yǎng)自主學(xué)習(xí)能力；素養(yǎng)目標(biāo)知識點(diǎn)導(dǎo)圖延時符知識點(diǎn)導(dǎo)圖延時符相關(guān)知識延時符外部使用jsfor語句DOM簡介獲取DOM操作DOM元素常用事件通過在前一個任務(wù)的學(xué)習(xí)，我們掌握了內(nèi)部JavaScript代碼的使用方法，由<script>...</script>包含的代碼就是JavaScript代碼，它將直接被瀏覽器執(zhí)行?，F(xiàn)在我們將學(xué)習(xí)第二種JavaScript代碼的使用方法，把JavaScript代碼放到一個單獨(dú)的.js文件，然后在HTML中通過<scriptsrc="..."></script>引入這個文件：JavaScript的使用：外部使用延時符1.<html>

2.<head>

3.

<script

src="js/abc.js"></script>

//使用外部JavaScript文件

abc.js4.</head>

5.<body>

6.

...

7.</body>

8.</html>

注意：每個html文件中可以多次使用<script></script>來使用JavaScript代碼。每對<script></script>只能是內(nèi)部或者外部使用JavaScript，而不能同時內(nèi)部和外部使用。JavaScript的使用：DOM基礎(chǔ)延時符DOM(DocumentObjectModel)譯為文檔對象模型，是HTML和XML文檔的API（應(yīng)用程序編程接口）。其中HTMLDOM定義了訪問和操作HTML文檔的標(biāo)準(zhǔn)方法。DOM的最小組成單位叫做節(jié)點(diǎn)（node）。文檔的樹形結(jié)構(gòu)（DOM樹），就是由各種不同類型的節(jié)點(diǎn)組成。每個節(jié)點(diǎn)可以看作是文檔樹的一片葉子。通過觀察html代碼和對應(yīng)的DOM結(jié)構(gòu)圖，不難發(fā)現(xiàn)每一個html元素就是一個DOM樹形結(jié)構(gòu)中的節(jié)點(diǎn)（DOMNode）。一個文檔的所有節(jié)點(diǎn)，按照所在的層級，可以抽象成一種樹狀結(jié)構(gòu)。這種樹狀結(jié)構(gòu)就是DOM樹。它有一個頂層節(jié)點(diǎn)，下一層都是頂層節(jié)點(diǎn)的子節(jié)點(diǎn)，然后子節(jié)點(diǎn)又有自己的子節(jié)點(diǎn)，就這樣層層衍生出一個金字塔結(jié)構(gòu)，又像一棵樹。1.<html>

2.<head>

3.<title>文檔標(biāo)題</title>

4.</head>

5.<body>

6.<a

href=’’>我的鏈接</a>

7.<h1>我的標(biāo)題</h1>

8.</body>

9.</html>

JavaScript的使用：DOM基礎(chǔ)延時符瀏覽器原生提供document節(jié)點(diǎn)，代表整個文檔。文檔的第一層有兩個節(jié)點(diǎn)，第一個是文檔類型節(jié)點(diǎn)（<!doctypehtml>），第二個是HTML網(wǎng)頁的頂層容器標(biāo)簽<html>。后者構(gòu)成了樹結(jié)構(gòu)的根節(jié)點(diǎn)（rootnode），其他HTML標(biāo)簽節(jié)點(diǎn)都是它的下級節(jié)點(diǎn)。除了根節(jié)點(diǎn)，其他節(jié)點(diǎn)都有三種層級關(guān)系。父節(jié)點(diǎn)關(guān)系（parentNode）：直接的那個上級節(jié)點(diǎn)。子節(jié)點(diǎn)關(guān)系（childNodes）：直接的下級節(jié)點(diǎn)。同級節(jié)點(diǎn)關(guān)系（sibling）：擁有同一個父節(jié)點(diǎn)的節(jié)點(diǎn)。DOM提供操作接口，用來獲取這三種關(guān)系的節(jié)點(diǎn)。比如，子節(jié)點(diǎn)接口包括firstChild（第一個子節(jié)點(diǎn)）和lastChild（最后一個子節(jié)點(diǎn)）等屬性，同級節(jié)點(diǎn)接口包括nextSibling（緊鄰在后的那個同級節(jié)點(diǎn)）和previousSibling（緊鄰在前的那個同級節(jié)點(diǎn)）屬性。在JavaScript中，將通過這些節(jié)點(diǎn)對html元素進(jìn)行各種操作，比如：更新，遍歷，添加和刪除。JavaScript的使用：DOM獲取延時符在操作一個DOM節(jié)點(diǎn)前，我們需要通過各種方法獲取DOM節(jié)點(diǎn)。最常用是獲取單個DOM節(jié)點(diǎn)的方法，比如：document.getElementById()，由于ID屬性值在HTML文檔中的唯一性的，所以document.getElementById()可以直接定位唯一的一個DOM節(jié)點(diǎn)。獲取多個DOM節(jié)點(diǎn)的方法，例如：document.getElementsByTagName()和document.getElementsByClassName()方法返回一組符合要求的DOM節(jié)點(diǎn)。要精確地選擇DOM，可以先定位父節(jié)點(diǎn)，再從父節(jié)點(diǎn)開始選擇，以縮小范圍。1.//

返回ID為'test'的節(jié)點(diǎn)：

2.var

test

=

document.getElementById('test');

3.//

先定位ID為'test-table'的節(jié)點(diǎn)，再返回其內(nèi)部所有tr節(jié)點(diǎn)：

4.var

trs

=

document.getElementById('test-table').getElementsByTagName('tr');

5.//

先定位ID為'test-div'的節(jié)點(diǎn)，再返回其內(nèi)部所有class包含red的節(jié)點(diǎn)：

6.var

reds

=

document.getElementById('test-div').getElementsByClassName('red');

7.//

獲取節(jié)點(diǎn)test下的所有直屬子節(jié)點(diǎn):

8.var

cs

=

test.children;

9.//

獲取節(jié)點(diǎn)test下第一個、最后一個子節(jié)點(diǎn)：

10.var

first

=

test.firstElementChild;

11.var

last

=

test.lastElementChild;

JavaScript的使用：DOM獲取延時符另外，第二類方法是使用querySelector()和querySelectorAll()，需要了解css語法中選擇器(selector)語法，然后使用條件來獲取節(jié)點(diǎn)，更加方便：1.//

通過querySelector獲取ID為q1的節(jié)點(diǎn)：

2.var

q1

=

document.querySelector('#q1');

3.//

通過querySelectorAll獲取q1節(jié)點(diǎn)內(nèi)的符合條件的所有節(jié)點(diǎn)：

4.var

ps

=

q1.querySelectorAll('div.highlighted

>

p');

注意：IE瀏覽器對querySelector的支持比較復(fù)雜，其中低版本的IE<8不支持querySelector和querySelectorAll。IE8有限支持，只支持ID屬性獲取。IE9和更高版本完全支持。JavaScript的使用：DOM操作延時符在獲取DOM節(jié)點(diǎn)后，可以直接修改對應(yīng)元素內(nèi)容，常用方法有兩種：修改節(jié)節(jié)點(diǎn)的innerHTML屬性或者修改節(jié)點(diǎn)的innerText屬性。（1）innerHTML屬性。innerHTML屬性這個方式非常強(qiáng)大，不但可以修改一個DOM節(jié)點(diǎn)的文本內(nèi)容，還可以直接通過HTML片段修改DOM節(jié)點(diǎn)內(nèi)部的子樹。例如：1.//

獲取<p

id="p-id">原來的段落文字</p>

2.var

p

=

document.getElementById('p-id');

3.//

設(shè)置文本為abc:

4.p.innerHTML

=

'修改后的段落文字';

//

<p

id="p-id">修改后的段落文字</p>

5.//

設(shè)置HTML:

6.p.innerHTML

=

'修改后的<span

style="color:red">段落</span>文字';

7.//

<p>...</p>的內(nèi)部結(jié)構(gòu)已修改

上面代碼運(yùn)行結(jié)果如圖4-2-5所示：JavaScript的使用：DOM操作延時符（2）innerText屬性。修改innerText屬性，這樣可以自動對字符串進(jìn)行HTML編碼，保證無法設(shè)置任何HTML標(biāo)簽。1.//

獲取<p

id="p-id">...</p>

2.var

p

=

document.getElementById('p-id');

3.//

設(shè)置文本:

4.p.innerText

=

'<script>alert("Hi")</script>';

5.//

HTML被自動編碼，無法設(shè)置一個<script>節(jié)點(diǎn):

6.//

<p

id="p-id"><script>alert("Hi")</script></p>

JavaScript的使用：常用事件延時符HTMLDOM允許JavaScript對HTML事件作出反應(yīng)。當(dāng)事件發(fā)生時，可以執(zhí)行JavaScript，比如當(dāng)用戶點(diǎn)擊一個HTML元素時。onchange事件。onload和onunload事件。onmouseover和onmouseout事件。onmousedown、onmouseup。onclick事件。JavaScript的使用：事件監(jiān)聽延時符DOM的事件操作（監(jiān)聽和觸發(fā)），都定義在EventTarget接口。所有節(jié)點(diǎn)對象都部署了這個接口，其他一些需要事件通信的瀏覽器內(nèi)置對象（比如，XMLHttpRequest、AudioNode、AudioContext）也部署了這個接口。該接口主要提供三個實(shí)例方法。addEventListener：綁定事件的監(jiān)聽函數(shù)removeEventListener：移除事件的監(jiān)聽函數(shù)JavaScript的使用：事件監(jiān)聽

addEventListener()延時符1.EventTarget.addEventListener()。EventTarget.addEventListener()用于在當(dāng)前節(jié)點(diǎn)或?qū)ο笊?，定義一個特定事件的監(jiān)聽函數(shù)。一旦這個事件發(fā)生，就會執(zhí)行監(jiān)聽函數(shù)。該方法沒有返回值。該方法接受三個參數(shù)。type：事件名稱，大小寫敏感。listener：監(jiān)聽函數(shù)。事件發(fā)生時，會調(diào)用該監(jiān)聽函數(shù)。useCapture：布爾值，表示監(jiān)聽函數(shù)是否在捕獲階段（capture）觸發(fā)（參見后文《事件的傳播》部分），默認(rèn)為false（監(jiān)聽函數(shù)只在冒泡階段被觸發(fā)）。該參數(shù)可選。上面地案例中，button節(jié)點(diǎn)的addEventListener方法綁定click事件的監(jiān)聽函數(shù)hello，該函數(shù)只在冒泡階段觸發(fā)。1.target.addEventListener(type,listener[,useCapture]);

1.functionhello(){2.console.log('Helloworld');3.}4.5.varbutton=document.getElementById('btn');6.button.addEventListener('click',hello,false);

JavaScript的使用：事件監(jiān)聽

removeEventListener())延時符EventTarget.removeEventListener方法用來移除addEventListener方法添加的事件監(jiān)聽函數(shù)。該方法沒有返回值。removeEventListener方法的參數(shù)，與addEventListener方法完全一致。它的第一個參數(shù)“事件類型”，大小寫敏感。注意：removeEventListener方法移除的監(jiān)聽函數(shù)，必須是addEventListener方法添加的那個監(jiān)聽函數(shù)，而且必須在同一個元素節(jié)點(diǎn)，否則無效。target.addEventListener('click',listener,false);target.removeEventListener('click',listener,false);

JavaScript的使用：for語句延時符例如，根據(jù)年齡顯示不同內(nèi)容，可以用if語句實(shí)現(xiàn)如下：注意：其中else語句是可選的。如果語句塊只包含一條語句，那么從JavaScript的語法規(guī)定而言，可以省略{}，但是強(qiáng)烈建議保留。1.varage=prompt(“輸入年齡”);2.if(age>=18){//如果age>=18為true，則執(zhí)行if語句塊3.alert('adult');4.}else{//否則執(zhí)行else語句塊5.alert('teenager');6.}任務(wù)實(shí)施延時符任務(wù)分析技術(shù)分析與實(shí)現(xiàn)完成代碼任務(wù)分析延時符實(shí)現(xiàn)鼠標(biāo)滑動動畫任務(wù)，由于需要在頁面加載時自動運(yùn)行，所以可以使用window對象onload事件。本任務(wù)的實(shí)現(xiàn)，主要在window.onload的事件處理函數(shù)中，通過document.querySelectorAll()獲取所有播放、加入播放列表和收藏按鈕組成的對象。再對每個對象通過addEventListener()進(jìn)行mouseover和mouserout事件監(jiān)聽，每當(dāng)mouseover事件發(fā)生時修改按鈕的背景圖片，每當(dāng)mouseout事件發(fā)生時，按鈕背景圖片還原從而完成任務(wù)要求。window.onload()結(jié)構(gòu)圖如圖4-2-3所示：技術(shù)分析與實(shí)現(xiàn)：步驟1延時符步驟1：獲取按鈕組，需要對所有播放、加入列表和收藏按鈕進(jìn)行操作。因此需要獲取這3組按鈕，代碼如下：1.varplays=document.querySelectorAll('a.play'),2. addtos=document.querySelectorAll('.addto'),3. subscribes=document.querySelectorAll('.subscribe');技術(shù)分析與實(shí)現(xiàn)：步驟2延時符步驟2：按鈕組事件綁定，需要對所有按鈕進(jìn)行事件綁定，因此需要使用for語句幫助實(shí)現(xiàn)。以所有播放按鈕為例代碼如下：1.for(vari=0,len=plays.length;i<len;i++){2. plays[i].addEventListener('mouseover',function(e){3. this.style.backgroundPositionY="-22px";4. })5. plays[i].addEventListener('mouseout',function(e){6. this.style.backgroundPositionY="-2px";7. })8.}謝謝觀看！登錄注冊頁面實(shí)現(xiàn)Web前端技術(shù)主講老師：***延時符CONTENTS目錄01任務(wù)描述03知識點(diǎn)導(dǎo)圖02學(xué)習(xí)目標(biāo)

04相關(guān)知識05任務(wù)實(shí)施延時符任務(wù)描述延時符任務(wù)描述網(wǎng)頁不僅僅可以向用戶展示內(nèi)容，也可以與用戶進(jìn)行交互活動，比如用戶注冊登錄、咨詢問題、選擇商品，提交訂單等，而表單則是實(shí)現(xiàn)這些交互功能的一種標(biāo)簽，它提供多種方式讓用戶輸入數(shù)據(jù)。本任務(wù)中我們將利用表單與相關(guān)標(biāo)簽來設(shè)計登錄注冊窗口，并用JavaScript控制登錄注冊窗口的顯示與關(guān)閉。延時符頁面效果圖延時符學(xué)習(xí)目標(biāo)延時符學(xué)習(xí)目標(biāo)掌握模擬彈出窗口的方法；掌握CSS樣式display:none、display:block與z-index的方法和作用；掌握通過CSS樣式transform居中放置的方法。掌握J(rèn)avaScript獲取選擇器document.querySelector的方法。知識目標(biāo)能夠根據(jù)效果圖完成彈出窗口的設(shè)計；能夠根據(jù)效果圖使用合理標(biāo)簽進(jìn)行登錄/注冊頁面結(jié)構(gòu)搭建；能夠根據(jù)需求靈活選擇各類基礎(chǔ)選擇器進(jìn)行樣式添加；技能目標(biāo)延時符培養(yǎng)嚴(yán)謹(jǐn)、精益求精的工作態(tài)度；培養(yǎng)良好的審美觀念；培養(yǎng)團(tuán)隊合作的意識。素養(yǎng)目標(biāo)知識點(diǎn)導(dǎo)圖延時符知識點(diǎn)導(dǎo)圖延時符相關(guān)知識延時符position:fixedz-indexhref=”javascript:;”document.querySelector()CSS樣式：position:fixed延時符CSS中的position屬性用來設(shè)置元素在頁面中的位置，通過該屬性您可以把任何屬性放置在任何您認(rèn)為合適的位置。position屬性有5個可選值，分別對應(yīng)5種不同的定位方式，前面的章節(jié)已經(jīng)講過static(靜態(tài)定位默認(rèn)值)、relative(相對定位)和absolute(絕對定位)，此處用到了新的屬性——fixed(固定定位)，其作用是無論如何滾動瀏覽器窗口元素的位置都是固定不變的，可以使用top、right、bottom、left這4個屬性來定義元素相對于瀏覽器窗口的位置。遮蓋層和登錄窗口層都使用了position:fixed;是為了防止頁面滾動對它們造成影響。CSS樣式：z-index:9999延時符CSS中的z-index屬性設(shè)置元素的堆疊順序。當(dāng)多個元素產(chǎn)生重疊時，由它來決定誰疊在上面，其值越大，越在上層。遮蓋層設(shè)置z-index:9998;是讓它在蓋在當(dāng)前頁面所有元素的上面，而登錄窗口層設(shè)置z-index:9999;是讓登錄窗口蓋在遮蓋層的上面，因此遮蓋層實(shí)現(xiàn)了登錄窗口和當(dāng)面頁面的隔離作用。position：fixed、z-index的使用方法視頻講解CSS樣式：toplefttransform完成居中功能延時符當(dāng)前元素設(shè)置為top:50%;和left:50%;時，如圖4-3-8所示，可以看到，子元素左上角的點(diǎn)與父元素的中心點(diǎn)重合，但子元素并未在父元素正中。因此通過CSS的transform屬性將子元素產(chǎn)生位移，transform屬性允許對元素進(jìn)行旋轉(zhuǎn)、縮放、移動或傾斜操作，其中可選值translate(x,y)可產(chǎn)生平面位移，代碼為transform:translate(-50%,-50%);即將水平方向左移50%，即寬度的一半，同時將垂直方向上移50%，即高度的一半，這樣子元素的中心點(diǎn)與父元素的中心點(diǎn)重合，實(shí)現(xiàn)了子元素居中的功能，如圖4-3-9所示。圖4-3-8top:50%;left:50%;的效果圖4-3-9transform:translate(-50%,-50%);的效果JavaScript：href=”javascript:;”延時符將“登錄”超鏈接的href屬性設(shè)置為“javascript:;”表示它是一個超鏈接，只是不跳轉(zhuǎn)而已，它的目的是將在JS代碼段里執(zhí)行一段代碼。JavaScript：document.querySelector()延時符在前面的知識點(diǎn)講過，獲取元素可通過getElement(s)By方式，比如document.getElementById("id")，document.getElementsByTagName(‘div’)[0]，它們往往是JavaScript程序中開銷最大的部分，因訪問NodeList導(dǎo)致的問題很多。而document.querySelector()可避免使用NodeList對象通常會引起的大多數(shù)性能問題，因此它的訪問效率相比而言要快得多。對使用者來說，也避免了針對不同選擇符要使用不同getElement(s)By方式帶來的麻煩。只需要在參數(shù)里用選擇符即可。如document.querySelector("#close")、document.querySelector(".title")等。querySelector與getElementBy方法的異同視頻講解任務(wù)實(shí)施延時符結(jié)構(gòu)分析樣式分析設(shè)置頁面樣式頁面結(jié)構(gòu)結(jié)構(gòu)分析延時符上圖“登錄”超鏈接，點(diǎn)擊之后會彈出如右上圖所示的登錄窗口。登錄窗口是由標(biāo)題和主體組成，其中主體部分包含表單，表單中包含輸入框、密碼框、按鈕和提交按鈕幾個表單組件，由它們完成登錄輸入功能。樣式分析12增加遮蓋層的目的是將原來的頁面與登錄/注冊窗口隔以半透明效果隔離開，保證操作登錄/注冊窗口時不會誤點(diǎn)擊原來的頁面，從而模擬了彈出窗口的樣式。只有當(dāng)點(diǎn)擊關(guān)閉鍵，才會隱藏登錄/注冊窗口和遮蓋層，恢復(fù)顯示原來的頁面。

延時符登錄窗口實(shí)際上是由兩個div堆疊而成，如圖4-3-5所示，在原來的頁面上增加一個遮蓋層，再在遮蓋層上放置登錄/注冊窗口。通過JavaScript來控制遮蓋層與登錄/注冊層的顯示與隱藏。用JavaScript控制登錄窗口的顯示與隱藏12登錄窗口的隱藏由與顯示相反，在JS代碼中取得關(guān)閉按鈕“X”的對象closeBtn，然后監(jiān)聽closeBtn對象的單擊事件，當(dāng)單擊時，會運(yùn)行后面的回調(diào)函數(shù)，將遮蓋層和登錄窗口層display屬性由block改為none，即完成了登錄窗口的隱藏。延時符任務(wù)實(shí)施視頻講解本案例先完成顯示登錄窗口的顯示，代碼必須要放置在window.onload=function(){}里，否則會因?yàn)殇秩疚赐瓿删腿ミ\(yùn)行js代碼導(dǎo)致的錯誤。在JS代碼中取得“登錄”超鏈接元素對象link，然后監(jiān)聽link對象的單擊事件，當(dāng)單擊時，會運(yùn)行后面的回調(diào)函數(shù)，將遮蓋層和登錄窗口層display屬性由none改為block，即完成了登錄窗口的顯示。在單擊“登錄”超鏈接后，顯示登錄窗口；在單擊登錄窗口右上角的“X”后，隱藏登錄窗口。這是功能控制的基本邏輯。謝謝觀看！登錄頁表單驗(yàn)證功能實(shí)現(xiàn)Web前端技術(shù)延時符CONTENTS目錄01任務(wù)描述03知識點(diǎn)導(dǎo)圖02學(xué)習(xí)目標(biāo)

04相關(guān)知識05任務(wù)實(shí)施延時符任務(wù)描述延時符任務(wù)描述在上一個任務(wù)中，我們制作了登錄頁面。但是沒有實(shí)現(xiàn)登錄的功能，本次任務(wù)我們將運(yùn)用用JavaScript中函數(shù)，關(guān)系運(yùn)算，焦點(diǎn)事件等知識繼續(xù)完善上一任務(wù)的登錄頁面中手機(jī)號碼驗(yàn)證和輸入密碼驗(yàn)證功能。下面，我們將學(xué)習(xí)如何使用JavaScript相關(guān)知識完成用戶登錄頁面驗(yàn)證任務(wù)。效果如圖4-4-1所示。延時符學(xué)習(xí)目標(biāo)延時符學(xué)習(xí)目標(biāo)掌握自定義函數(shù)的方法；掌握比較、邏輯和條件運(yùn)算符的使用；掌握焦點(diǎn)事件的使用方法；知識目標(biāo)能夠編寫自定義函數(shù)；能夠熟練使用比較、邏輯和條件運(yùn)算符；能夠合理使用this；技能目標(biāo)延時符培養(yǎng)模塊化編碼理念；培養(yǎng)踏實(shí)的工作態(tài)度；培養(yǎng)思維邏輯能力；培養(yǎng)團(tuán)隊合作的意識。素養(yǎng)目標(biāo)知識點(diǎn)導(dǎo)圖延時符知識點(diǎn)導(dǎo)圖延時符相關(guān)知識延時符函數(shù)比較運(yùn)算邏輯運(yùn)算條件運(yùn)算焦點(diǎn)事件JavaScript中的函數(shù)是可重復(fù)使用的代碼塊，它主要由事件驅(qū)動的或者被調(diào)用時執(zhí)行。常用定義函數(shù)的基本語法如下：根據(jù)這樣的基本語法，我們可以嘗試定義一個簡單的自定義函數(shù)myFunction(),代碼如右方所示：函數(shù)延時符1.<script>2.//函數(shù)定義（無參數(shù)）3.functionmyFunction()4.{5.alert("HelloWorld!");6.}7.</script>8.</head>9.10.<body>11.<!--通過按鈕單擊事件進(jìn)行函數(shù)的調(diào)用-->12.<buttononclick="myFunction()">點(diǎn)我</button>function函數(shù)名(){//函數(shù)體}前文代碼在瀏覽器中運(yùn)行，點(diǎn)擊按鈕“點(diǎn)我”，可以通過onclick事件驅(qū)動函數(shù)myFunction()，執(zhí)行函數(shù)中的代碼塊alert(“HelloWorld!”)，運(yùn)行效果如圖4-4-4所示：函數(shù)（續(xù)1）延時符在調(diào)用函數(shù)時，可以向其傳遞值，這些值被稱為參數(shù)。這些參數(shù)可以在函數(shù)中使用。可以向函數(shù)發(fā)送任意多的參數(shù)，參數(shù)之間由逗號(,)分隔，語法如下：JavaScript函數(shù)中變量和參數(shù)必須以一致的順序出現(xiàn)。第一個變量就是第一個被傳遞的參數(shù)的給定的值，以此類推。所以可以創(chuàng)建一個包含參數(shù)的函數(shù)，代碼如右方所示：函數(shù)（續(xù)2）延時符1.1.<p>點(diǎn)擊這個按鈕，來調(diào)用帶參數(shù)的函數(shù)。</p>2.<buttononclick="myFunction('BillGates','teacher')">點(diǎn)擊這里</button>3.<script>4.//函數(shù)定義(有兩個參數(shù),無返回值)5.functionmyFunction(name,job){6. alert("Welcome"+name+",the"+job);7.}8.</script>myFunction(argument1,argument2)在瀏覽器中運(yùn)行，點(diǎn)擊按鈕“點(diǎn)擊這里”，可以通過onclick事件驅(qū)動函數(shù)myFunction()，執(zhí)行函數(shù)中時按照參數(shù)順序?qū)ⅰ癇illGates”和“teacher”依次傳遞執(zhí)行，運(yùn)行效果如下圖4-4-5所示：有時，我們會希望函數(shù)將值返回調(diào)用它的地方。通過使用return語句就可以實(shí)現(xiàn)。在使用return語句時，函數(shù)會停止執(zhí)行，并返回指定的值。比如以下代碼：最終將會計算出4和3的乘積，并返回給調(diào)用函數(shù)的位置。本例中將會賦值給id=”demo”的p元素。函數(shù)（續(xù)3）延時符1.1.<p>本例調(diào)用的函數(shù)會執(zhí)行一個計算，然后返回結(jié)果：</p>2.<pid="demo"></p>3.<script>4.//函數(shù)定義(有兩個參數(shù),有返回值)5.functionmyFunction(a,b){6. returna*b;7.}8.document.getElementById("demo").innerHTML=myFunction(4,3);9.</script>比較運(yùn)算延時符JavaScript的比較運(yùn)算符有==、===、!=、!==、<、>、<=和>=，通常用于邏輯語句，以判定變量或值是否相等，它的返回值為布爾型（true或false），最常見的使用場景就是在分支和循環(huán)控制語句中的使用。表格4-4-1是x=7情況下是各類比較運(yùn)算的結(jié)果：運(yùn)算符說明案例返回值==等于x==8x==7falsetrue===絕對等于(類型數(shù)值都相同)x===”7”x===7falsetrue!=不等于x!=8true!==不絕對等于（值和類型有一個不相等，或兩個都不相等）x!===”7”x!===7truefalse<小于x<8true>大于x>8false<=小于等于x<=8true>=大于等于x>=8false邏輯運(yùn)算延時符邏輯運(yùn)算符用于測定變量或值之間的邏輯，邏輯運(yùn)算通常和比較運(yùn)算配合使用。表格4-4-2是x=6以及y=3情況下是各類邏輯運(yùn)算運(yùn)算的結(jié)果：運(yùn)算符說明案例返回值&&and與x<10&&y>1true||or或x==5||y==5false!not非!(x==y)true條件運(yùn)算延時符JavaScript還包含了基于某些條件對變量進(jìn)行賦值的條件運(yùn)算符。語法如下所示：例如：variablename=(condition)?value1:value21.c=(temperature<37.3)?"體溫正常":"發(fā)熱";

//當(dāng)變量temperature值小于37.3時條件運(yùn)算結(jié)果為“體溫正常”，否則結(jié)果為“發(fā)熱”。焦點(diǎn)事件延時符焦點(diǎn)事件主要有兩類事件組成，一類是得到焦點(diǎn)事件onfocus；一類是失去焦點(diǎn)事件onblur。通常用于<input>和<select>等表單元素或者<a>元素中。例如如下代碼能夠文本框?qū)崿F(xiàn)得到焦點(diǎn)時背景色改為紅色，失去焦點(diǎn)時還原為白色。運(yùn)行效果如下圖4-4-6所示：1.輸入您的姓名:<inputtype="text"id="fname">2.<script>3.document.getElementById("fname").addEventListener("focus",myFocus);4.functionmyFocus(){5.document.getElementById("fname").style.backgroundColor="red";6.}7.document.getElementById("fname").addEventListener("blur",myBlur);8.functionmyBlur(){9.document.getElementById("fname").style.backgroundColor="white";10.}11.12.</script>焦點(diǎn)事件講解任務(wù)實(shí)施延時符任務(wù)分析技術(shù)分析與實(shí)現(xiàn)完成代碼任務(wù)分析延時符用戶登錄驗(yàn)證任務(wù)，需要對輸入手機(jī)號碼合理性進(jìn)行驗(yàn)證，比如手機(jī)號碼是不是11位，將此項(xiàng)功能定義為函數(shù)checkPhone；也對輸入密碼正確性進(jìn)行驗(yàn)證（教材中使用手機(jī)號碼后六位作為默認(rèn)密碼），將此項(xiàng)功能定義為函數(shù)checkPw；另外可以使用焦點(diǎn)函數(shù)改變當(dāng)前編輯文本框或者密碼框的樣式。所以這項(xiàng)任務(wù)的主要任務(wù)可以分解為3項(xiàng)子任務(wù)如右圖4-4-3所示：：技術(shù)分析與實(shí)現(xiàn)：步驟1延時符步驟1：定義手機(jī)號碼合理性驗(yàn)證函數(shù)，手機(jī)號碼合理性包括以下3個方面：合理的手機(jī)號碼是11位；合理的手機(jī)號碼是全部為數(shù)字；合理的手機(jī)號碼首位數(shù)字為1；以上功能定義為函數(shù)checkPhone()，代碼如右側(cè)所示：1.1.functioncheckPhone(){2. if(phone.value.length!=11){3. str="手機(jī)號碼位數(shù)錯誤!";4. txt.className+='red';5. }elseif(phone.value.charAt(0)!='1'){6. str="手機(jī)號碼首位數(shù)字不為1錯誤！";7. txt.className+='red';8. }elseif(isNaN(Number(phone.value,10))){9. str="手機(jī)號碼中包含非數(shù)字！";10. txt.className+='red';11. }else{12. str="手機(jī)號碼符合格式要求！";13. }14.}技術(shù)分析與實(shí)現(xiàn)：步驟2延時符步驟2：定義密碼正確性驗(yàn)證函數(shù)。密碼正確性驗(yàn)驗(yàn)證首先需要通過用戶輸入的手機(jī)號碼進(jìn)行默認(rèn)密碼的動態(tài)生成（手機(jī)號碼后6位）。然后將輸入的密碼和默認(rèn)密碼進(jìn)行比對即可。以上功能定義為函數(shù)checkPw()，代碼如下：1.1.functioncheckPw(){2. varpass=phone.value.substr(5,6);3. if(phone.value.length!=11){4. str="手機(jī)號碼位數(shù)錯誤!";5. txt.className+='red';6. }elseif(pw.value!=pass){7. str='密碼錯誤！'8. txt.className+='red';9. }else{10. str='密碼正確！';11. txt.className='reg';12. }13.}

技術(shù)分析與實(shí)現(xiàn)：步驟3延時符步驟3：焦點(diǎn)事件處理。焦點(diǎn)事件處理包括以下4個方面：文本框得到焦點(diǎn)時修改背景樣式；文本框失去焦點(diǎn)時恢復(fù)背景樣式，并調(diào)用checkPhone()做合理性驗(yàn)證；密碼框得到焦點(diǎn)時修改背景樣式，并調(diào)用checkPhone()做合理性驗(yàn)證；密碼框失去焦點(diǎn)時恢復(fù)背景樣式；以上功能代碼如右側(cè)：1.//文本框得到焦點(diǎn)時修改背景樣式2.phone.onfocus=function(){3. this.className='in';4.}5.//文本框失去焦點(diǎn)時恢復(fù)背景樣式，并調(diào)用checkPhone()做合理性驗(yàn)證6.phone.onblur=function(){7. checkPhone();8. txt.innerHTML=str;9. this.className='';10.}11.12.//密碼框得到焦點(diǎn)時修改背景樣式，并調(diào)用checkPhone()做合理性驗(yàn)證13.pw.onfocus=function(){14. checkPhone();15. txt.innerHTML=str;16. this.className='in';17.}18.//密碼框失去焦點(diǎn)時恢復(fù)背景樣式19.pw.onblur=function(){20. this.className='';21.}技術(shù)分析與實(shí)現(xiàn)：步驟4延時符步驟4：按鈕事件處理。單擊“確定”按鈕驗(yàn)證手機(jī)號和密碼代碼如下所示：1.btn.onclick=function(){2. checkPhone();3. checkPw();4. txt.innerHTML=str;5.}任務(wù)實(shí)現(xiàn)講解謝謝觀看！新曲發(fā)布倒計時功能實(shí)現(xiàn)Web前端技術(shù)延時符CONTENTS目錄01任務(wù)描述03知識點(diǎn)導(dǎo)圖02學(xué)習(xí)目標(biāo)

04相關(guān)知識05任務(wù)實(shí)施延時符任務(wù)描述延時符任務(wù)描述倒計時，在我們的生活的處處都有倒計時的身影，或者可以說時時刻刻都在倒計時，它常常出現(xiàn)在在某夕夕、某寶、某東等。當(dāng)然還有節(jié)假日的倒計時、高考倒計時、紀(jì)念日倒計時等等，可以說在生活中到處都是倒計時。下面我們將學(xué)習(xí)如何使用JavaScript中的日期對象和定時器方法完成新歌發(fā)布倒計時任務(wù)。效果如圖4-5-1所示。延時符學(xué)習(xí)目標(biāo)延時符學(xué)習(xí)目標(biāo)掌握日期時間對象Date的使用；掌握定時器setTimeout()或setInterval()使用方法；掌握clearTimeout()停止定時器的方法；知識目標(biāo)能夠編寫JavaScript代碼實(shí)現(xiàn)顯示時間和日期功能；能夠編寫JavaScript代碼實(shí)現(xiàn)發(fā)布倒計時功能；技能目標(biāo)延時符培養(yǎng)創(chuàng)新思維能力；培養(yǎng)嚴(yán)謹(jǐn)、踏實(shí)的工作態(tài)度；培養(yǎng)勇于挑戰(zhàn)難度的拼搏精神；素養(yǎng)目標(biāo)知識點(diǎn)導(dǎo)圖延時符知識點(diǎn)導(dǎo)圖延時符相關(guān)知識延時符Data對象Data對象常用方法定時器方法取消定時器在JavaScript中對日期和時間數(shù)據(jù)處理使用Data對象。創(chuàng)建Date使用newDate()，通?？梢杂靡韵滤姆N方法日期和時間的創(chuàng)建：參數(shù)說明：milliseconds

參數(shù)是一個Unix時間戳（UnixTimeStamp），它是一個整數(shù)值，表示自1970年1月1日00:00:00UTC（theUnixepoch）以來的毫秒數(shù)。dateString

參數(shù)表示日期的字符串值。year,month,day,hours,minutes,seconds,milliseconds

分別表示年、月、日、時、分、秒、毫秒。Data對象延時符vard=newDate();

vard=newDate(milliseconds);vard=newDate(dateString);vard=newDate(year,month,day,hours,minutes,seconds,milliseconds);根據(jù)上面的語法和參數(shù)說明，可以使用下面的代碼來創(chuàng)建具體的日期和時間：上述代碼在瀏覽器控制臺輸入結(jié)果如圖4-5-4所示：Data對象（續(xù)）延時符1.vartoday=newDate(); //創(chuàng)建當(dāng)前日期時間2.vard1=newDate("October1,20198:00:00"); //創(chuàng)建2019年10月1日8時整3.vard2=newDate(2019,9,1); //創(chuàng)建2019年10月1日4.vard3=newDate(2019,9,1,8,30,0); //創(chuàng)建2019年10月1日8時30分整5.console.log(today);6.console.log(d1);7.console.log(d2);8.console.log(d3);Data對象常用方法延時符Data對象的常用方法都圍繞著日期或者時間數(shù)據(jù)的讀寫操作。主要方法如表4-5-1所示：方法說明getFullYear()從Date對象以四位數(shù)字返回年份。getMonth()從Date對象返回月份(0~11)。月份的值從0開始，表示1月。getDate()從Date對象返回一個月中的某一天(1~31)。getDay()從Date對象返回一周中的某一天(0~6)。數(shù)值0表示周日。getHours()返回Date對象的小時(0~23)。getMinutes()返回Date對象的分鐘(0~59)。getSeconds()返回Date對象的秒數(shù)(0~59)。setFullYear()設(shè)置Date對象中的年份（四位數(shù)字）。setMonth()設(shè)置Date對象中月份(0~11)。setDate()設(shè)置Date對象中月的某一天(1~31)。Data對象常用方法（續(xù)1）延時符使用表格中部分方法，可以編寫顯示當(dāng)前年月日的JavaScript代碼如下：代碼完成后在瀏覽器中運(yùn)行結(jié)果如圖4-5-5所示：1.<pid="demo">單擊按鈕顯示當(dāng)前年月日。</p>2.<buttononclick="myFunction()">顯示</button>3.<script>4.functionmyFunction(){5. 6. vard=newDate();7. 8. varyear=d.getFullYear();9. varmonth=d.getMonth();10. varday=d.getDate();11. 12. varx=document.getElementById("demo");13. x.innerHTML=year+'年'+month+'月'+day+'日';14.}15.</script>Data對象常用方法（續(xù)2）延時符在前面代碼中繼續(xù)使用表格中的其它方法，還可以實(shí)現(xiàn)查閱去年今天是星期幾的功能。代碼如下，代碼完成后在瀏覽器中運(yùn)行結(jié)果如圖所示：代碼完成后在瀏覽器中運(yùn)行結(jié)果如圖4-5-5所示：1.<pid="demo">我是顯示區(qū)域。</p>2.<buttononclick="myFunction(0)">顯示今天周幾</button>3.<buttononclick="myFunction(1)">去年今天周幾</button>4.<script>5.functionmyFunction(flag){ 6. vard=newDate(); 7. varyear=d.getFullYear();8. varday;9. varweekday=['日','一','二','三','四','五','六']10. varstr="今天是周"; 11. varx=document.getElementById("demo"); 12. if(flag==1){13. d.setFullYear(year-1);14. str="去年今天是周"15. } 16. day=d.getDay();17. x.innerHTML=str+weekday[day];18.}19.</script>定時器方法延時符JavaScript提供定時執(zhí)行代碼的功能，叫做定時器（timer），主要由setTimeout()和setInterval()這兩個函數(shù)來完成。它們向任務(wù)隊列添加定時任務(wù)。(1)setTimeout()函數(shù)setTimeout函數(shù)用來指定某個函數(shù)或某段代碼，在多少毫秒之后執(zhí)行。它返回一個整數(shù)，表示定時器的編號，以后可以用來取消這個定時器。語法如下：參數(shù)說明：setTimeout函數(shù)接受兩個參數(shù)，第一個參數(shù)func|code是將要推遲執(zhí)行的函數(shù)名或者一段代碼，第二個參數(shù)delay是推遲執(zhí)行的毫秒數(shù)。上面代碼會先輸出start和stop，然后等待1000毫秒再輸出pause。注意，console.log(“pause”)必須以字符串的形式，作為setTimeout的參數(shù)。如果推遲執(zhí)行的是函數(shù)，就直接將函數(shù)名，作為setTimeout的參數(shù)。timerId=setTimeout(func|code,delay);1.console.log('start');2.setTimeout('console.log(“pause”)',1000);3.console.log('stop');1.functionf(){2.console.log('pause');3.}4.setTimeout(f,1000);定時器方法（續(xù)1）延時符通過上面的語法學(xué)習(xí)，我們可以簡單的使用setTimeout函數(shù)實(shí)現(xiàn)經(jīng)典的數(shù)字時鐘。代碼如右側(cè)所示：代碼運(yùn)行結(jié)果如圖4-5-7所示：1.<divid="txt"></div>2.3.<script>4.functionstartTime(){5.vartoday=newDate();6.varh=today.getHours();7.varm=today.getMinutes();8.vars=today.getSeconds();9.//在numbers<10的數(shù)字前加上010.m=checkTime(m);11.s=checkTime(s);12.document.getElementById("txt").innerHTML=h+":"+m+":"+s;13.vart=setTimeout(function(){startTime()},500);14.}15.16.functioncheckTime(i){17.if(i<10){18.i="0"+i;19.}20.returni;21.}22.</script>定時器方法（續(xù)2）延時符(2)setInterval函數(shù)setInterval函數(shù)的用法與setTimeout完全一致，區(qū)別僅僅在于setInterval指定某個任務(wù)每隔一段時間就執(zhí)行一次，也就是無限次的定時執(zhí)行。上面代碼中，每隔1000毫秒就輸出一個2，會無限運(yùn)行下去，直到關(guān)閉當(dāng)前窗口。1.vari=12.vartimer=setInterval(function(){3.console.log(2);4.},1000)定時器方法（續(xù)1）延時符前面面是一個通過setInterval方法實(shí)現(xiàn)經(jīng)典的數(shù)字時鐘的例子。代碼如右側(cè)所示：代碼運(yùn)行結(jié)果如圖4-5-8所示：1.<divid="txt"></div>2.3.<script>4.functionstartTime(){5.vartoday=newDate();6.varh=today.getHours();7.varm=today.getMinutes();8.vars=today.getSeconds();9.//在numbers<10的數(shù)字前加上010.m=checkTime(m);11.s=checkTime(s);12.document.getElementById("txt").innerHTML=h+":"+m+":"+s;13.vart=setInterval(function(){startTime()},500);14.}15.16.functioncheckTime(i){17.if(i<10){18.i="0"+i;19.}20.returni;21.}22.</script>取消定時器方法延時符定時器函數(shù)setTimeout和setInterval函數(shù)，都返回一個整數(shù)值，表示計數(shù)器編號。將該整數(shù)傳入clearTimeout和clearInterval函數(shù)，就可以取消對應(yīng)的定時器。上面代碼中，每隔1000毫秒就輸出一個2，會無限運(yùn)行下去，直到關(guān)閉當(dāng)前窗口。1.varid1=setTimeout(f,1000);2.varid2=setInterval(f,1000);3.4.clearTimeout(id1);5.clearInterval(id2);定時器方法（續(xù)1）延時符前面代碼中，回調(diào)函數(shù)f不會再執(zhí)行了，因?yàn)閮蓚€定時器都被取消了。利用這一點(diǎn)，可以寫一個函數(shù)，通過按鈕讓前面制作的數(shù)字時鐘停止，當(dāng)然需要注意停止函數(shù)必須和定時器函數(shù)匹配，clearTimeout匹配setTimeout；clearInterval匹配setInterval。右面代碼以clearTimeout匹配setTimeout為例，clearInterval匹配setInterval代碼雷同不再列舉：上面代碼中，先調(diào)用setTimeout得到一個定時器編號t，然后把編號t關(guān)閉了定時器使得數(shù)字時鐘停止。如圖4-5-9所示：1.<divid="txt"></div>2.<buttononclick="stop()">停止</button>3.<script>4.vart; //這里必須定義為全局變量5.functionstartTime(){6.vartoday=newDate();7.varh=today.getHours();8.varm=today.getMinutes();9.vars=today.getSeconds();10.//在numbers<10的數(shù)字前加上011.m=checkTime(m);12.s=checkTime(s);13.document.getElementById("txt").innerHTML=h+":"+m+":"+s;14.t=setTimeout(function(){startTime()},500);15.}16.functioncheckTime(i){17.if(i<10){18.i="0"+i;19.}20.returni;21.}22.functionstop(){23. clearTimeout(t)24.}25.</script>任務(wù)實(shí)施延時符任務(wù)分析技術(shù)分析與實(shí)現(xiàn)完成代碼任務(wù)分析延時符新歌發(fā)布倒計時任務(wù)，需要每秒(即1000毫秒)重新刷新一次倒計時時間，因此非常適合使用定時器函數(shù)實(shí)現(xiàn)。在本任務(wù)中選用setInInterval函數(shù)實(shí)現(xiàn)每秒運(yùn)行一次自定義函數(shù)mytime()，再由mytime()函數(shù)使用Data對象將當(dāng)前時間和發(fā)布時間進(jìn)行計算得出發(fā)布剩余時間。最后再通過DOM對象將剩余時間顯示在頁面中即可實(shí)現(xiàn)任務(wù)完成要求。所以這項(xiàng)任務(wù)可以分解為3項(xiàng)子任務(wù)如圖4-5-3所示：技術(shù)分析與實(shí)現(xiàn)：步驟1延時符步驟1：定義函數(shù)mytime()。為了方便實(shí)現(xiàn)代碼重復(fù)運(yùn)行，自定義函數(shù)將為這些重復(fù)運(yùn)行的代碼形成容器。1.functionmytime(){2.｝技術(shù)分析與實(shí)現(xiàn)：步驟2延時符步驟2：計算倒計時剩余時間1.創(chuàng)建當(dāng)前時間，并獲取當(dāng)前時間的時分秒數(shù)值；2.計算出到新歌發(fā)布時間的剩余時間maxtime的值；3.計算出到新歌發(fā)布時間的剩余時間分minutes和秒seconds的值；實(shí)現(xiàn)代碼如下：1.functionmytime(){2.vartim,hour1,min1; 3.tim=newDate();//創(chuàng)建時間對象4.hour1=tim.getHours();//獲取當(dāng)前時間的小時數(shù) 5.min1=tim.getMinutes();//獲取當(dāng)前時間的分鐘數(shù)6.varsec1=tim.getSeconds();//獲取當(dāng)前時間的秒數(shù)7.varmaxtime=3600-min1*60-sec1;//當(dāng)前時間距離發(fā)布時間的秒數(shù)8.varminutes=Math.floor(maxtime/60);9.varseconds=maxtime%60;10.}技術(shù)分析與實(shí)現(xiàn)：步驟3延時符步驟3：顯示倒計時剩余時間1.獲取顯示剩余分鐘值的DOM對象m；2.獲取顯示剩余秒值的DOM對象s；3.使用m和s的innerHTML屬性將前面步驟中剩余時間進(jìn)行顯示；4.使用條件運(yùn)算符將分和秒不足兩位數(shù)時前方補(bǔ)“0”；代碼如下所示：至此，自定義函數(shù)mytime()完成。1.varm=document.getElementById("m"),2. s=document.getElementById("s");3.4.m.innerHTML=minutes<10?"0"+minutes:minutes;5.s.innerHTML=seconds<10?"0"+seconds:seconds;技術(shù)分析與實(shí)現(xiàn)：步驟4延時符步驟4：定時器重復(fù)運(yùn)行自定義函數(shù) ，使用setInterval函數(shù)每1000毫秒執(zhí)行mytime函數(shù)一次。代碼如下所示：1.setInterval('mytime()',1000);//定時運(yùn)行mytime()函數(shù) 任務(wù)實(shí)現(xiàn)講解謝謝觀看！發(fā)布評論功能實(shí)現(xiàn)Web前端技術(shù)延時符CONTENTS目錄01任務(wù)描述03知識點(diǎn)導(dǎo)圖02學(xué)習(xí)目標(biāo)

04相關(guān)知識05任務(wù)實(shí)施延時符任務(wù)描述延時符任務(wù)描述隨著web2.0走向成熟，頁面更加強(qiáng)調(diào)用戶的互動和內(nèi)容的自制。而且當(dāng)前頁面中的評論或者留言，可以讓網(wǎng)頁用戶參與度更高，并使得頁面內(nèi)容保持新鮮度，根據(jù)數(shù)據(jù)顯示評論越多頁面的可讀性越高，用戶的粘度越好。因此，評論區(qū)成為了當(dāng)前的內(nèi)容性頁面中必不可少的重要組成部分。本任務(wù)就是使用JavaScript實(shí)現(xiàn)評論區(qū)這一種重要的頁面組件的。效果如圖4-6-1所示。延時符學(xué)習(xí)目標(biāo)延時符學(xué)習(xí)目標(biāo)綜合運(yùn)用JavaScript知識；掌握創(chuàng)建和刪除節(jié)點(diǎn)的方法；掌握操作子節(jié)點(diǎn)和父節(jié)點(diǎn)的方法；知識目標(biāo)能夠根據(jù)要求編寫JavaScript代碼實(shí)現(xiàn)頁面評論區(qū)功能；能夠合理使用DOM節(jié)點(diǎn)的各項(xiàng)操縱；技能目標(biāo)延時符培養(yǎng)綜合項(xiàng)目開發(fā)的能力；培養(yǎng)嚴(yán)謹(jǐn)踏實(shí)的學(xué)習(xí)習(xí)慣；培養(yǎng)敢于創(chuàng)新的精神；素養(yǎng)目標(biāo)知識點(diǎn)導(dǎo)圖延時符知識點(diǎn)導(dǎo)圖延時符相關(guān)知識延時符創(chuàng)建DOM節(jié)點(diǎn)

溫馨提示

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

最新文檔

評論

0/150

提交評論