微信小程序開發(fā) 教案 3.10 教案-隨機數(shù)求和

1、第3章 微信小程序概述任務(wù)3.10隨機數(shù)求和課時內(nèi)容隨機數(shù)求和課時1教學(xué)目標(biāo)掌握J(rèn)avaScript中的Array和Number對象中的相關(guān)函數(shù)教學(xué)重點JavaScript中的Array和Number對象中的相關(guān)函數(shù)教學(xué)難點JavaScript中的Array和Number對象中的相關(guān)函數(shù)教學(xué)設(shè)計.教學(xué)思路：通過實訓(xùn)任務(wù)隨機數(shù)求和的制作來讓學(xué)生掌握J(rèn)avaScript中的Array和 Number對象中的相關(guān)函數(shù)。.教學(xué)手段：多媒體+計算機.教學(xué)資料：教材、多媒體課件教學(xué)內(nèi)容一、任務(wù)描述設(shè)計一個小程序，運行后產(chǎn)生 組100以內(nèi)的五個隨機數(shù)，要求保留2位小數(shù)，顯示出這隨機 產(chǎn)生五個數(shù)的和；當(dāng)點擊“

2、求隨機數(shù)的和”按鈕時，首先產(chǎn)生一組新的五個隨機數(shù)，并計算顯示出 這組隨機數(shù)的和。二、導(dǎo)入知識點本任務(wù)用到了 JavaScript中的Array和Number對象中的相關(guān)函數(shù)。JavaScript中的對象包括：字 符串、數(shù)字、數(shù)組、日期，等等。對象是擁有屬性和方法的數(shù)據(jù)，屬性是靜態(tài)數(shù)據(jù)，方法是能夠在 對象上執(zhí)行的動作，即動態(tài)數(shù)據(jù)。l.JavaScript 中的 Array 對象用于在單個的變量中存儲多個值，其常用屬性和方法如表3.6所示。表3.6 Array對象常用屬性和方法屬性和方法說明length設(shè)置或返回數(shù)組中元素的數(shù)目concat()連接兩個或更多的數(shù)組，并返回結(jié)果join()把數(shù)組的所

3、有元素放入一個字符串。元素通過指定的分隔符進行分隔POP()刪除并返回數(shù)組的最后一個元素push()向數(shù)組的末尾添加一個或更多元素，并返回新的長度reverse()反向倒序數(shù)組中的元素shift()刪除并返回數(shù)組的第個元素slice()從某個已有的數(shù)組返回選定的元素sort()對數(shù)組的元素進行排序splice()刪除元素，并向數(shù)組添加新元素toSource()返回該對象的源代碼toStringf)把數(shù)組轉(zhuǎn)換為字符串，并返回結(jié)果toLocaleString()把數(shù)組轉(zhuǎn)換為本地數(shù)組，并返回結(jié)果unshift()向數(shù)組的開頭添加一個或更多元素，并返回新的長度valueOf()返回數(shù)組對象的原始值2J

4、avaScript 中的 Number 對象該對象是原始數(shù)值的包裝對象，其常用屬性和方法如表3.7所示。表3.7 Number對象常用屬性和方法3.本此任務(wù)使用了以下知識點：屬性和方法說明MAX_VALUE可表示的最大的數(shù)MIN_VALUE可表示的最小的數(shù)NaN非數(shù)字值NEGATIVEJNFINITY負(fù)無窮大，溢出時返回該值POSITIVEJNFINITY正無窮大，溢出時返回該值toString()把數(shù)字轉(zhuǎn)換為字符串，使用指定的基數(shù)toLocaleString()把數(shù)字轉(zhuǎn)換為字符串，使用本地數(shù)字格式順序toFixed()把數(shù)字轉(zhuǎn)換為字符串，結(jié)果的小數(shù)點后有指定位數(shù)的數(shù)字toExponentia

