第6章javascript_第1頁
第6章javascript_第2頁
第6章javascript_第3頁
第6章javascript_第4頁
第6章javascript_第5頁
已閱讀5頁,還剩73頁未讀, 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

1、1/48第一章 JavaScript本課目標n 學完本門課程后,你能夠制作網(wǎng)頁特效制作網(wǎng)頁特效實現(xiàn)表單驗證實現(xiàn)表單驗證2/48課程項目展示n 蔚藍網(wǎng)上書店演示課程項目3/48輔助學習資料推薦u教員備課時根據(jù)課程情況在此添加內(nèi)容,可以是青鳥云課堂推薦資料、也可以是教員積累的的資料,如幫助手冊、經(jīng)典書籍等此頁PPT可選,如果不需要提供輔助學習資料,則可以刪除此頁。4/48學習方法方法與與Java對比學對比學習習找相同找相同點對比點對比找不同找不同點對比點對比5/48本章目標n 掌握JavaScript的組成n 掌握JavaScript的基本語法n 會定義和使用函數(shù)n 會操作DOM元素6/48為什么

2、要學JavaScriptn 表單驗證減輕服務(wù)器端壓力n 頁面動態(tài)效果7/48什么是JavaScriptn JavaScript是一種基于對象和事件驅(qū)動的、并具有安全性能的腳本語言n JavaScript特點u向HTML頁面中添加交互行為u腳本語言,語法和Java類似u解釋性語言,邊執(zhí)行邊解釋n JavaScript組成DOMDOMJavaScriptJavaScriptECMAScriptECMAScriptBOMBOM8/48JavaScript的基本結(jié)構(gòu)n JavaScript的基本結(jié)構(gòu) 9/48語法語法JavaScript的應(yīng)用初學初學JavaScript document.write(

3、初學初學JavaScript); document.write(Hello,JavaScript);經(jīng)驗經(jīng)驗演示示例1:初學JavaScript 可以包含在文檔中的任何地方,只要保證這些代碼在被使用前已讀取并加載到內(nèi)存即可!10/48示例示例JavaScript的執(zhí)行原理應(yīng)用應(yīng)用 服務(wù)器服務(wù)器IE解析解析HTML標簽標簽和和JavaScript從服務(wù)器端下載從服務(wù)器端下載含含JavaScript的頁面的頁面返回返回 響應(yīng)響應(yīng)包含包含JavaScript的請求頁面的請求頁面發(fā)送發(fā)送 請求請求123瀏覽器輸入瀏覽器輸入IE11/48網(wǎng)頁中引用JavaScript的方式n 使用標簽n 外部JS文件n

4、 直接在HTML標簽中演示示例2:外部JavaScript文件12/48JavaScript核心語法數(shù)據(jù)類型數(shù)據(jù)類型變量變量語法約定語法約定注釋注釋控制語句控制語句運算符號運算符號數(shù)組數(shù)組輸入輸入/輸出輸出核心語法13/48核心語法變量n 先聲明變量再賦值n 同時聲明和賦值變量n 不聲明直接賦值var 用于聲明變量的關(guān)鍵字用于聲明變量的關(guān)鍵字width 變量名變量名經(jīng)驗經(jīng)驗變量可以不經(jīng)聲明而直接使用,但這種方法很容易出錯,也很難查找排錯,不推薦使用!14/48var width;width = 5;var catName= 皮皮皮皮;var x, y, z = 10;width=5;核心語法數(shù)

5、據(jù)類型n 數(shù)據(jù)類型uundefinedunullunumberubooleanustringvar width;變量變量width沒有初始值,將被賦予值沒有初始值,將被賦予值undefinedvar iNum=23; /整數(shù)整數(shù)var iNum=23.0; /浮點數(shù)浮點數(shù)true和和false表示一個空值,與表示一個空值,與undefined值相等值相等一組被引號(單引號或雙引號)括起來的文本一組被引號(單引號或雙引號)括起來的文本var string1=This is a string;15/48核心語法 typeof運算符n typeof檢測變量的返回值n typeof運算符返回值如下uu

