WEB前端開發(fā)實戰(zhàn)課件：JavaScript網頁特效制作

JavaScript網頁特效制作

日期時間顯示特效制作htmlh5imgjavascriptwebcsscolorhr目錄任務情境任務目標任務描述任務實施學習資源考核評價1+X考證練習htmlh5imgjavascriptwebcolorhr任務情境隨著科技的發(fā)展信息技術越來越發(fā)達，當我們?yōu)g覽一些網頁時，會發(fā)現(xiàn)網頁上有各種各樣的動態(tài)效果，使得這個網頁加的生動和有活力，而這些動畫的效果很大程度是JavaScript控制的。例如平時我們平時瀏覽網頁看到的頁面的效果切換、動畫效果、頁?游戲、時間顯示等等。本次專題任務采用JavaScript中的定時器、Date對象來實現(xiàn)頁面中日期時間顯示特效的制作。工作任務單工作任務單任務要求根據效果圖完成美食詳情頁日期時間特效制作甲方提供的設計圖

如右圖所示評判標準1.熟練掌握計時器方法。2.能夠掌握在標題欄顯示內容的方法3.掌握日期函數的使用方法。4.掌握獲取時間的方法。1+X技能考核標準能正確聲明變量和函數、利用定時器以及使用Date對象完成日期時間顯示特效制作技能大賽考核要求制作的頁面需具有交互設計，并符合W3C的HTML和CSS標準作品提交要求站點文件夾評判標準1.熟練掌握計時器方法。2.能夠掌握在標題欄顯示內容的方法3.掌握日期函數的使用方法。4.掌握獲取時間的方法。任務目標任務目標熟練掌握定時器方法。能夠掌握在標題欄顯示內容的方法掌握日期函數的使用方法。掌握獲取時間的方法。任務描述在網頁中添加時間特效，可以方便用戶查詢時間和日歷，使用JavaScript可以制作多種時間特效，本節(jié)以制作頁面的時間特效放置于頁面頭部內容中為例，獲取當前的時間和日期。JavaScript提供了專門用于時間和日期的對象類，通過new運算符合Date()構造函數可以創(chuàng)建日期對象。日期對象可在頁面中顯示當前的系統(tǒng)時間，以及進行日期類型的數據運算任務實施圖1

效果圖（有特效）圖1

效果圖（無特效）效果圖展示任務分析編寫JS腳本，實現(xiàn)特效在制作特效之前先在美食頁面項目下新建JavaScript文件，在頁面中鏈接js文件特效分析：當打開頁面時，頁面的頭部顯示當前時間，且時間隨著系統(tǒng)的時間改變而改變。任務實施效果圖展示任務分析編寫JS腳本，實現(xiàn)特效新建JavaScript文件及鏈接JavaScript文件編輯JavaScript文件調用函數聲明及獲取當前時間步驟一步驟二步驟三步驟四編寫JS腳本，實現(xiàn)日期時間顯示特效操作步驟處理獲取時間步驟五將時間輸出到頁面步驟六任務實施效果圖展示任務分析編寫JS腳本，實現(xiàn)特效學習資源JavaScrip對象內置對象定時器1.什么是JavaScript對象？在JavaScript中，對象是一組無序相關屬性和方法的集合。所有的事物都是對象，例如字符串、數值、數組、函數等。對象也是一個變量，但對象可以包含多個值（多個變量），每個值以

name:value

對呈現(xiàn)。對象是由屬性和方法組成●屬性：事物的特征，在對象中用屬性來表示（常用名詞）●方法：事物的行為，在對象中用方法來表示（常用動詞）學習資源JavaScrip對象內置對象定時器2.為什么需要對象：