5、l()把對象的值轉(zhuǎn)換為指數(shù)計數(shù)法toPrecision()把數(shù)字格式化為指定的長度valueOf()返回一個Number對象的基本數(shù)字值(1) JavaScript代碼中使用語句var r=(Math.random()*100).toFixed*1產(chǎn)生一個隨機數(shù)后乘1,并使 用函數(shù)toFixed將產(chǎn)生的隨機數(shù)保留小數(shù)點后2位。(2) JavaScript代碼中Array對象函數(shù)的使用方法，并能產(chǎn)生5個隨機數(shù)。(3) JavaScript代碼中的Number對象函數(shù)的使用方法。三,實現(xiàn)效果根據(jù)任務(wù)描述可以做出如圖3.16所示的效果。初始界面如圖(a)所示，點擊“產(chǎn)生新的隨機 數(shù)”按鈕后，將產(chǎn)生一

6、列新的隨機數(shù)，并對這些隨機數(shù)進行求和，如圖(b)和圖(c)所示。WeCharr10595% 10231023Webcin1023WebcinWebcin Q五個隨機數(shù)求和隨機產(chǎn)生的五個數(shù)分別為： 99.8245.624.0721.341.51五個隨機數(shù)的和為：192.33999999999997五個隨機數(shù)求和隨機產(chǎn)生的五個數(shù)分別為：27.1379.1867.971023WebcinWebcin Q五個隨機數(shù)求和隨機產(chǎn)生的五個數(shù)分別為： 99.8245.624.0721.341.51五個隨機數(shù)的和為：192.33999999999997五個隨機數(shù)求和隨機產(chǎn)生的五個數(shù)分別為：27.1379.186

7、7.9781.6253.47五個隨機數(shù)的和為：309.37五個隨機數(shù)求和隨機產(chǎn)生的五個數(shù)分別為：14.5139.4879.5719.5611.13五個隨機數(shù)的和為：164.25(a)初始界面(b)新的隨機數(shù)列I(c)新的隨機數(shù)列II四任務(wù)實現(xiàn).編寫index.wxml文件代碼代碼主要通過列表渲染的方法將邏輯層產(chǎn)生的隨機數(shù)列表示在屏幕上，并顯示隨機數(shù)列的和, 最下面添加一個按鈕，用于綁定產(chǎn)生新的隨機數(shù)的事函數(shù)。.編寫index.wxss文件代碼.編寫index.js文件代碼代碼中主要包含了全局變里和全局函數(shù)的定義，并在Page函數(shù)中定義了 0nLoad函數(shù)和newRand函 數(shù)。(1)全局變重的

8、定義。首先義1個全局?jǐn)?shù)組變重rand和1個全局普通變重sum/and用來存儲產(chǎn) 生的隨機數(shù)列，sum用來存儲隨機數(shù)列的和。(2)全局函數(shù)的定義。定義createRand。函數(shù)用于產(chǎn)生隨機數(shù)列并求和，該函數(shù)首先利用for循環(huán)產(chǎn) 生6個隨機數(shù)并將這些數(shù)據(jù)添加到數(shù)組中。Math.random。函數(shù)用于產(chǎn)生01之間的隨機數(shù)， Math.random()*100能夠產(chǎn)生0100之間的隨機數(shù)，toFixed函數(shù)用于實現(xiàn)將產(chǎn)生的隨機數(shù)保留小數(shù) 點后2位，乘1的目的是將產(chǎn)生的隨機數(shù)字符串轉(zhuǎn)換為數(shù)值類型。rand.push(r)用于將產(chǎn)生的隨機數(shù)r添加到rand數(shù)組中。console.log(sum)函數(shù)用于在