6、ndefined:變量被聲明后,但未被賦值ustring:用單引號或雙引號來聲明的字符串uboolean:true或falseunumber:整數(shù)或浮點數(shù)uobject:javascript中的對象、數(shù)組和null演示示例3:typeof的用法16/48核心語法String對象n 屬性u字符串對象.lengthu方法u字符串對象.方法名();var str=this is JavaScript;var strLength=str.length; /長度是長度是18方法名稱方法名稱說說 明明charAt(index)返回在指定位置的字符返回在指定位置的字符indexOf(str,index)查找

7、某個指定的字符串在字符串中首次出現(xiàn)的查找某個指定的字符串在字符串中首次出現(xiàn)的位置位置substring(index1,index2)返回位于指定索引返回位于指定索引index1和和index2之間的字之間的字符串,并且包括索引符串,并且包括索引index1對應(yīng)的字符,不對應(yīng)的字符,不包括索引包括索引index2對應(yīng)的字符對應(yīng)的字符split(str)將字符串分割為字符串數(shù)組將字符串分割為字符串數(shù)組17/48核心語法數(shù)組2-1n 創(chuàng)建數(shù)組var 數(shù)組名稱數(shù)組名稱 = new Array(size);表示數(shù)組的表示數(shù)組的關(guān)鍵字關(guān)鍵字表示數(shù)組中可存放表示數(shù)組中可存放的元素總數(shù)的元素總數(shù)n 為數(shù)組元素

8、賦值var fruit= new Array(apple, orange, peach,banana);var fruit = new Array(4);fruit 0 = apple ;fruit 1 = orange ;fruit 2 = peach ;fruit 3 = banana ;n 訪問數(shù)組數(shù)組名數(shù)組名下標下標18/48語法語法核心語法數(shù)組2-2n 數(shù)組的常用屬性和方法經(jīng)驗經(jīng)驗類別類別名稱名稱描述描述屬性屬性length設(shè)置或返回數(shù)組中元素的數(shù)目設(shè)置或返回數(shù)組中元素的數(shù)目方法方法join( )把數(shù)組的所有元素放入一個字符串,通過一把數(shù)組的所有元素放入一個字符串,通過一個的分隔符進

9、行分隔個的分隔符進行分隔sort()對數(shù)組排序?qū)?shù)組排序push()向數(shù)組末尾添加一個或更多向數(shù)組末尾添加一個或更多 元素,并返回新元素,并返回新的長度的長度演示示例4:數(shù)組的應(yīng)用更多方法可查閱JavaScrpt Array對象參考手冊:http:/ - * / % + 賦值運算符賦值運算符= += -=比較運算符比較運算符 = = = != = !=邏輯運算符邏輯運算符& | !20/48if(條件條件) /JavaScript代碼代碼;else /JavaScript代碼代碼;switch (表達式表達式) case 常量常量1 : JavaScript語句語句1;break; case

10、常量常量2 : JavaScript語句語句2; break; . default : JavaScript語句語句3; for(初始化初始化; 條件條件; 增量增量) JavaScript代碼代碼; while(條件條件) JavaScript代碼代碼;核心語法邏輯控制語句n if條件語句n switch多分支語句n for、while循環(huán)語句n for-invar fruit= apple, orange, peach,banana; for(var i in fruit) document.write(fruiti+);21/48核心語法循環(huán)中斷n breakn continuevar