保存一個值時，可以使用變量，保存多個值（一組值）時，可以使用數組。若要保存龐大的信息集合時，則JavaScript中的對象表達結構更清晰、更強大。3.創(chuàng)建對象的三種方式：在JavaScript中，我們可以采用以下三種方式創(chuàng)建對象（object）：●利用字面量創(chuàng)建對象?！窭胣ewObject創(chuàng)建對象?！窭脴嬙旌瘮祫?chuàng)建對象。學習資源JavaScrip對象內置對象定時器3.1利用字面量創(chuàng)建對象對象字面量：就是大括號里面包含了表達這個具體事物（對象）的屬性和方法。大括號里面采取鍵值對的形式表示。鍵：相當于屬性名。值：相當于屬性值，可以是任意類型的值（如數字類型、字符串類型、布爾類型、函數類型等）3.2利用newObject創(chuàng)建對象●Object()：第一個字母大寫?！駈ewObject()：需要new關鍵字?！袷褂玫母袷剑簩ο?屬性=值。學習資源JavaScrip對象內置對象定時器3.3利用構造函數創(chuàng)建對象。構造函數是一種特殊的函數，主要用來初始化對象，即為對象成員變量賦初始值，它總與new關鍵字一起使用。我們可以把對象中一些公共的屬性和方法抽取出來，然后封裝到這個函數里面。構造函數的語法格式：function構造函數名(){this.屬性=值；this.方法=function()；}調用構造函數：new構造函數名()注意：●構造函數名首字母大寫?！窈瘮祪鹊膶傩院头椒ㄇ懊骓毺砑觮his，表示當前對象的屬性和方法?！駱嬙旌瘮挡恍枰猺eturn就可以返回結果?！癞斘覀儎?chuàng)建對象的時候，必須用new來調用構造函數。學習資源JavaScrip對象內置對象定時器內置對象是指JS語言自帶的一些對象，這些對象供開發(fā)者使用，并提供了一些常用的或者是最基本且必要的功能（屬性和方法）。內置對象最大的優(yōu)點就是能幫助我們快速開發(fā)。JavaScript提供了多個內置對象：Math、Date、Array、String等什么是內置對象？學習資源JavaScrip對象內置對象定時器1.Math對象。Math對象不是構造函數，它具有數學常數和函數的屬性與方法。跟數學相關的運算（求絕對值、取整、求最大值等）都可以使用Math中的成員。Math常用函數的用法：

常用的內置對象？注意：上面的函數必須帶括號。學習資源JavaScrip對象內置對象定時器2.Date對象是一個構造函數，需要實例化后才能使用，用來處理日期和時間。Date()方法的使用（1）獲取當前時間必須實例化；（2）Date()構造函數的參數；如果括號里面有時間，就返回參數里面的時間。例如，日期格式字符串為‘2022-5-1’，可以寫成newDate(‘2022-5-1’)或者newDate(‘2022/5/1’)。如果Date()不寫參數，就返回當前時間。如果Date()里面寫參數，就返回括號里面輸入的時間。學習資源（3）日期獲取方法

獲取方法用于獲取日期的某個部分（來自日期對象的信息）。右邊面是最常用的方法（以字母順序排序）：

如果括號里面有時間，就返回參數里面的時間。例如日期格式字符串為‘2022-2-5’，可以寫成newDate('2022-2-5')或者newDate('2022/2/5')如果Date()不寫參數，就返回當前時間；如果Date()里面寫參數，就返回括號里面輸入的時間。JavaScrip對象內置對象定時器學習資源什么是定時器？

JavaScript定時器是利用JavaScript實現(xiàn)定時的一種方法，很多頁面特效的制作都離不開定時器，如在線時鐘特效、圖片輪播特效、廣告彈窗特效等。只要是與自動執(zhí)行有關的特效，都可以通過定時器來實現(xiàn)。JavaScrip對象內置對象定時器定時器的分類setTimeout()延遲定時器setInterval()循環(huán)定時器定時器的清除

每次使用定時器時，都必須清除定時器。每一個定時器開啟后，都會返回一個對應的ID，通過這個ID就清除定時器。以下為清除定時器的方法：清除定時器作用clearTimeout(timer)用于清除setTimeoutclearInterval(timer)用于清除setInterval學習資源JavaScrip對象內置對象定時器1.延遲定時器setTimeout(code,millisec)參數描述code必需。要調用的函數后要執(zhí)行的JavaScript代碼串。millisec必須。在執(zhí)行代碼前需等待的毫秒數。

2.循環(huán)定時器setInterval(code,millisec)參數描述code必須。要調用的函數后要執(zhí)行的JavaScript代碼串。millisec必須。周期性執(zhí)行或調用code之間的時間間隔，以毫秒計小貼士在使用定時器時，第一個參數code傳入的是函數，不能給作為參數的函數加括號。setInterval(nowTime,1000);正確寫法setInterval(nowTime(),1000);錯誤寫法注：添加括號表明直接調用函數，沒有括號表明這個函數是作為參數傳入，并不會被直接調用，而是在滿足條件后調用，這些的條件指的是每隔1s調用一次定時器的用法考核評價班級：姓名：學號任務名稱：古跡頁面制作評價項目評價標準自評情況考核情況課前自主探究（10%）完成課前學習通中下發(fā)任務□完成□基本完成□未完成□完成□基本完成□未完成工作過程（50%）布局結構分析能夠進行正確的頁面布局劃分□完成□基本完成□未完成□完成□基本完成□未完成頁面切圖能夠進行正確的切圖□完成□基本完成□未完成□完成□基本完成□未完成網站搭建網站文件命名正確□完成□基本完成□未完成□完成□基本完成□未完成HTML代碼編寫代碼編寫符合W3C標準□完成□基本完成□未完成□完成□基本完成□未完成CSS代碼編寫樣式書寫正確，并能實現(xiàn)參考效果□完成□基本完成□未完成□完成□基本完成□未完成項目成果（20%）工作完整能夠按時完成任務□是□是工作規(guī)范能按企業(yè)規(guī)范要求進行操作□是□是成果展示能準確表達，匯報成果□是□是非技術考評（20%）態(tài)度學習態(tài)度是否端正□是□是紀律遵守紀律□是□是協(xié)作有交流、團隊合作□是□是文明保持安靜，清理場所□是□是總分：