9、控制臺顯示sum數(shù)據(jù)，這種方法對程序調(diào)試很有幫助。(5)在onLoad()和newRand。方法中調(diào)用createRand。方法產(chǎn)生隨機數(shù)列并求和，然后通過 this. setData。方法將結(jié)果渲染到視圖層。練習(xí)課時內(nèi)容遞歸求和計算器課時1教學(xué)目標(biāo)掌握J(rèn)avaScript中的邏輯運算符 掌握button組件的使用方法教學(xué)重點JavaScript中的邏輯運算符 button組件的使用方法教學(xué)難點button組件的使用方法教學(xué)設(shè)計.教學(xué)思路：通過實訓(xùn)任務(wù)成績計算器的制作來讓學(xué)生掌握J(rèn)avaScript中的邏輯運算符 與button組件的使用方法.教學(xué)手段：多媒體+計算機.教學(xué)資料：教材、多媒體課

10、件教學(xué)內(nèi)容一、任務(wù)描述設(shè)計一個計算學(xué)生平均成績的小程序。當(dāng)輸入學(xué)生信息和各門功課成績并提交后，能夠顯示學(xué) 生的信息及平均成績。二、導(dǎo)入知識點本任務(wù)涉及JavaScript中的邏輯運算符和button組件的使用方法。1. JavaScript中的邏輯運算符用于測定變量或值之間的邏輯關(guān)系，其中x=6, y=7,如表3.2解釋了邏輯運算符的含義。表3.2 JavaScript中的邏輯運算符運算符描述例子&and(xvlO&yl)為 falseIIor(x=6|y=6)為 true!*not(x=y)為 false.button按鈕組件該組件常用屬性如表3.3所示。表3.3 button組件常用屬性屬

11、性size type和form-type的合法值如表3.4所示。屬性類型默認(rèn)值必填說明sizestringdefault否按鈕的大小typestringdefault否按鈕的樣式類型plainbooleanFALSE否按鈕是否鏤空，背景色透明disabledbooleanFALSE否是否禁用loadingbooleanFALSE否名稱前是否帶loading圖標(biāo)form-typestring否用于form組件，點擊分別會觸發(fā)form 組件的submit/reset事件表3.4屬性size、type和form-type的合法值屬性合法值說明sizedefault默認(rèn)大小mini小尺寸typepri

12、mary綠色default白色warn紅色form-typesubmit提交表單reset重置表單三,實現(xiàn)效果根據(jù)本次任務(wù)的描述，可做出如圖3.14所示的效果。初始界面如圖（a）初始界面所示，當(dāng)輸入 姓名時，屏幕下面顯示中文的輸入鍵盤，如圖（b）輸入信息時的界面所示，當(dāng)輸入成績時，屏幕下 面顯示數(shù)字鍵盤；輸入完成后點擊“提交”按鈕，在按鈕下方將顯示學(xué)生姓名及成績，如圖（c）提交后的界面所示。在輸入過程中，如果某項內(nèi)容為空，點擊“提交”按鈕后屏幕沒有反應(yīng)。w*Chrr11:12Weixin成績計算器姓名:WeCh-tv11:14V.e xi n96% mi*成績計算器姓名:語文或旗:數(shù)學(xué)成綾:

13、WeChatr121496%Weixin Q成績計算器提交姓名：邦偉語文成績：89數(shù)學(xué)成績：w*Chrr11:12Weixin成績計算器姓名:WeCh-tv11:14V.e xi n96% mi*成績計算器姓名:語文或旗:數(shù)學(xué)成綾: WeChatr121496%Weixin Q成績計算器提交姓名：邦偉語文成績：89數(shù)學(xué)成績：96數(shù)學(xué)成績：92平均分：92.33333333333333語文成績數(shù)學(xué)成績數(shù)學(xué)成績平均分:數(shù)學(xué)成殘:平均分:(a)初始界面(b)輸入信息時的界面(c)提交后的界面圖3.14(a)初始界面四,任務(wù)實現(xiàn)(1)編寫index.wxml文件代碼。代碼中主要包含用于輸入學(xué)生姓名和成績的input輸入框；(2)編寫index.wxss文件代碼。該文件中定義了 index.wxml文件中使用的各種樣式，包括：page、 placeholder input、 button content 和.content-item。(3)編寫index.wxss文件代碼。該文件中定義了 index.wxml文件中使用的各種樣式，包括：page、 box titile placeholderinput button、content 和.conte