11、i=0;for(i=0;i=5;i+)if(i=3) break; document.write(這個數(shù)字是:這個數(shù)字是:+i+);var i=0;for(i=0;i=5;i+)if(i=3) continue; document.write(這個數(shù)字是:這個數(shù)字是:+i+);22/48核心語法注釋n 單行注釋以 / 開始,以行末結(jié)束alert(恭喜你!注冊會員成功恭喜你!注冊會員成功); /在頁同上彈出注冊會員成功的提示框在頁同上彈出注冊會員成功的提示框/*使用使用for循環(huán)運行循環(huán)運行“document.write(Hello World);”5次次使用使用document.write在頁

12、面上輸出在頁面上輸出“Hello World” */n 多行注釋以 /* 開始,以 */ 結(jié)束,符號 /* */ 指示中間的語句是該程序中的注釋23/48示例示例示例示例核心語法常用的輸入/輸出n alert()n prompt()24/48alert(提示信息提示信息);prompt(提示信息提示信息, 輸入輸入框的默認框的默認信息信息);prompt(請輸入你喜歡的顏色請輸入你喜歡的顏色,紅色紅色);prompt(請輸入你喜歡的顏色請輸入你喜歡的顏色,);語法語法語法語法核心語法語法約定n 代碼區(qū)分大小寫n 變量、對象和函數(shù)的名稱n 分號25/48學員操作統(tǒng)計字符串的個數(shù)n 需求說明u統(tǒng)計

13、包含“a”或“A”的字符串的個數(shù)練習練習完成時間:25分鐘26/48共性問題集中講解n 常見問題及解決辦法n 代碼規(guī)范問題n 調(diào)試技巧共性問題集中講解 27/48什么是函數(shù)n 函數(shù)的含義:類似于Java中的方法,是完成特定任務(wù)的代碼語句塊n 使用更簡單:不用定義屬于某個類,直接使用n 函數(shù)分類:系統(tǒng)函數(shù)和自定義函數(shù)28/48常用系統(tǒng)函數(shù)n parseInt (字符串)u將字符串轉(zhuǎn)換為整型數(shù)字 u如: parseInt (86)將字符串“86“轉(zhuǎn)換為整型值86n parseFloat(字符串)u將字符串轉(zhuǎn)換為浮點型數(shù)字 u如: parseFloat(34.45)將字符串“34.45“轉(zhuǎn)換為浮點值

14、34.45n isNaN()u用于檢查其參數(shù)是否是非數(shù)字演示示例6:類型轉(zhuǎn)換函數(shù)29/48自定義函數(shù)n 定義函數(shù)n 調(diào)用函數(shù)u函數(shù)調(diào)用一般和表單元素的事件一起使用,調(diào)用格式 語法語法function 函數(shù)名函數(shù)名( ) /JavaScript語句語句 return 返回值返回值無參函數(shù)無參函數(shù)有參函數(shù)有參函數(shù)參數(shù)參數(shù)1,參數(shù)參數(shù)2,參數(shù)參數(shù)3,可有可無可有可無30/48事件名事件名 函數(shù)名函數(shù)名( ) ;語法語法n 調(diào)用無參函數(shù),輸出調(diào)用無參函數(shù),輸出5次次“歡迎學習歡迎學習JavaScript”單擊此按鈕時,調(diào)用單擊此按鈕時,調(diào)用函數(shù)函數(shù)study( study( ) ),執(zhí)行函數(shù)體中的代碼

15、執(zhí)行函數(shù)體中的代碼調(diào)用無參函數(shù)function study( ) for(var i=0;i5;i+) document.write(歡迎學習歡迎學習JavaScript); 演示示例7:無參函數(shù)31/48示例示例調(diào)用有參函數(shù)n 根據(jù)輸入的次數(shù),顯示“歡迎學習JavaScript“單擊此按鈕時,調(diào)用函數(shù)study (count ),執(zhí)行函數(shù)體中的代碼function study(count) for(var i=0;icount;i+) document.write(歡迎學習歡迎學習JavaScript); 演示示例8:有參函數(shù)32/48示例示例學員操作編寫一個四則運算函數(shù)n 需求說明u編寫函

16、數(shù),實現(xiàn)使用prompt輸入兩個數(shù)和運算符號,并計算兩個數(shù)的操作結(jié)果練習練習完成時間:20分鐘33/48共性問題集中講解n 常見問題及解決辦法n 代碼規(guī)范問題n 調(diào)試技巧共性問題集中講解 34/48變量的作用域n 全局變量n 局部變量代碼閱讀代碼閱讀 var i=20; function first( ) var i=5; for(var j=0;ji) document.write(t); else document.write(i); first( ); 在在prompt()彈出的輸入框中彈出的輸入框中輸入輸入67,頁面輸出什么內(nèi)容?頁面輸出什么內(nèi)容?演示示例9:變量的作用域35/48事件