1+X考證練習練一練：掃碼完成1+X考證習題htmlh5imgjavascriptwebcsscolorhr感謝您的聆聽THANKYOUFORLISTENING第三章

JavaScript網頁特效制作任務三

頁面頭部固定特效制作htmlh5imgjavascriptwebcsscolorhr目錄任務情境任務目標任務描述任務實施學習資源考核評價課后拓展htmlh5imgjavascriptwebcolorhr任務情境廣西少數民族文化資源網是一個通過網站展示廣西少數民族在文化、節(jié)日、美食、古跡等方面資源的的綜合性資源類的網站。其中的服飾頁面頭部的內容我們需要將其固定于頁面頂端，為了完成這個內容就需要加入JavaScript特效。工作任務單工作任務單任務要求根據效果圖完成服飾詳情頁頭部固定制作甲方提供的設計圖

如右圖所示評判標準1.能夠正確的分析頁面特效2.能夠進行正確的獲取頁面元素3.能夠正確的使用if循環(huán)嵌套4.能夠正確的編寫事件代碼5.能夠正確的使用Windows滾動屬性1+X技能考核標準能正確選擇addEventListener綁定事件完成頁面特效制作作品提交要求站點文件夾評判標準1.能夠正確的分析頁面特效2.能夠進行正確的獲取頁面元素3.能夠正確的使用if循環(huán)嵌套4.能夠正確的編寫事件代碼5.能夠正確的使用Windows滾動屬性任務目標任務目標能夠掌握querySelector（）方法獲取html中頁面頭部元素；能夠正確使用if條件語句嵌套判斷窗口寬度、頁面頭部位置等；能夠正確使用監(jiān)聽器與滾動指定元素事件的用法；能夠正確使用offsetTop方法與window.screen對象從而完成頭部固定特效的制作；任務描述本任務是基于服飾詳情頁進行JavaScript的制作。任務要求是網頁滑輪往上或者往下移動時，頁面頭部內容始終保持呈現(xiàn)在頁面頂部。我們將通過完成廣西少數民族文化資源網中的服飾詳情頁頭部部分固定，進一步學習如何利用JavaScript完成頭部固定特效。任務實施圖2

效果圖（有特效）圖1

效果圖（無特效）效果圖展示編寫JS特效重構html+css找出原頁面頭部的HTML修改html找出原頁面頭部的CSS修改CSS步驟一步驟二步驟三步驟四重構html+css操作步驟步驟六效果圖展示編寫JS特效任務實施重構html+css鏈接外部JavaScript文件獲取頁面元素判斷位置方法獲取屏幕寬度步驟一步驟二步驟三步驟四編寫JS特效操作步驟設置監(jiān)聽事件步驟五獲取滾動像素步驟六頁面元素固定步驟七效果圖展示重構html+css編寫JS特效任務實施學習資源獲取用戶屏幕信息流程控制語句addEventListener()監(jiān)聽事件scroll事件流程控制語句

通過一些特殊結構可以讓js代碼加載時，要么可以跳過一部分不加載，或者可以循環(huán)加載一段代碼?！蚩刂屏髡Z句

控制流語句就是控制代碼運行的方向，分支。它里面包含了三種方法：if語句、if...else語句和switch語句。◎循環(huán)語句

循環(huán)結構是程序中一種很重要的結構。其特點是，在給定條件成立時，重復執(zhí)行某程序段，直到條件不成立為止。給定的條件成為循環(huán)條件，反復執(zhí)行的程序段稱為循環(huán)體。JavaScript語言提供了二種不同形式的循環(huán)結構，分別是for循環(huán)結構和while循環(huán)結構。

