項目二

JavaScript網頁特效制作任務二

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

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

效果圖（有特效）圖1

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

name:value

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

保存一個值時，可以使用變量，保存多個值（一組值）時，可以使用數組。若要保存龐大的信息集合時，則JavaScript中的對象表達結構更清晰、更強大。3.創建對象的三種方式：在JavaScript中，我們可以采用以下三種方式創建對象（object）：●利用字面量創建對象。●利用newObject創建對象。●利用構造函數創建對象。學習資源JavaScrip對象內置對象定時器3.1利用字面量創建對象對象字面量：就是大括號里面包含了表達這個具體事物（對象）的屬性和方法。大括號里面采取鍵值對的形式表示。鍵：相當于屬性名。值：相當于屬性值，可以是任意類型的值（如數字類型、字符串類型、布爾類型、函數類型等）3.2利用newObject創建對象●Object()：第一個字母大寫。●newObject()：需要new關鍵字。●使用的格式：對象.屬性=值。學習資源JavaScrip對象內置對象定時器3.3利用構造函數創建對象。構造函數是一種特殊的函數，主要用來初始化對象，即為對象成員變量賦初始值，它總與new關鍵字一起使用。我們可以把對象中一些公共的屬性和方法抽取出來，然后封裝到這個函數里面。構造函數的語法格式：function構造函數名(){this.屬性=值；this.方法=function()；}調用構造函數：new構造函數名()注意：●構造函數名首字母大寫。●函數內的屬性和方法前面須添加this，表示當前對象的屬性和方法。●構造函數不需要return就可以返回結果。●當我們創建對象的時候，必須用new來調用構造函數。學習資源JavaScrip對象內置對象定時器內置對象是指JS語言自帶的一些對象，這些對象供開發者使用，并提供了一些常用的或者是最基本且必要的功能（屬性和方法）。內置對象最大的優點就是能幫助我們快速開發。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實現定時的一種方法，很多頁面特效的制作都離不開定時器，如在線時鐘特效、圖片輪播特效、廣告彈窗特效等。只要是與自動執行有關的特效，都可以通過定時器來實現。JavaScrip對象內置對象定時器定時器的分類setTimeout()延遲定時器setInterval()循環定時器定時器的清除

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

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