17、名稱名稱說明說明onload一個頁面或一幅圖像完成加載onlick鼠標單擊某個對象onmouseover鼠標指導移到某元素上onkeydown某個鍵盤按鍵被按下onchange域的內(nèi)容被改變36/48學員操作統(tǒng)計考試科目的成績n 需求說明u使用prompt()方法輸入考試科目的數(shù)量,要求數(shù)量必須是非零、非負數(shù)的數(shù)值類型,否則給出相應(yīng)提示并退出程序u根據(jù)考試科目的數(shù)量,使用prompt()方法輸入各科的考試成績并累加,要求成績必須是非負數(shù)的數(shù)值類型,否則給出相應(yīng)提示并退出程序u如果各項輸入正確,則彈出總成績練習練習完成時間:20分鐘37/48共性問題集中講解n 常見問題及解決辦法n 代碼規(guī)范問題

18、n 調(diào)試技巧共性問題集中講解 38/48總結(jié) JavaScript的組成和基本結(jié)構(gòu) JavaScript基本結(jié)構(gòu)和在網(wǎng)頁中引入JavaScript核心語法程序調(diào)試:Chrome開發(fā)工具和alert函數(shù)變量的聲明和賦值數(shù)據(jù)類型數(shù)組運算符邏輯控制語句注釋語法約定常用系統(tǒng)函數(shù)自定義函數(shù)變量的作用域事件JavaScript基礎(chǔ)39/48本章目標n 會使用getElementById( )方法訪問DOM元素n 會使用getElementsByName( )方法訪問DOM元素n 會使用getElementsByTagName( )方法訪問DOM元素 n 會使用定時函數(shù)和Date對象制作時鐘特效40/45B

19、OM模型2-1整個整個BOMBOM的核心的核心41/45n BOM:瀏覽器對象模型(Browser Object Model)uBOM提供了獨立于內(nèi)容的、可以與瀏覽器窗口進行互動的對象結(jié)構(gòu)BOM模型2-2n BOM可實現(xiàn)功能u彈出新的瀏覽器窗口u移動、關(guān)閉瀏覽器窗口以及調(diào)整窗口的大小u頁面的前進、后退42/45window對象n 常用屬性n 常用方法43/45window對象的常用屬性n 常用的屬性屬性名稱屬性名稱說說 明明history 有關(guān)客戶訪問過的有關(guān)客戶訪問過的URL的信息的信息location有關(guān)當前有關(guān)當前 URL 的信息的信息語法語法window.屬性名屬性名= 屬性值屬性值

20、window.location=http:/ ; 示例示例表示跳轉(zhuǎn)到北大青鳥首頁44/45window對象的常用方法n 常用的方法方法名稱方法名稱說說 明明prompt( )顯示可提示用戶輸入的對話框顯示可提示用戶輸入的對話框alert( )顯示帶有一個提示信息和顯示帶有一個提示信息和一個一個確定按鈕的警示框確定按鈕的警示框 confirm( )顯示一個顯示一個帶有提示信息、確定和取消按鈕的對話框帶有提示信息、確定和取消按鈕的對話框 close( )關(guān)閉瀏覽器窗口關(guān)閉瀏覽器窗口open( )打開一個新的瀏覽器窗口,加載給定打開一個新的瀏覽器窗口,加載給定 URL 所指定的所指定的文檔文檔set

21、Timeout( )在指定的毫秒數(shù)后調(diào)用函數(shù)或計算表達式在指定的毫秒數(shù)后調(diào)用函數(shù)或計算表達式setInterval( )按照指定的周期(以毫秒計)來調(diào)用函數(shù)或表達式按照指定的周期(以毫秒計)來調(diào)用函數(shù)或表達式45/45confirm()方法n confirm()與alert ()、 prompt()區(qū)別ualert( ):一個參數(shù),僅顯示警告對話框的消息,無返回值,不能對腳本產(chǎn)生任何改變uprompt( ):兩個參數(shù),輸入對話框,用來提示用戶輸入一些信息,單擊“取消”按鈕則返回null,單擊“確定”按鈕則返回用戶輸入的值,常用于收集用戶關(guān)于特定問題而反饋的信息uconfirm( ):一個參數(shù),