學習資源流程控制語句獲取用戶屏幕信息addEventListener()監(jiān)聽事件scroll事件◎獲取用戶屏幕信息1.window.screen對象：包含有關用戶屏幕的信息。并且window.screen對象在編寫時可以不使用window這個前綴。2.window.screen對象有哪些：（1）screen.width：屏幕的寬。（2）screen.height：屏幕的高。（3）screen.availWidth：可利用的寬，等于屏幕的寬。（4）screen.availHeight：可利用的高，等于屏幕的高減去mac頂部欄或windows底部欄。（5）screenTop：瀏覽器窗口左上角到屏幕上邊緣的距離。（6）screenLeft：瀏覽器窗口左上角到屏幕左邊緣的距離。（7）screenX：等于

screenLeft。（8）screenY：等于

screenY。3.Window滾動的像素屬性有哪些：（1）PageXOffset;返回文檔在窗口左上角水平滾動的像素。用法：設置或返回當前頁面相對于窗口顯示區(qū)左上角的X位置。（2）pageYOffset;返回文檔在窗口垂直方向滾動的像素。學習資源用戶屏幕信息scroll事件addEventListener()監(jiān)聽事件流程控制語句◎scroll事件1.什么是scroll事件？scroll翻譯過來的意思就是滾動。在javascript中，雖然scroll事件在window對象上發(fā)生的，但它實際表示的則是頁面中相應元素的變化。2.scroll事件在本任務中的作用是什么呢？在本次任務中，用戶在瀏覽頁面時會往下瀏覽頁面，當頁面滾輪隨用戶往下滑動時，便會觸發(fā)scroll事件，從而調用If條件語句對頁面頭部位置進行判斷。學習資源scroll事件addEventListener()監(jiān)聽事件用戶屏幕信息◎addEventListener（）監(jiān)聽事件讓計算機等待某個事件的發(fā)生，當這個事件發(fā)生之后，對其做出一個相應行為，如等待鼠標單擊按鈕，單擊發(fā)生時打開一個新的頁面；但是你寫的監(jiān)聽事件發(fā)現(xiàn)這件事情后，會進行阻止，讓其無法跳轉。流程控制語句語法：element.addEventListener(event,

function,

useCapture)event：必須存在。字符串，指定事件名。Function：必須存在。指定要事件觸發(fā)時執(zhí)行的函數。

useCapture：可寫也可以不寫。布爾值，指定事件是否在捕獲或冒泡階段執(zhí)行?？己嗽u價班級：姓名：學號任務名稱：頁面頭部固定評價項目評價標準自評情況考核情況課前自主探究（10%）完成課前學習通中下發(fā)任務￡完成￡基本完成R未完成□完成□基本完成□未完成工作過程（50%）JS特效分析能夠進行正確的分析特效所需的JS方法□完成□基本完成□未完成□完成□基本完成□未完成

獲取頁面元素能夠進行正確獲取頁面元素□完成□基本完成□未完成□完成□基本完成□未完成

if語句編寫能夠正確使用IF嵌套循環(huán)□完成□基本完成□未完成□完成□基本完成□未完成

事件監(jiān)聽能夠正確編寫事件代碼□完成□基本完成□未完成□完成□基本完成□未完成

Window滾動像素屬性能夠正確應用window滾動像素屬性□完成□基本完成□未完成□完成□基本完成□未完成項目成果（30%）工作完整能夠按時完成任務□是□是

工作規(guī)范能按企業(yè)規(guī)范要求進行操作□是□是

成果展示能準確表達，匯報成果□是□是非技術考評（10%）態(tài)度學習態(tài)度是否端正□是□是

紀律遵守紀律□是□是

協(xié)作有交流、團隊合作□是□是

文明保持安靜，清理場所□是□是總分：

課后拓展練一練：設計并制作校園網聯(lián)系我們二級頁制作，效果如圖所示校園網專業(yè)介紹頁效果圖htmlh5imgjavascriptwebcsscolorhr感謝您的聆聽THANKYOUFORLISTENING第三章

JavaScript網頁特效制作任務四

頁面?zhèn)冗厵谔匦е谱鱤tmlh5imgjavascriptwebcsscolorhr目錄任務情境任務目標任務描述任務實施學習資源考核評價課后拓展htmlh5imgjavascriptwebcolorhr任務情境廣西少數民族文化資源網是一個通過網站展示廣西少數民族在文化、節(jié)日、美食、古跡等方面資源的的綜合性資源類的網站。為了幫助用戶在瀏覽網頁時更好的找到感興趣的內容，我們就需要加入側邊欄JavaScript特效。工作任務單工作任務單任務要求根據效果圖完成服飾詳情頁側邊欄制作甲方提供的設計圖

