項(xiàng)目二

JavaScript網(wǎng)頁(yè)特效制作任務(wù)二

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

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

效果圖（有特效）圖1

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

name:value

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

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

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

獲取方法用于獲取日期的某個(gè)部分（來(lái)自日期對(duì)象的信息）。右邊面是最常用的方法（以字母順序排序）：

如果括號(hào)里面有時(shí)間，就返回參數(shù)里面的時(shí)間。例如日期格式字符串為‘2022-2-5’，可以寫(xiě)成newDate('2022-2-5')或者newDate('2022/2/5')如果Date()不寫(xiě)參數(shù)，就返回當(dāng)前時(shí)間；如果Date()里面寫(xiě)參數(shù)，就返回括號(hào)里面輸入的時(shí)間。JavaScrip對(duì)象內(nèi)置對(duì)象定時(shí)器學(xué)習(xí)資源什么是定時(shí)器？

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

每次使用定時(shí)器時(shí)，都必須清除定時(shí)器。每一個(gè)定時(shí)器開(kāi)啟后，都會(huì)返回一個(gè)對(duì)應(yīng)的ID，通過(guò)這個(gè)ID就清除定時(shí)器。以下為清除定時(shí)器的方法：清除定時(shí)器作用clearTimeout(timer)用于清除setTimeoutclearInterval(timer)用于清除setInterval學(xué)習(xí)資源JavaScrip對(duì)象內(nèi)置對(duì)象定時(shí)器1.延遲定時(shí)器setTimeout(code,millisec)參數(shù)描述code必需。要調(diào)用的函數(shù)后要執(zhí)行的JavaScript代碼串。millisec必須。在執(zhí)行代碼前需等待的毫秒數(shù)。

2.循環(huán)定時(shí)器setInterval(code,millisec)參數(shù)描述code必須。要調(diào)用的函數(shù)后要執(zhí)行的JavaScript代碼串。millisec必須。周期性執(zhí)行或調(diào)用code之間的時(shí)間間隔，以毫秒計(jì)小貼士在使用定時(shí)器時(shí)，第一個(gè)參數(shù)code傳入的是函數(shù)，不能給作為參數(shù)的函數(shù)加括號(hào)。setInterval(nowTime,1000);正確寫(xiě)法setInterval(nowTime(),1000);錯(cuò)誤寫(xiě)法注：添加括號(hào)表明直接調(diào)用函數(shù)，沒(méi)有括號(hào)表明這個(gè)函數(shù)是作為參數(shù)傳入，并不會(huì)被直接調(diào)用，而是在滿足條件后調(diào)用，這些的條件指的是每隔1s調(diào)用一次定時(shí)器的用法考核評(píng)價(jià)班級(jí)：姓名：學(xué)號(hào)任務(wù)名稱：古跡頁(yè)面制作評(píng)價(jià)項(xiàng)目評(píng)價(jià)標(biāo)準(zhǔn)自評(píng)情況考核情況課前自主探究（10%）完成課前學(xué)習(xí)通中下發(fā)任務(wù)□完成□基本完成□未完成□完成□基本完成□未完成工作過(guò)程（50%）布局結(jié)構(gòu)分析能夠進(jìn)行正確的頁(yè)面布局劃分□完成□基本完成□未完成□完成□基本完成□未完成頁(yè)面切圖能夠進(jìn)行正確的切圖□完成□基本完成□未完成□完成□基本完成□未完成網(wǎng)站搭建網(wǎng)站文件命名正確□完成□基本完成□未完成□完成□基本完成□未完成HTML代碼編寫(xiě)代碼編寫(xiě)符合W3C標(biāo)準(zhǔn)□完成□基本完成□未完成□完成□基本完成□未完成CSS代碼編寫(xiě)樣式書(shū)寫(xiě)正確，并能實(shí)現(xiàn)參考效果□完成□基本完成□未完成□完成□基本完成□未完成項(xiàng)目成果（20%）工作完整能夠按時(shí)完成任務(wù)□是□是工作規(guī)范能按企業(yè)規(guī)范要求進(jìn)行操作□是□是成果展示能準(zhǔn)確表