22、確認對話框,顯示提示對話框的消息、“確定”按鈕和“取消”按鈕,單擊“確定”按鈕返回true,單擊“取消”按鈕返回false,因此與if-else語句搭配使用confirm(對話框中顯示的純文本對話框中顯示的純文本)語法語法示例示例 var flag=confirm(確認要刪除此條信息嗎?確認要刪除此條信息嗎?); if(flag=true) alert(刪除成功!刪除成功!); else alert(你取消了刪除你取消了刪除);演示示例1:確認對話框46/45n confirm():將彈出一個確認對話框open()方法47/45語法語法屬性名稱屬性名稱說說 明明height、width窗口文檔

23、顯示區(qū)的高度、寬度。以像素計窗口文檔顯示區(qū)的高度、寬度。以像素計left、top窗口的窗口的x坐標、坐標、y坐標坐標。以像素計以像素計toolbar=yes | no |1 | 0是否顯示瀏覽器的工具欄。黙認是是否顯示瀏覽器的工具欄。黙認是yesscrollbars=yes | no |1 | 0是否顯示滾動條。黙認是是否顯示滾動條。黙認是yeslocation=yes | no |1 | 0是否顯示地址地段。黙認是是否顯示地址地段。黙認是yesstatus=yes | no |1 | 0是否添加狀態(tài)欄。黙認是是否添加狀態(tài)欄。黙認是yesmenubar=yes | no |1 | 0是否顯示菜

24、單欄。黙認是是否顯示菜單欄。黙認是yesresizable=yes | no |1 | 0窗口是否可調(diào)節(jié)尺寸。黙認是窗口是否可調(diào)節(jié)尺寸。黙認是yestitlebar=yes | no |1 | 0是否顯示標題欄。黙認是是否顯示標題欄。黙認是yesfullscreen=yes | no |1 | 0是否使用全屏模式顯示瀏覽器。黙認是是否使用全屏模式顯示瀏覽器。黙認是no。處于全屏模式的窗口必須同時處于劇院模式處于全屏模式的窗口必須同時處于劇院模式演示示例2:window對象操作窗口n 窗口特征window.open(彈出窗口的彈出窗口的url,窗口名稱窗口名稱,窗口特征窗口特征”)學員操作制作簡

25、易的當當購物車頁面n 需求說明u單擊“半閉”按鈕時,關(guān)閉當前頁面購物車頁面u單擊“移入收藏”彈出收藏提示u單擊“刪除”彈出確認刪除提示u單擊“結(jié)算”按鈕,彈出結(jié)算信息頁面窗口練習練習完成時間:20分鐘48/45共性問題集中講解n 常見問題及解決辦法n 代碼規(guī)范問題n 調(diào)試技巧共性問題集中講解 49/45history對象n 常用方法名稱名稱說說 明明back()加載加載 history 對象列表中的前一個對象列表中的前一個URLforward()加載加載 history 對象列表中的下一個對象列表中的下一個URL go()加載加載 history 對象列表中的某個具體對象列表中的某個具體URL

26、history.back()history.forward() history.go(-1)history.go(1) 等價等價瀏覽器中的“前進”瀏覽器中的“后退”等價等價50/45location對象n 常用屬性名稱名稱說說 明明host設(shè)置或返回主機名和當前設(shè)置或返回主機名和當前URL的端口號的端口號hostname設(shè)置或返回當前設(shè)置或返回當前URL的主機名的主機名href設(shè)置或返回完整的設(shè)置或返回完整的URL n 常用方法名稱名稱說說 明明reload()重新加載當前文檔重新加載當前文檔replace()用新的文檔替換當前文檔用新的文檔替換當前文檔51/45location和histor