如右圖所示評判標準1.能夠掌握獲取滾動條位置的方法；2．能夠正確使用onclick事件；3．能夠掌握獲取頁面元素的方法；4．能夠正確使用循環(huán)判斷實現(xiàn)側邊框隱藏功能；作品提交要求站點文件夾評判標準1.能夠掌握獲取滾動條位置的方法；2．能夠正確使用onclick事件；3．能夠掌握獲取頁面元素的方法；4．能夠正確使用循環(huán)判斷實現(xiàn)側邊框隱藏功能；任務目標任務目標能夠掌握獲取滾動條位置的方法；能夠正確使用onclick事件；能夠掌握獲取頁面元素的方法；能夠正確使用循環(huán)判斷實現(xiàn)側邊框隱藏功能；任務描述本任務是基于服飾詳情頁進行JavaScript的制作。任務要求是網頁滑輪往上或者往下移動時，頁面的側邊欄始終跟隨滑輪移動，并且在點擊側邊欄中的“返回頂部”按鈕時頁面會跳轉到頁面頂部位置，并切點擊“三角”按鈕可以實現(xiàn)側邊的顯示或者隱藏。我們將通過完成廣西少數民族文化資源網中的服飾詳情頁側邊欄效果，進一步學習如何利用JavaScript完成側邊欄特效。任務實施圖2

效果圖（有特效）圖1

效果圖（無特效）效果圖展示編寫JS特效重構html+css找出原頁面?zhèn)冗厵诘腍TML修改html找出原頁面?zhèn)冗厵诘腃SS修改CSS步驟一步驟二步驟三步驟四重構html+css操作步驟步驟六效果圖展示編寫JS特效任務實施重構html+css鏈接外部JavaScript文件獲取頁面元素設置側邊欄顯示時的狀態(tài)設置點擊事件步驟一步驟二步驟三步驟四編寫JS特效操作步驟利用if...else語句判斷側邊欄狀態(tài)步驟五獲取滾動條位置步驟六設置返回頂部效果步驟七效果圖展示重構html+css編寫JS特效任務實施學習資源獲取滾動條位置

1.什么是idocument.documentElement.scrollTop？

Element.scrollTop

屬性可以獲取或設置一個元素的內容垂直滾動的像素數。一個元素的

scrollTop

值是這個元素的內容頂部（卷起來的）到它的視口可見內容（的頂部）的距離的度量。當一個元素的內容沒有產生垂直方向的滾動條，那么它的

scrollTop

值為0。

2.scrollTop注意事項如果一個元素不能被滾動（例如，它沒有溢出，或者這個元素有一個"non-scrollable"屬性），scrollTop將被設置為0。設置scrollTop的值小于0，scrollTop

被設為0如果設置了超出這個容器可滾動的值,scrollTop會被設為最大值。

考核評價班級：姓名：學號任務名稱：側邊欄評價項目評價標準自評情況考核情況課前自主探究（10%）完成課前學習通中下發(fā)任務￡完成￡基本完成R未完成□完成□基本完成□未完成工作過程（50%）JS特效分析能夠進行正確的分析特效所需的JS方法□完成□基本完成□未完成□完成□基本完成□未完成

獲取頁面元素能夠進行正確獲取頁面元素□完成□基本完成□未完成□完成□基本完成□未完成

if語句編寫能夠正確使用IF嵌套循環(huán)□完成□基本完成□未完成□完成□基本完成□未完成

設置側邊框內容的狀態(tài)能夠正確設定側邊框顯示/隱藏的狀態(tài)□完成□基本完成□未完成□完成□基本完成□未完成

獲取滾動條頂部位置能夠正確應用documentElement.scrollTop方法□完成□基本完成□未完成□完成□基本完成□未完成項目成果（30%）工作完整能夠按時完成任務□是□是

工作規(guī)范能按企業(yè)規(guī)范要求進行操作□是□是

成果展示能準確表達，匯報成果□是□是非技術考評（10%）態(tài)度學習態(tài)度是否端正□是□是

紀律遵守紀律□是□是

協(xié)作有交流、團隊合作□是□是

文明保持安靜，清理場所□是□是總分：

課后拓展練一練：設計并制作校園網聯(lián)系我們二級頁制作，效果如圖所示校園網專業(yè)介紹頁效果圖htmlh5imgjavascriptwebcsscolorhr感謝您的聆聽THANKYOUFORLISTENING第三章

JavaScript網頁特效制作任務五

輪播圖特效制作htmlh5imgjavascriptwebcsscolorhr目錄任務情境任務目標任務描述任務實施學習資源考核評價課后拓展htmlh5imgjavascriptwebcolorhr任務情境廣西少數民族文化資源網是一個通過網站展示廣西少數民族在文化、節(jié)日、美食、古跡等方面資源的的綜合性資源類的網站。其中的節(jié)日頁面頂部的圖片我們需要將更改為輪播圖，輪播圖在如今的網站當中是非常實用的一個頁面功能，為了完成這個功能就需要加入JavaScript特效。工作任務單工作任務單任務要求根據效果圖完成服飾詳情頁側邊欄制作甲方提供的設計圖