27、y對象的應(yīng)用n 主頁面使用href實現(xiàn)跳轉(zhuǎn)和刷新本頁查看鮮花詳情查看鮮花詳情 刷新本頁刷新本頁返回主頁面返回主頁面演示示例3:location和histor y對象52/45示例示例學員操作查看一年四季變化n 需求說明u制作查看一年四季變化的主頁面u主頁面實現(xiàn)鏈接到其他頁面及刷新本頁功能u其他頁面實現(xiàn)前進、后退和鏈接到其他頁面功能練習練習完成時間:20分鐘53/45共性問題集中講解n 常見問題及解決辦法n 代碼規(guī)范問題n 調(diào)試技巧共性問題集中講解 54/45Document對象n 常用屬性名稱名稱說說 明明referrer返回載入當前文檔返回載入當前文檔的的URLURL返回當前文檔的返回當前文

28、檔的URL語法語法document.referrerdocument.URL55/45Document對象應(yīng)用2-1praise.html頁面login.html頁面56/45Document對象應(yīng)用2-2n 判斷頁面是否是鏈接進入n 自動跳轉(zhuǎn)到登錄頁面var preUrl=document.referrer; /載入本頁面文檔的地址載入本頁面文檔的地址if(preUrl=) document.write(您不是從領(lǐng)獎頁面進入,您不是從領(lǐng)獎頁面進入,5秒后將自動秒后將自動 跳轉(zhuǎn)到登錄頁面跳轉(zhuǎn)到登錄頁面); setTimeout(javascript:location.href=login.ht

29、ml,5000);演示示例4:判斷頁面來源并跳轉(zhuǎn)57/45Document對象的常用方法2-1n Document對象的常用方法名稱名稱說說 明明getElementById()返回對擁有指定返回對擁有指定idid的第一的第一個對象的引用個對象的引用getElementsByName()返回帶有指定名稱的對象返回帶有指定名稱的對象的集合的集合getElementsByTagName()返回帶有指定標簽名的對返回帶有指定標簽名的對象的集合象的集合write()向文檔寫文本、向文檔寫文本、HTML表表達式或達式或JavaScript代碼代碼對象的id唯一相同name屬性相同的元素58/45Docu

30、ment對象訪問頁面元素n 動態(tài)改變層、標簽中的內(nèi)容n 訪問相同name的元素n 訪問相同標簽的元素演示示例5:document對象的應(yīng)用59/45Document對象的常用方法2-2n 動態(tài)改變層、標簽中的內(nèi)容n 訪問相同name的元素n 訪問相同標簽的元素document.getElementById(book).innerHTML=現(xiàn)象級全球暢銷書現(xiàn)象級全球暢銷書;var aInput=document.getElementsByName(season); var sStr=; for(var i=0;iaInput.length;i+) sStr+=aInputi.value+&nbs

31、p;  document.getElementById(replace).innerHTML=sStr;var aInput=document.getElementsByTagName(input);var sStr=;for(var i=0;iaInput.length;i+) sStr+=aInputi.value+  document.getElementById(replace).innerHTML=sStr;60/45學員操作完善當當購物車頁面n 需求說明u在練習1的基礎(chǔ)上完善當當購物車頁面u計算商品總計練習練習完成時間:20分鐘61/45共性問題集中講

32、解n 常見問題及解決辦法n 代碼規(guī)范問題n 調(diào)試技巧共性問題集中講解 62/45JavaScript內(nèi)置對象n Array:用于在單獨的變量名中存儲一系列的值n String:用于支持對字符串的處理n Math:用于執(zhí)行常用的數(shù)學任務(wù),它包含了若干個數(shù)字常量和函數(shù)n Date:用于操作日期和時間63/45Date對象2-1n 如何在頁面中顯示當前時間的小時、分鐘和秒?問題問題分析分析n 使用Date對象獲得時、分、秒64/45Date對象2-1var 日期對象日期對象=new Date(參數(shù)參數(shù))參數(shù)參數(shù)格式:格式:MM DD,YYYY,hh:mm:ssvar today=new Date()