如右圖所示評判標準1.能夠掌握getElement方法獲取html頁面中輪播圖片元素；2.能夠正確使用for循環(huán)語句將上次循環(huán)的圖片active類刪掉；3.能夠正確使用if條件語句嵌套判斷圖片的張數；4.能夠正確設置事件監(jiān)聽；5.能夠正確使用定時器的用法；作品提交要求站點文件夾評判標準1.能夠掌握getElement方法獲取html頁面中輪播圖片元素；2.能夠正確使用for循環(huán)語句將上次循環(huán)的圖片active類刪掉；3.能夠正確使用if條件語句嵌套判斷圖片的張數；4.能夠正確設置事件監(jiān)聽；5.能夠正確使用定時器的用法；任務目標任務目標能夠掌握getElement方法獲取html頁面中輪播圖片元素；能夠正確使用for循環(huán)語句將上次循環(huán)的圖片active類刪掉；能夠正確使用if條件語句嵌套判斷圖片的張數；能夠正確設置事件監(jiān)聽；能夠正確使用定時器的用法；任務描述本任務是基于節(jié)日詳情頁進行JavaScript的制作。任務要求是每次打開網頁，都能看到輪播圖能正常切換，同時輪播圖兩旁都有左右按鈕功能，可以點擊并實現(xiàn)圖片切換到上一張或者下一張的特效，現(xiàn)在我們將學習如何利用JavaScript完成輪播圖特效。任務實施圖2

效果圖（有特效）圖1

效果圖（無特效）效果圖展示編寫JS特效重構html+css找出原頁面輪播的HTML修改html找出原頁面輪播的CSS修改CSS步驟一步驟二步驟三步驟四重構html+css操作步驟步驟六效果圖展示編寫JS特效任務實施重構html+css鏈接外部JavaScript文件獲取頁面元素設定變量，表示當前圖片編寫一個ClearActive類步驟一步驟二步驟三步驟四編寫JS特效操作步驟設置左右按鈕功能步驟五設置按鈕監(jiān)聽事件步驟六添加定時器步驟七效果圖展示重構html+css編寫JS特效任務實施學習資源數組1.什么是數組數組是一種特殊的變量，它能夠一次存放一個以上的值。2.數組的作用數組可以用一個單一的名稱存放很多值，并且還可以通過引用索引號來訪問這些值。3.如何創(chuàng)建數組

4.如何訪問數組元素通過引用索引號（下標號）來引用某個數組元素，示例如下：5.如何遍歷數組元素遍歷數組的含義是對數組所有元素進行訪問，遍歷數組的最安全方法是使用"for"循環(huán)。實例如下：

方法一：語法:vararray-name=[item1,item2,...];實例:varcars=["Saab","Volvo","BMW"];方法二：varcars=newArray("Saab","Volvo","BMW");//利用關鍵詞new創(chuàng)建數組varcars=["Saab","Volvo","BMW"];document.getElementById("demo").innerHTML=cars[0];varfruits,text,fLen,i;fruits=["Banana","Orange","Apple","Mango"];fLen=fruits.length;text="<ul>";for(i=0;i<fLen;i++){

text+="<li>"+fruits[i]+"</li>";}學習資源數組6.如何給數組添加元素1.向數組添加新元素最佳的方法是使用push（）方法。示例如下：2.也可以使用

length

屬性向數組添加新元素。示例如下：7.如何改變數組中的值varfruits=["Banana","Orange","Apple","Mango"];fruits.push("Lemon")//向fruits添加一個新元素(Lemon)varfruits=["Banana","Orange","Apple","Mango"];fruits[fruits.length]="Lemon";//向fruits添加一個新元素(Lemon)varcars=["Saab","Volvo","BMW"];cars[0]="Opel";document.getElementById("demo").innerHTML=cars[0];考核評價班級：姓名：學號任務名稱：頁面頭部固定評價項目評價標準自評情況考核情況課前自主探究（10%）完成課前學習通中下發(fā)任務￡完成￡基本完成R未完成□完成□基本完成□未完成工作過程（50%）JS特效分析能夠進行正確的分析特效所需的JS方法□完成□基本完成□未完成□完成□基本完成□未完成

獲取頁面元素能夠進行正確獲取頁面元素□完成□基本完成□未完成□完成□基本完成□未完成

if語句編寫能夠正確使用IF嵌套循環(huán)□完成□基本完成□未完成□完成□基本完成□未完成

事件監(jiān)聽能夠正確編寫事件代碼□完成□基本完成□未完成□完成□基本完成□未完成

定時器能夠正確利用定時器完成圖片的輪換□完成□基本完成□未完成□完成□基本完成□未完成項目成果（30%）工作完整能夠按時完成任務□是□是

工作規(guī)范能按企業(yè)規(guī)范要求進行操作□是□是

成果展示能準確表達，匯報成果□是□是非技術考評（10%）態(tài)度學習態(tài)度是否端正□是□是

紀律遵守紀律□是□是

協(xié)作有交流、團隊合作□是□是

文明保持安靜，清理場所□是□是總分：

課后拓展練一練：設計并制作校園網聯(lián)系我們二級頁制作，效果如圖所示校園網新聞中心介紹頁效果圖htmlh5imgjavascriptwebcsscolorhr感謝您的聆聽THANKYOUFORLISTENING

JavaScript網頁特效制作htmlh5imgjavascriptwebcsscolorhr任務一

選項卡特效制作目錄任務情境任務目標任務描述任務實施學習資源考核評價課后拓展1+X考證練習htmlh5imgjavascriptwebcolorhr任務情境在當前網絡無處不在的信息化時代，當我們?yōu)g覽一些網頁時，會發(fā)現(xiàn)有很多文章或圖片會不停地進行各種各樣的變化，這使得網站更加的生動和活潑，這些動畫的效果很大程度是由JavaScript控制的。JavaScript是Web頁面中的一種腳本編程語言，也是一種通用的、跨平臺的、基于對象和事件驅動并具有安全性的腳本語言。它不需要進行編譯，直接嵌入到HTML頁面中，把靜態(tài)頁面轉變成支持用戶交互并響應事件的動態(tài)頁面。JavaScript在網頁中常用于讀寫HTML元素、嵌入動態(tài)文本、動態(tài)修改CSS樣式表、對瀏覽器事件做出響應、表單數據驗證、檢測訪客的瀏覽器信息等等。工作任務單工作任務單任務要求在古跡頁面中“新聞聚焦”欄目基礎上制作“通知公告”欄目，并為其添加選項卡切換效果甲方提供的設計圖

如右圖所示評判標準1.能夠進行正確的頁面布局分析2.能夠進行正確的切圖3.網站文件命名正確4.代碼編寫符合標準5.樣式編寫正確，能夠達到參考效果1+X技能考核標準能掌握JavaScript基礎語言、函數、DOM的功能技能大賽考核要求1.創(chuàng)建符合并通過W3C標準驗證的代碼（HTML5，CSS3）2.能創(chuàng)建JavaScript代碼，實現(xiàn)選項卡切換效果，增強網站功能性3.JavaScript代碼具有模塊化和可重用性作品提交要求站點文件夾評判標準1.能正確運用HTML標簽、CSS樣式和JavaScript相關知識實現(xiàn)設計圖效果2.代碼編寫符合W3C標準驗證3.JavaScript語法使用正確，具有可重用性切換前：切換后：任務目標任務目標能夠掌握變量的命名規(guī)則和聲明方法。能夠掌握函數的聲明和調用方法。了解常用的HTML事件，掌握事件的使用方法。了解DOM模型的概念，掌握運用DOM訪問節(jié)點，改變節(jié)點屬性的方法。任務描述