33、; /返回當前日期和時間返回當前日期和時間var tdate=new Date(september 1,2013,14:58:12);語法語法示例示例65/45Date對象的方法n 常用方法方法方法說說 明明 getDate()返回返回 Date 對象的一個月中的每一天,其值介于對象的一個月中的每一天,其值介于131之間之間getDay()返回返回 Date 對象的星期中的每一天,其值介于對象的星期中的每一天,其值介于06之間之間getHours()返回返回 Date 對象的小時數(shù),其值介于對象的小時數(shù),其值介于023之間之間getMinutes()返回返回 Date 對象的分鐘數(shù),其值介于對

34、象的分鐘數(shù),其值介于059之間之間getSeconds()返回返回 Date 對象的秒數(shù),其值介于對象的秒數(shù),其值介于059之間之間getMonth()返回返回 Date 對象的月份,其值介于對象的月份,其值介于011之間之間getFullYear()返回返回 Date 對象的年份,其值為對象的年份,其值為4位數(shù)位數(shù)getTime()返回自某一時刻(返回自某一時刻(1970年年1月月1日)以來的毫秒數(shù)日)以來的毫秒數(shù)66/45function disptime()var today = new Date(); var hh = today.getHours(); var mm = today.

35、getMinutes();var ss = today.getSeconds();document.getElementById(myclock).innerHTML=現(xiàn)在是現(xiàn)在是:+hh +:+mm+: +ss;disptime();制作時鐘特效n 使用Date對象的方法顯示當前時間的小時、分鐘和秒獲得小時、分鐘、秒數(shù)獲得小時、分鐘、秒數(shù)演示示例6:時鐘特效67/45示例示例Math對象n 常用方法方法方法說說 明明 示例示例ceil()對數(shù)進行上舍入對數(shù)進行上舍入Math.ceil(25.5);返回返回26Math.ceil(-25.5);返回返回-25floor()對數(shù)進行下舍入對數(shù)進行

36、下舍入Math.floor(25.5);返回返回25Math.floor(-25.5);返回返回-26round()把數(shù)四舍五入為最接近的數(shù)把數(shù)四舍五入為最接近的數(shù)Math.round(25.5);返回返回26Math.round(-25.5);返回返回-26random()返回返回01之間的隨機數(shù)之間的隨機數(shù)Math.random();例如:例如:0.6273608814137365var iNum=Math.floor(Math.random()*98+2);提問提問n 如何實現(xiàn)返回的整數(shù)范圍為299?68/45隨機選擇顏色演示示例7:選擇顏色69/45示例示例function selCo

37、lor() var color=Array(紅色紅色,黃色黃色,藍色藍色,綠色綠色,橙色橙色,青色青色,紫色紫色); var num=Math.ceil(Math.random()*7)-1; document.getElementById(color).innerHTML=colornum;Date對象n 制作的時鐘特效示例中,時間為什么不改變?問題問題分析分析n 由于時間在不停地走,所以應(yīng)該每隔1秒調(diào)用顯示時間的方法,如何解決?定時函數(shù)70/45setTimeout(調(diào)用的函數(shù)調(diào)用的函數(shù),等待的毫秒數(shù)等待的毫秒數(shù))定時函數(shù)2-1n setTimeout()var myTimesetTime

38、out(disptime() , 1000 );1 1秒秒(1000(1000毫秒毫秒) )之后執(zhí)之后執(zhí)行函數(shù)行函數(shù)disptimedisptime()()一次一次語法語法function timer() var t=setTimeout(alert(3 seconds),3000);演示示例8:定時函數(shù)var t= setInterval(alert(3 seconds),3000);71/45示例示例定時函數(shù)2-2如果要多次調(diào)用,使用setInterval()或者讓disptime()自身再次調(diào)用setTimeout()var myTimesetInterval(disptime() , 1000 );每隔每隔1 1秒秒(1000(1000毫秒毫秒) )執(zhí)執(zhí)行函數(shù)行函數(shù)disptimedisptime()()一次一次n setInterval()語法語法演示示例9:時鐘特效動起來了72/45setInterval(調(diào)用的函數(shù)

溫馨提示

  • 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)方式做保護處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容,請與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論