選項卡也可以簡稱為Tab，它是將不同的內容重疊放置在某一布局區(qū)塊內，在重疊的內容區(qū)里每次只有其中一層是可見的。用戶通過鼠標點擊或移到內容區(qū)所對應的標簽上，來請示顯示該層內容區(qū)。在如今的網頁設計中，Web界面的設計趨勢是縮短頁面屏長，降低信息的顯示密度，但同時又不能犧牲可視的信息量。在這種趨勢下，Tab這種交互元素成為了一個越來越普遍的應用?；驹诿總€網站中都有這樣的效果被應用到前臺的設計中去。本次專題任務將為廣西少數民族文化資源網古跡頁面中“新聞聚焦”欄目添加選項卡切換效果。任務實施分析任務構建HTML+CSS美化頁面JavaScript特效默認狀態(tài)時，效果分析：（1）添加“通知公告”選項卡，設置未選中狀態(tài)的樣式。（2）添加“通知公告”欄目內容，設置樣式，默認不顯示。任務實施分析任務構建HTML+CSS美化頁面JavaScript特效特效后，效果分析：（1）“新聞聚焦”選項卡樣式改變，為未選中狀態(tài)樣式（.title2）。（2）“通知公告”選項卡樣式改變，為選中狀態(tài)樣式(.title1）。（3）“新聞聚焦”欄目內容不顯示（display:none）。（4）“通知公告”欄目內容顯示（display:block）。任務實施分析任務構建HTML+CSS美化頁面JavaScript特效構建HTML標準流布局+CSS頁面美化操作步驟步驟一：制作通知公告選項卡構建HTML結構構建CSS樣式步驟二：制作通知公告欄目內容構建HTML結構構建CSS樣式單擊選項卡時，調用不同的函數。步驟八任務實施分析任務構建HTML+CSS美化頁面JavaScript特效編寫JavaScript腳本，實現(xiàn)特效新建JavaScript文件聲明變量newsT，通過DOM獲取“新聞聚焦”選項卡所在的<span>標簽。聲明變量noticeT，通過DOM獲取“通知公告”選項卡所在的<span>標簽。聲明變量newsB，通過DOM獲取新聞聚焦欄目內容所在的<div>標簽。步驟一步驟二步驟三步驟四聲明變量noticeB，通過DOM獲取通知公告欄目內容所在的<div>標簽。步驟五聲明單擊“通知公告”選項卡時調用的函數步驟六聲明單擊“新聞聚焦”選項卡時調用的函數。步驟七學習資源DOM變量什么是變量？函數事件通俗的說，變量是用于存放數據的容器，就像一個裝東西的盒子，我們通過變量名獲取數據，甚至修改數據。

學習資源DOM變量變量的使用函數事件聲明變量var

sum;

//聲明一個

名稱為sum的變量

（1）var是一個JS關鍵字，用來聲明變量。

（2）sum是變量名。賦值sum=10;//給sum這個變量賦值為10注意：=

這里的等號是賦值的意思，用來把右邊的值賦給左邊的變量空間。學習資源DOM變量變量的使用函數事件變量的初始化varsum=10;//聲明變量sum，同時將10賦值給sum聲明一個變量的同時進行賦值，我們稱之為變量的初始化。更新變量varsum=10;sum=100;//最后的結果就是100,因為10已被覆蓋一個變量被重新復賦值后，它原有的值就會被覆蓋，變量值將以最后一次賦的值為準。同時聲明多個變量，只需要寫一個var，多個變量名之間使用英文逗號隔開，如：varname='zs',sex=1,age=18;學習資源DOM變量變量的命名規(guī)范函數事件由字母(A-Za-z)、數字(0-9)、下劃線(_)、美元符號($)組成，如：usrAge,num01,_name嚴格區(qū)分大小寫。varapp;和varApp;是兩個變量不能以數字開頭。18age是錯誤的不能是關鍵字、保留字。例如：var、for、while變量名必須有意義。MMDBBD nl→ age遵守駝峰命名法。首字母小寫，后面單詞的首字母需要大寫。myFirstName學習資源DOM變量什么是DOM函數事件文檔對象模型（DocumentObjectModel，簡稱DOM），是W3C組織推薦的處理可擴展標記語言（HTML或者XML）的標準編程接口，通過這些DOM接口可以改變網頁的內容、結構和樣式。

DOM樹文檔一個頁面就是一個文檔，DOM中使用document表示元素頁面中的所有標簽都是元素，DOM中使用element表示節(jié)點網頁中的所有內容都是節(jié)點（標簽、屬性、文本、注釋等），DOM中使用node表示學習資源DOM變量獲取元素函數事件在JavaScript中，通過設置節(jié)點的屬性和方法可以訪問指定節(jié)點和相關節(jié)點。訪問節(jié)點的幾種常見方法如下：方法說明getElementById(“ID”)返回匹配指定ID的節(jié)點getElementsByName(“名稱”)返回匹配指定名稱的所有節(jié)點的節(jié)點列表（集合/節(jié)點數組）getElementsByTagName(“標簽名”)返回匹配指定標簽名稱的所有節(jié)點的節(jié)點列表getElementsByClassName(“類名”)返回匹配指定類名的所有節(jié)點的節(jié)點列表querySelector('選擇器')返回匹配指定選擇器的第一個節(jié)點querySelectorAll('選擇器')返回文檔中匹配指定CSS選擇器的所有節(jié)點學習資源DOM變量操作元素函數事件元素的常用操作方法說明createElement()創(chuàng)建元素節(jié)點createTextNode()創(chuàng)建文本節(jié)點appendChild()為當前節(jié)點增加一個子節(jié)點（作為最后一個子節(jié)點）insertBefore()為當前節(jié)點增加一個子節(jié)點（插入在指定子節(jié)點前）removeChild()刪除當前節(jié)點的某子節(jié)點學習資源DOM變