《JavaScript與jQuery網(wǎng)頁前端開發(fā)與設計-第2版》課件 CH13 天氣預報查詢的設計與實現(xiàn)；CH14 思政學習答題的設計與實現(xiàn)

JavaScript與jQuery

網(wǎng)頁前端開發(fā)與設計-第2版學校名稱：XXXX主講教師：XXXX第13章天氣預報查詢的設計與實現(xiàn) 本章學習目標學習掌握第三方服務平臺密鑰申請和調(diào)用方法；學習掌握JavaScript和jQuery基礎知識；學習掌握jQueryAJAX的用法實現(xiàn)服務器請求和回調(diào)處理。目錄13.1案例背景 13.2案例需求 13.3準備工作 13.4界面設計 13.5天氣預報查詢的實現(xiàn) 13.1案例背景13.1案例背景探索我國的氣象歷史文脈，就一定會提到北極閣。北極閣是南京城內(nèi)的一座丘陵，又名欽天山，位于鼓樓東面，北依臺城、玄武湖，西連鼓樓崗，東連覆舟山，因劉宋時山上建立日觀臺而得名。古名“雞鳴山”，因形似雞籠又名“雞籠山”，明時“國朝于山巔置儀表，以測玄緯，名觀象臺，更名欽天山”。13.1案例背景北極閣氣象歷史源遠流長。早在南北朝時，北極閣即建有“靈臺候樓”，用以觀天測候；明，洪武年間，在此建“觀象臺”，又名“欽天臺”，既觀氣象又觀天象；清，康熙皇帝第六次下江南，曾登臺遠眺，親筆“曠觀”；民國時期，卓越的氣象、地理學家——竺可楨先生，在此創(chuàng)建中國歷史上第一個氣象研究所。13.1案例背景我國近、現(xiàn)代一批頂級氣象學家，如涂長望、趙九章、葉篤正、陶詩言等都曾在此工作、學習過。因此，南京北極閣被海內(nèi)外氣象學界譽為中國近代氣象發(fā)祥地。新中國成立至今，北極閣一直是江蘇氣象臺所在地，是江蘇氣象業(yè)務服務中心。1999年，北極閣被國家科技部、教育部、中央宣傳部和中國科協(xié)命名為“全國青少年科技教育基地”。2000年，北極閣被南京大學選定為“產(chǎn)學科研基地”。北極閣既見證了民族歷史的滄桑一隅，也經(jīng)歷了氣象創(chuàng)業(yè)的悠久歷程。13.2案例需求本章將綜合應用jQueryAJAX技術開發(fā)一個天氣預報查詢頁面，用戶通過切換城市名稱可以查詢該地區(qū)當天的天氣情況。為達到真實效果，本示例將選用一款具有氣象數(shù)據(jù)服務的免費開源API作為AJAX請求接口。13.2案例需求本章將綜合應用jQueryAJAX技術開發(fā)一個天氣預報查詢頁面，用戶通過切換城市名稱可以查詢該地區(qū)當天的天氣情況。為達到真實效果，本示例將選用一款具有氣象數(shù)據(jù)服務的免費開源API作為AJAX請求接口。13.2案例需求用戶可以使用下拉菜單切換城市，利用jQueryAJAX技術獲取當前城市的一系列氣象數(shù)據(jù)，最后將數(shù)據(jù)展現(xiàn)在界面上。本示例節(jié)選了四個直轄市（北京、重慶、上海和天津）的天氣數(shù)據(jù)，具體效果如圖所示。13.3準備工作13.3.1API密鑰申請 13.3.2API調(diào)用方法

13.3.1API密鑰申請本小節(jié)主要介紹如何申請獲得開源API的密鑰。由于百度APIStore目前已經(jīng)不再提供服務，因此這里選擇了可以提供全球氣象數(shù)據(jù)服務接口的和風天氣API，其官方網(wǎng)址為/13.3.1API密鑰申請用戶使用郵箱進行注冊并激活后每次使用都可以免費獲取未來三天之內(nèi)全球各地區(qū)的實時天氣，免費接口調(diào)用流量為1000次/天、頻率為200次/分鐘，該數(shù)據(jù)基本可以滿足讀者的開發(fā)學習需求。注冊完畢之后可以訪問/#/console來查看賬號信息，用戶登陸后即可看到開發(fā)者申請到的個人認證key，如果列表是空白的則可點擊“添加key”按鈕創(chuàng)建一個新的應用key。13.3.1API密鑰申請13.3.1API密鑰申請13.3.1API密鑰申請開發(fā)者需記錄上述頁面中的個人認證key，該信息在AJAX請求時會作為身份識別的標識一并發(fā)送給服務器。至此，開源API的密鑰申請就已經(jīng)順利完成，讀者可以進行下一節(jié)的學習，了解如何調(diào)用API獲取氣象數(shù)據(jù)。13.3.2API調(diào)用方法免費用戶可以調(diào)用的接口地址為：/v7/，其服務器節(jié)點在中國境內(nèi)。該接口地址后面追加不同的關鍵詞將獲取不同的氣象數(shù)據(jù)信息，例如alarm為天氣自然災害預警，讀者可以訪問官方文檔/docs/api/了解各類關鍵詞的使用方法。本示例將選用關鍵詞weather/now進行實況天氣數(shù)據(jù)的獲取。實況天氣即為當前時間點的天氣狀況以及溫濕風壓等氣象指數(shù)，具體包含的數(shù)據(jù)：體感溫度、實測溫度、天氣狀況、風力、風速、風向、相對濕度、大氣壓強、降水量、能見度等。目前該接口允許查詢的城市覆蓋范圍為全球任意一個城市。13.3.2API調(diào)用方法基于關鍵詞weather/now的接口具有2個必填參數(shù)和3個可選參數(shù)，如表所示。參數(shù)名稱參數(shù)類型解釋location必填參數(shù)用于規(guī)定需要查詢的地區(qū)。可以填入查詢地區(qū)的LocationID或經(jīng)緯度坐標（十進制）。例如：location=101010100（查詢地區(qū)的LocationID）location=120.343,36.088（經(jīng)緯度）key必填參數(shù)需要填入用戶的個人認證key字符串。接口將通過該數(shù)據(jù)判斷是否為授權用戶，并可以進一步判斷是否為付費用戶。例如：key=123abc456dfggzip可選參數(shù)對接口進行壓縮，可大幅節(jié)省網(wǎng)絡消耗、減少接口獲取延遲。參數(shù)的默認值是y，表示開啟gzip。參數(shù)值改成n表示不使用壓縮。lang可選參數(shù)用于指定數(shù)據(jù)的語言版本，不添加lang參數(shù)則默認為簡體中文。例如：lang=en需要注意的是，國內(nèi)某些特定數(shù)據(jù)（例如生活指數(shù)、空氣質(zhì)量等）不支持多語言版。unit可選參數(shù)單位選擇，公制（m）或英制（i），默認為公制單位。例如：unit=i詳見表13-2度量衡單位一覽表。13.3.2API調(diào)用方法其中與unit參數(shù)相關公制和英制單位對比如表所示。數(shù)據(jù)項公制單位英制單位溫度攝氏度℃華氏度℉風速公里/小時km/h英里/小時mile/h能見度公里km英里mile大氣壓強百帕hPa百帕hPa降水量毫米mm毫米mmPM2.5微克/立方米μg/m3微克/立方米μg/m3PM10微克/立方米μg/m3微克/立方米μg/m3O3微克/立方米μg/m3微克/立方米μg/m3SO2微克/立方米μg/m3微克/立方米μg/m3CO毫克/立方米mg/m3毫克/立方米mg/m3NO2微克/立方米μg/m3微克/立方米μg/m3注：部分數(shù)據(jù)項無論選擇何種單位均會使用公制單位。13.3.2API調(diào)用方法免費用戶調(diào)用接口的常見語法格式如下：其中[parameters]需要替換成使用到的參數(shù)，多個參數(shù)之間使用&符號隔開。例如，使用LocationID查詢上海市天氣數(shù)據(jù)的寫法如下：注：其中key的值1234abcd為隨機填寫的內(nèi)容，請在實際開發(fā)中將其替換為真實的個人認證key，否則接口將無法獲取數(shù)據(jù)。/v7/weather/now?[parameters]/v7/weather/now?location=101020100&key=1234abcd13.3.2API調(diào)用方法可以直接將這段地址輸入到瀏覽器地址欄中測試數(shù)據(jù)返回結果，如圖所示。由上圖可見，指定城市的天氣數(shù)據(jù)返回結果是json數(shù)據(jù)格式的文本內(nèi)容，其中包含的數(shù)據(jù)是以“名稱:值”的形式存放。本示例將節(jié)選實況天氣now中的部分內(nèi)容進行處理和使用。13.3.2API調(diào)用方法為方便用戶查看，將返回的數(shù)據(jù)內(nèi)容整理格式后節(jié)選如下：{"code":"200","updateTime":"2021-01-12T20:36+08:00","fxLink":"http://hfx.link/2bc1","now":{"obsTime":"2021-01-12T20:04+08:00","temp":"5","feelsLike":"3","icon":"150","text":"晴","wind360":"270","windDir":"西風","windScale":"0","windSpeed":"0","humidity":"33","precip":"0.0","pressure":"1017","vis":"15","cloud":"0","dew":"-9"},"refer":{"sources":["WeatherChina"],"license":["nocommercialuse"]}}13.3.2API調(diào)用方法返回的字段說明如表所示。參數(shù)描述示例值code接口請求狀態(tài)碼，例如200表示請求成功。200updateTime當前API的最新更新時間2021-01-12T20:36+08:00fxLink該城市的天氣預報和實況自適應網(wǎng)頁，可嵌入網(wǎng)站或應用http://hfx.link/2bc1now實況天氣參數(shù)描述示例值obsTime實況觀測時間2021-01-12T20:04+08:00temp溫度，默認單位：攝氏度5feelsLike體感溫度，默認單位：攝氏度3icon實況天氣狀況的圖標代碼。150text實況天氣狀況的文字描述晴wind360風向360角度270windDir風向西風windScale風力0windSpeed風速，公里/小時0humidity相對濕度33precip降水量0.0pressure大氣壓強1017vis能見度，默認單位：公里15cloud云量0dew實況露點溫度-9refer數(shù)據(jù)來源參數(shù)描述示例值sources原始數(shù)據(jù)來源，該值有可能為空值WeatherChinalicense數(shù)據(jù)許可證（例如是免費版、商業(yè)版）nocommercialuse13.3.2API調(diào)用方法其中參數(shù)code的狀態(tài)碼及錯誤碼如表所示。代碼說明200請求成功204請求成功，但所查詢的地區(qū)暫時沒有你需要的數(shù)據(jù)。400請求錯誤，可能包含錯誤的請求參數(shù)或缺少必選的請求參數(shù)。401認證失敗，可能使用了錯誤的KEY、數(shù)字簽名錯誤、KEY的類型錯誤。402超過訪問次數(shù)或余額不足以支持繼續(xù)訪問服務，你可以充值、升級訪問量或等待訪問量重置。403無訪問權限，可能是綁定的PackageName、BundleID、域名IP地址不一致，或者是需要額外付費的數(shù)據(jù)。404查詢的數(shù)據(jù)或地區(qū)不存在。429超過限定的QPM（每分鐘訪問次數(shù)）500無響應或超時。13.3.2API調(diào)用方法用戶可以根據(jù)指定的名稱找到對應的數(shù)據(jù)值，例如在實況天氣數(shù)據(jù)now可以查到當前城市的溫度，對應的字段節(jié)選如下：上述代碼表示當前城市的溫度為5攝氏度，用戶也可以自行選用其他數(shù)據(jù)（例如空氣質(zhì)量指數(shù)air/now等）完成開發(fā)練習。下一節(jié)將介紹天氣查詢界面的設計方案。"temp":"5"13.4界面設計13.4.1整體布局設計 13.4.2城市切換版塊設計 13.4.3天氣描述版塊設計 13.4.4實況氣象數(shù)據(jù)版塊設計13.4.1整體布局設計本項目的主要內(nèi)容分為三個板塊：切換城市、天氣狀況、實況氣象數(shù)據(jù)。其界面結構設計效果如圖所示。

13.4.1整體布局設計上圖中的三個板塊內(nèi)容具體解釋如下：切換城市：使用<div>元素完成，主要包含下拉菜單元素，用戶可以自行切換城市。圖標與天氣狀況：使用<div>元素完成，主要包含當前城市的天氣圖標、氣溫以及天氣狀況描述（例如晴、多云、雷陣雨等）實況氣候數(shù)據(jù)：使用<table>元素完成，主要包含體感溫度、相對濕度、降水量、氣壓、能見度和風力共計6種實時氣象數(shù)據(jù)，在<table>中形成四行三列表格內(nèi)容。13.4.1整體布局設計在HTML5中使用<div>元素將這三個版塊嵌套在內(nèi)部，相關代碼如下：1. <body>2. <!--標題-->3. <h3>jQueryAJAX天氣預報查詢的設計與實現(xiàn)</h3>4. <!--水平線-->5. <hr>6. <!--天氣查詢版塊-->7. <divid="content">8. <!--1切換城市-->9. <divid="location">10. 切換城市（下拉菜單）11. </div>12. 13. <!--2天氣描述區(qū)域-->14. <divid="weather">15. 圖標氣溫天氣狀況16. </div>17. 18. <!--3實況數(shù)據(jù)-->19. <tableid="now">20. <!--3-1第一行（數(shù)據(jù)）-->21. <trid="line01">22. <td>1-1</td>23. <td>1-2</td>24. <td>1-3</td>25. </tr>26. <!--3-2第二行（單位名稱）-->27. <trid="line02">28. <td>2-1</td><td>2-2</td><td>2-3</td>29. </tr>30. <!--3-3第三行（數(shù)據(jù)）-->31. <trid="line03">32. <td>3-1</td>33. <td>3-2</td>34. <td>3-3</td>35. </tr>36. <!--3-4第四行（單位名稱）-->37. <trid="line04">38. <td>4-1</td><td>4-2</td><td>4-3</td>39. </tr>40. </table>41. </div>42. </body>13.4.1整體布局設計本示例使用CSS外部樣式表規(guī)定頁面樣式。在本地css文件夾中創(chuàng)建weather.css文件，并在<head>首尾標簽中聲明對CSS文件的引用。相關HTML5代碼片段如下：在CSS外部樣式表中首先為頁面設置整體樣式，相關CSS代碼片段如下：1. <head>2. <metacharset="utf-8">3. <title>jQueryAJAX天氣預報查詢的設計與實現(xiàn)</title>4. <linkrel="stylesheet"href="css/weather.css">5. </head>1. /*公共樣式*/2. body{3. text-align:center;/*文本居中*/4. background:silver;/*背景顏色灰色*/5. }13.4.1整體布局設計接下來在CSS外部樣式表中為<div>元素設置統(tǒng)一樣式，相關CSS代碼片段如下：然后繼續(xù)為id="content"的<div>元素設置樣式，相關CSS代碼片段如下：其中box-shadow屬性可以實現(xiàn)邊框投影效果，4個參數(shù)分別代表水平方向的偏移（向右偏移15像素）、垂直方向的偏移（向下偏移15像素）、陰影寬度（10像素）和陰影顏色（黑色），均可自定義成其他值。該屬性屬于CSS3新特性中的一種，在這里僅為美化頁面作簡單使用。1. div{2. padding:10px20px;/*內(nèi)邊距上下10px左右20px*/3. border:1pxsolidred;/*1px紅色實線邊框（僅為設計時使用，最終將去掉）*/4. }1. /*天氣查詢內(nèi)容區(qū)域*/2. #content{3. margin:0pxauto;/*外邊距上下0左右auto*/4. max-width:480px;/*最大寬度480px*/5. background:white;/*背景顏色白色*/6. box-shadow:15px15px10pxblack;/*右下方10px寬的黑色陰影*/7. }13.4.1整體布局設計繼續(xù)為id="weather"的<div>元素以及內(nèi)部氣象圖標設置樣式，相關CSS代碼片段如下：1. /*天氣描述區(qū)域*/2. #weather{3. font-size:2em;/*2個瀏覽器默認字符寬*/4. border:1pxsolidred;/*1px紅色實線邊框（僅為設計時使用，最終將去掉）*/5. }6. /*天氣描述區(qū)域-氣象圖標*/7. #weatherimg{8. vertical-align:middle;/*垂直方向居中*/9. }13.4.1整體布局設計在CSS外部樣式表中為<table>及其內(nèi)部子元素設置樣式效果，相關CSS代碼如下：1. /*表格*/2. table{3. margin:15pxauto;/*外邊距上下15px左右auto*/4. }5. /*表格-單元格*/6. td{7. padding:5px20px;/*內(nèi)邊距上下5px左右20px*/8. border:1pxsolidred;/*1px紅色實線邊框（僅為設計時使用，最終將去掉）*/9. }10. /*表格-第1、3行*/11. #line01,#line03{12. font-size:1.3em;/*1.3個瀏覽器默認字符寬*/13. }14. /*表格-第2、4行*/15. #line02,#line04{16. color:gray;/*文字顏色灰色*/17. }13.4.2城市切換版塊設計該版塊是id="location"的<div>元素內(nèi)部內(nèi)容，包含一個下拉菜單<select>元素。其中第一個<option>使用了關鍵詞selected使其處于默認被選中狀態(tài)。開發(fā)者后續(xù)也可以根據(jù)實際需要追加更多的城市選項。1. <!--1切換城市-->2. <divid="location">3. 切換城市:4. <selectid="city">5. <optionvalue="101010100"selected>北京市</option>6. <optionvalue="101040100">重慶市</option>7. <optionvalue="101020100">上海市</option>8. <optionvalue="101030100">天津市</option>9. </select>10. </div>13.4.3天氣描述版塊設計該版塊是id="weather"的<div>元素內(nèi)部內(nèi)容，從左往右依次包含圖標、氣溫數(shù)據(jù)以及氣候描述。相關HTML5代碼片段如下：其中三個元素分別解釋如下：

<imgid="icon">元素：用于顯示氣候描述對應的天氣圖標。圖標素材可以自行準備，也可以從和風天氣官網(wǎng)下載（/docs/start/icons/）；

<spanid="temp">元素：用于顯示當前城市的氣溫（單位：攝氏度℃）；

<spanid="text">元素：用于顯示當前城市的氣候描述，例如多云、晴等。1. <!--2天氣描述區(qū)域-->2. <divid="weather">3. <!--2-1氣象圖標-->4. <imgid="icon"src="image/icons/999.png"/>5. <!--2-2溫度-->6. <spanid="temp">0</span>℃7. <!--2-3文字描述-->8. <spanid="text">Unknown</span>9. </div>當前由于尚未使用jQueryAJAX技術獲取數(shù)據(jù)，因此當前顯示的僅為樣式效果。13.4.4實況氣象數(shù)據(jù)版塊設計該版塊是id="now"的<table>元素內(nèi)部內(nèi)容，主要包含體感溫度、相對濕度、降水量、氣壓、能見度和風力共計6種實時氣象數(shù)據(jù)。相關HTML5代碼片段如下：1. <!--3實況數(shù)據(jù)-->2. <tableid="now">3. <!--3-1第一行（數(shù)據(jù)）-->4. <trid="line01">5. <td><spanid="feelsLike">0</span>℃</td>6. <td><spanid="humidity">0</span>%</td>7. <td><spanid="precip">0</span>mm</td>8. </tr>9. <!--3-2第二行（單位名稱）-->10. <trid="line02">11. <td>體感溫度</td>12. <td>相對濕度</td>13. <td>降水量</td>14. </tr>15. <!--3-3第三行（數(shù)據(jù)）-->16. <trid="line03">17. <td><spanid="pressure">0</span>hPa</td>18. <td><spanid="vis">0</span>km</td>19. <td><spanid="windScale">0</span><spanid="windDir">0</span></td>20. </tr>21. <!--3-4第四行（單位名稱）-->22. <trid="line04">23. <td>氣壓</td>24. <td>能見度</td>25. <td>風力</td>26. </tr>27. </table>13.4.4實況氣象數(shù)據(jù)版塊設計表格共計四行三列，其中第1、3兩行為實況氣象數(shù)據(jù)，第2、4兩行為上一行數(shù)據(jù)對應的文字描述。最后整理一下CSS外部樣式表，去掉代碼中所有設置的紅色實線邊框（border:1pxsolidred）效果。此時界面設計就正式完成，最終樣式效果如圖所示。當前由于尚未使用jQueryAJAX技術獲取數(shù)據(jù)，因此當前顯示的僅為樣式效果。13.5天氣預報查詢的實現(xiàn)13.5.1jQueryAJAX請求接口的實現(xiàn) 13.5.2根據(jù)城市查詢天氣數(shù)據(jù)的實現(xiàn)13.5.1jQueryAJAX請求接口的實現(xiàn)本示例使用外部JS文件weather.js實現(xiàn)jQuery相關代碼。在本地js文件夾中創(chuàng)建weather.js文件，并在<head>首尾標簽中聲明對JS文件的引用。相關HTML5代碼片段如下：1. <head>2. <metacharset="utf-8">3. <title>jQueryAJAX天氣預報查詢的設計與實現(xiàn)</title>4. <linkrel="stylesheet"href="css/weather.css">5. <scriptsrc="js/jquery-1.12.3.min.js"></script>6. <scriptsrc="js/weather.js"></script>7. </head>13.5.1jQueryAJAX請求接口的實現(xiàn)本示例選用了jQuery$.ajax()方法進行接口請求，并檢測是否獲取到了數(shù)據(jù)內(nèi)容。由于城市ID是動態(tài)變化，因此聲明自定義函數(shù)getWeather(cityID)，根據(jù)參數(shù)cityID的不同，獲取對應城市的氣象數(shù)據(jù)。在weather.js中使用jQuery$.ajax()方法調(diào)用免費API獲取數(shù)據(jù)的代碼如下：1. //換成您自己的密鑰2. varkey='abcd123456換成您自己的密鑰';3. //獲取指定城市的天氣預報數(shù)據(jù)4. functiongetWeather(cityID){5. $.ajax({6. url:"/v7/weather/now?key="+key+"&location="+cityID,7. method:"GET",8. dataType:"json",9. success:function(data){10. //獲取失敗11. if(data.code!="200")return;12. //當前氣候13. varnow=data.now;14. //更新當前氣候相關數(shù)據(jù)15. $("#icon").attr("src","image/icons/"+now.icon+".png");//圖標16. $("#temp").text(now.temp);//氣溫17. $("#text").text(now.text);//氣候（晴、多云等描述）18. $("#feelsLike").text(now.feelsLike);//體感溫度19. $("#humidity").text(now.humidity);//濕度20. $("#precip").text(now.precip);//降水量21. $("#pressure").text(now.pressure);//氣壓22. $("#vis").text(now.vis);//能見度23. $("#windScale").text(now.windScale);//風力等級24. $("#windDir").text(now.windDir);//風力方向25. }26. });27. }13.5.2根據(jù)城市查詢天氣數(shù)據(jù)的實現(xiàn)在weather.js中添加自定義函數(shù)updateInfo()用于更新頁面上的氣象數(shù)據(jù)，具體jQuery代碼如下：1. //更新頁面數(shù)據(jù)2. functionupdateInfo(){3. //獲取當前城市名稱4. varcityID=$("#city").val();5. //獲取當前城市的全部天氣數(shù)據(jù)6. getWeather(cityID);7. }13.5.2根據(jù)城市查詢天氣數(shù)據(jù)的實現(xiàn)在頁面準備就緒時執(zhí)行updateInfo()函數(shù)，使得默認城市的氣象數(shù)據(jù)也可以正常顯示出來。然后對下拉菜單進行監(jiān)聽，一旦發(fā)生變化則再次執(zhí)行updateInfo()方法更新頁面數(shù)據(jù)內(nèi)容。具體jQuery代碼如下：此時本項目就已全部完成。1. //文檔準備就緒2. $(document).ready(function(){3. //頁面準備就緒時更新天氣數(shù)據(jù)4. updateInfo();5. //監(jiān)聽下拉菜單變化6. $("#city").change(function(){7. updateInfo();//更新頁面數(shù)據(jù)8. });9. });13.6最終效果展示13.6最終效果展示由于篇幅有限，本示例在下拉菜單選項中僅添加了四個直轄市作為測試用例。開發(fā)者未來可以嘗試追加新的城市、自定義天氣圖標、或者更改需要展示的數(shù)據(jù)內(nèi)容。本章小結本章小結本章通過天氣預報查詢項目的開發(fā)練習主要學習了以下知識點和操作：第三方平臺的密鑰申請和API調(diào)用文檔學習；

jQuery中ID選擇器、類選擇器等各類選擇器的綜合應用；

jQueryDOM操作更新頁面數(shù)據(jù)；

jQueryajax()方法的理解與應用。通過本章的學習，讀者可以提高HTML、CSS、JavaScript與jQuery的綜合應用能力，熟悉jQuery特效中常用的方法以及AJAX技術的使用。參考資料參考資料和風天氣開發(fā)文檔：/docs/start/中國天氣網(wǎng)：/《HTML5網(wǎng)頁前端設計-第2版（微課視頻版）》周文潔編著，清華大學出版社，ISBN：9787302553588《HTML5網(wǎng)頁前端設計實戰(zhàn)》周文潔編著，清華大學出版社，ISBN：9787302464686《微信小程序開發(fā)實戰(zhàn)-微課視頻版》周文潔著，清華大學出版社，ISBN：9787302541639Thankyou！JavaScript與jQuery

網(wǎng)頁前端開發(fā)與設計-第2版學校名稱：XXXX主講教師：XXXX第14章思政答題程序的設計與實現(xiàn) 本章學習目標學習掌握服務器的部署和啟停；學習掌握JSON格式文件制作題庫數(shù)據(jù)和接口的編寫；學習掌握JavaScript和jQuery基礎知識；學習掌握jQueryAJAX的用法實現(xiàn)服務器請求和回調(diào)處理。目錄14.1案例背景 14.2案例需求 14.3準備工作14.4界面設計14.5邏輯實現(xiàn) 14.1案例背景14.1案例背景2019年1月1日由中宣部組織建設的“學習強國”學習平臺在全國正式上線，該平臺由PC端和手機APP端兩大終端組成，是立足全黨、面向全社會的科學理論學習陣地、思想文化聚合平臺。其中手機APP端知識答題功能深受黨員群眾一致好評，以“每日答題”、“專項答題”、“每周答題”等不同的種類提供優(yōu)質(zhì)學習內(nèi)容，幫助學習者對知識進行復習鞏固，如圖所示。14.1案例背景2022年10月16日上午10時，中國共產(chǎn)黨第二十次全國代表大會在北京人民大會堂開幕。習近平代表第十九屆中央委員會向大會作報告。報告的第五部分是“實施科教興國戰(zhàn)略，強化現(xiàn)代化建設人才支撐”，將其專章部署，傳遞了鮮明信號（來源：《中國遠程教育》雜志網(wǎng)易號學習貫徹黨的二十大精神著力推進教育數(shù)字化與終身學習）。14.1案例背景二十大報告指出，必須堅持科技是第一生產(chǎn)力、人才是第一資源、創(chuàng)新是第一動力，深入實施科教興國戰(zhàn)略、人才強國戰(zhàn)略、創(chuàng)新驅(qū)動發(fā)展戰(zhàn)略。報告強調(diào)，“我們要堅持教育優(yōu)先發(fā)展、科技自立自強、人才引領驅(qū)動，加快建設教育強國、科技強國、人才強國”“建成世界上規(guī)模最大的教育體系”。其中，特別指出，要辦好人民滿意的教育。堅持以人民為中心發(fā)展教育，加快建設高質(zhì)量教育體系，發(fā)展素質(zhì)教育，促進教育公平。推進教育數(shù)字化，建設全民終身學習的學習型社會、學習型大國。14.2案例需求14.2案例需求本章將綜合應用JavaScript與jQuery技術開發(fā)一個思政答題程序，題目素材來源為黨的二十大報告內(nèi)容，主題為“‘學習黨的二十大精神’專項答題”。題庫包含判斷題、單選題和多選題三種類型，共10題，每題10分，總分為100分。14.2案例需求用戶勾選選項進行作答，點擊底部的“上一題”或“下一題”按鈕可進行題目切換，所有已作答的題目切換返回時仍可以顯示當時作答的歷史選項記錄。在答題過程中也可以點擊“查看解析”按鈕查看關鍵點解析，幫助答題者進行相關知識復習回顧。答完最后一題并選擇“立即交卷“按鈕后頁面將切換到結果頁顯示最終得分，點擊結果頁的“重新作答”可回答答題頁重新開始新的一輪答題。14.2案例需求答題頁原型圖14.2案例需求結果頁原型圖14.3準備工作14.3.1服務器端準備 14.3.2題庫素材 14.3.3接口制作14.3.1服務器端準備本次案例我們使用PC端安裝第三方免費的phpStudyv8.1套件來模擬服務器效果，該套件的下載安裝以及啟動步驟見第12章“12.2.1臨時服務器的搭建”。啟動后的效果如圖所示。14.3.1服務器端準備然后在服務器端的根目錄WWW下新建一個自定義目錄（例如redQuiz）作為本次項目的存放路徑，這樣后續(xù)的文件在瀏覽器中的訪問地址就是：這樣服務器的部署工作就完成了。http://localhost/redQuiz/文件名或者/redQuiz/文件名14.3.2題庫素材本小節(jié)主要介紹思政答題程序的題庫素材的制作思路以及最終需要的文件格式。根據(jù)題型、選項、分值等因素，綜合考慮每個題目需要的通用字段總結如下：id：題目序號，數(shù)字形式；type：題目類型，可以錄入文字也可以用數(shù)字來標識，這里采用文字；question：題目，純文本；optionA：選項A的文字描述；optionB：選項B的文字描述；optionC：選項C的文字描述，判斷題無此字段；optionD：選項D的文字描述，判斷題無此字段；score：當前題目的分值，數(shù)字形式，例如10就表示10分。answer：正確答案，如果是多選題中間用英文半角的逗號隔開，例如“A,C,D”；tips：答案解析，純文本14.3.2題庫素材本次案例將使用較為簡單的JSON格式文件進行題庫的存儲，開發(fā)者若學過數(shù)據(jù)庫技術也可以自行改造使用數(shù)據(jù)庫對題庫數(shù)據(jù)進行存儲。關于JSON格式的介紹見第12章階段案例：簡易單詞查詢中的案例分析。14.3.2題庫素材這里節(jié)選部分題目的JSON格式效果如下：注：上述示例題目可供參考，全套題庫數(shù)據(jù)文件見本書配套代碼包。[{"id":1, "type":"判斷題", "question":"黨的二十大報告指出，十年來，黨和國家事業(yè)取得歷史性成就、發(fā)生歷史性變革，推動我國邁上全面建設社會主義現(xiàn)代化國家新征程。", "optionA":"對", "optionB":"錯", "score":10, "answer":"A", "tips":"十年來，黨和國家事業(yè)取得歷史性成就、發(fā)生歷史性變革，推動我國邁上全面建設社會主義現(xiàn)代化國家新征程。"},{"id":2,…},{"id":3,…},…]14.3.2題庫素材最后，將制作好的數(shù)據(jù)存到文本文檔中并另存為UTF-8格式的JSON文件，名稱可以自定義，例如就叫做data.json。此時題庫素材就制作完成了，請在服務器端的WWW/redQuiz目錄下新建目錄api（僅為示例，也可以自定義其他目錄）并將題庫文件存放進去等待使用。14.3.3接口制作本示例選用了php技術來制作接口文件，并自定義文件名為search.php，同樣需要UTF-8編碼格式。接口文件search.php的內(nèi)容如下：1. <?php2. //讀取客戶端請求的題目編號3. $id=$_GET['id'];4. 5. //讀取json文件6. $json_data=file_get_contents('data.json');7. //把json字符串強制轉(zhuǎn)為PHP數(shù)組8. $php_data=json_decode($json_data,true);9. 10. //查詢狀態(tài)標記11. $result['status_code']=0;//0表示未查到，1表示查到了12. 13. //遍歷查單詞14. foreach($php_dataas$obj){15. //如果查到了16. if($obj['id']==$id){17. $result['status_code']=1;//更新查詢狀態(tài)標記18. $result['question_data']=$obj;//更新查詢結果19. break;//停止遍歷20. }21. }22. 23. //返回解釋(轉(zhuǎn)成json格式傳輸)24. echojson_encode($result);25. ?>上述內(nèi)容表示根據(jù)請求參數(shù)id的取值查找data.json題庫文件，并把相同題目id編號的數(shù)據(jù)返回給客戶端。14.3.3接口制作此時接口文件就制作完成了，請把search.php放在服務器端的WWW/redQuiz/api目錄下等待使用。開發(fā)者也可以先使用瀏覽器自測接口是否有效，在瀏覽器地址欄輸入：瀏覽器運行結果如下：如果可以看到其中的“status_code”取值為1，就說明查到了對應的題目數(shù)據(jù)。http://localhost/redQuiz/api/search.php?id=1或者/redQuiz/api/search.php?id=114.4界面設計14.4.1公共樣式 14.4.2答題頁設計 14.4.3結果頁設計14.4.1公共樣式 本示例使用CSS外部樣式表規(guī)定頁面樣式，在css文件夾中創(chuàng)建common.css文件并聲明一系列公共樣式，方便答題頁與結果頁共享。創(chuàng)建UTF-8格式的網(wǎng)頁文件RedQuiz.html和Result.html分別用于展示答題頁和結果頁，并在兩個html文件的<head>首尾標簽中均聲明對common.css文件的引用，相關HTML5代碼片段如下：此時公共樣式文件中的代碼會同時影響答題頁和結果頁的頁面效果。1. <head>2. <metacharset="utf-8">3. <title>思政答題平臺</title>4. <linkrel="stylesheet"href="css/common.css">14.4.1公共樣式 1. /*一、公共樣式*/2. body{3. background-color:#f5f5f5;/*背景顏色淺灰色*/4. text-align:center;/*文本居中*/5. box-sizing:border-box;/*盒子尺寸包含邊框和內(nèi)邊距*/6. }7. /*隱藏當前元素*/8. .hide{9. display:none;/*不顯示當前元素*/10. }11. /*水平方向布局*/12. .flexH{13. display:flex;/*彈性布局*/14. flex-direction:row;/*水平布局*/15. }16. /*垂直方向布局*/17. .flexV{18. display:flex;/*彈性布局*/19. flex-direction:column;/*垂直布局*/20. }21. /*布局交叉方向上居中*/22. .alignCenter{23. align-items:center;/*垂直布局則水平方向居中，反之亦然*/24. }25. /*彈性布局between*/26. .flexBetween{27. justify-content:space-between;/*元素之間空一樣多，兩頭貼邊*/28. }29. /*盒子區(qū)域*/30. .box{31. width:740px;/*寬度740px*/32. background-color:white;/*背景顏色為白色*/33. border-radius:10px;/*圓角邊框效果*/34. margin:20pxauto;/*外邊距上下20px左右自動居中*/35. padding:20px30px;/*內(nèi)邊距上下20px左右30px*/36. line-height:35px;/*行高35px*/37. }38. /*紅色主題按鈕*/39. .redBtn{40. color:white;/*文字顏色為白色*/41. background-color:#890000;/*背景顏色為紅色*/42. outline:none;/*無立體輪廓*/43. border:none;/*無邊框*/44. border-radius:5px;/*圓角邊框效果*/45. padding:10px20px;/*內(nèi)邊距上下10px左右20px*/46. cursor:pointer;/*鼠標為手指指示圖標*/47. }48. /*段落文字*/49. p{50. text-indent:2em;/*段落首行縮進2個字符*/51. text-align:left;/*文本左對齊*/52. }common.css14.4.2答題頁設計1.整體布局設計答題頁主要分成答題區(qū)域、查看解析區(qū)域和底部按鈕組合欄。14.4.2答題頁設計1.整體布局設計上圖中的三個區(qū)域內(nèi)容具體解釋如下：答題區(qū)域：使用<div>元素完成，主要包含狀態(tài)欄（題目類型和分值）、題目、選項。解析區(qū)域：使用<div>元素完成，主要包含“查看解析”按鈕和一段解析文本。按鈕區(qū)域：使用<div>元素完成，主要包含“上一題”、“下一題”按鈕以及中間顯示“？/10”的文本表示當前第幾題。14.4.2答題頁設計1.整體布局設計在RedQuiz.html中使用<divclass="box">元素將這三個區(qū)域依次呈現(xiàn)出來，相關代碼如下：1. <body>2. <!--標題-->3. <h3>思政答題平臺</h3>4. <!--水平線-->5. <hr/>6. <!--1.答題區(qū)域-->7. <divclass="box">8. </div>9. 10. <!--2.解析區(qū)域-->11. <divclass="box">12. </div>13. 14. <!--3.按鈕區(qū)域-->15. <divclass="box">16. </div>17. </body>在上述代碼中，三個區(qū)域均使用了<divclass=”box”>元素來形成寬度為740px的圓角邊框白色盒子，其中box樣式在公共樣式表common.css中已事先聲明。14.4.2答題頁設計1.整體布局設計運行效果如下圖所示。此時答題頁整體布局結構就完成了，接下來將分別填充每個區(qū)域中的具體內(nèi)容。14.4.2答題頁設計2.答題區(qū)域設計該區(qū)域是第一個<divclass="box">元素內(nèi)部內(nèi)容，包含狀態(tài)欄和題目區(qū)域。相關HTML5代碼片段如下：1. <!--1.答題區(qū)域-->2. <divclass="box">3. <!--1-1狀態(tài)欄-->4. <divclass="flexH

alignCenter

flexBetween">5. </div>6. <!--1-2題目區(qū)域-->7. <divclass="flexV">8. </div>9. </div>上述代碼仍然使用<div>分割了狀態(tài)欄和題目區(qū)域，并直接使用公共樣式文件中事先已聲明的flexH和flexV分別表示水平布局和垂直布局，alignCenter在這里表示垂直方向上居中，flexBetween用于將內(nèi)容拉到兩端展示。14.4.2答題頁設計2.答題區(qū)域設計接下來填充狀態(tài)欄，相關HTML5代碼片段如下：1. <!--1-1狀態(tài)欄-->2. <divclass="flexH

alignCenter

flexBetween">3. <!--1-1-1題目類型-->4. <divid="type">單選題</div>5. <!--1-1-2分值-->6. <divid="score">10分</div>7. </div>14.4.2答題頁設計2.答題區(qū)域設計由于答題頁自身的樣式不多，可以繼續(xù)寫到common.css中，這里新增一個關于題目類型樣式的美化代碼。相關CSS文件代碼片段如下：1. /*一、公共樣式（…內(nèi)容略…）*/2. 3. /*二、答題頁樣式*/4. /*題型*/5. #type{6. border-left:7pxsolid#890000;/*左側(cè)7px粗細實線紅色邊框*/7. padding-left:15px;/*內(nèi)邊距左側(cè)空15px*/8. }14.4.2答題頁設計2.答題區(qū)域設計此時答題區(qū)域頂部的狀態(tài)欄就完成了，如下圖所示。14.4.2答題頁設計2.答題區(qū)域設計繼續(xù)填充題目區(qū)域，相關HTML5代碼片段如下：1. <!--1-2題目區(qū)域-->2. <divclass="flexV">3. <!--1-2-1題目-->4. <pid="question">題目。</p>5. <!--1-2-2選項表單-->6. <formid="optionForm"class="flexV">7. <!--選項A區(qū)域-->8. <!--選項B區(qū)域-->9. <!--選項C區(qū)域-->10. <!--選項D區(qū)域-->11. </form>12. </div>在題目區(qū)域內(nèi)部使用段落元素<pid=”question”>來顯示題目文本，使用表單元素<formid=”optionForm”>來顯示用于選項表單。其中<form>元素也使用了公共樣式中的聲明的flexV樣式表示垂直布局。14.4.2答題頁設計2.答題區(qū)域設計在<form>表單內(nèi)部有最多四個選項（判斷題只有選項A和B），它們的布局結構完全相同，以選項A為例，相關HTML5代碼如下：<!--選項A區(qū)域--><div> <inputid="optionA"name="options"type="radio"value="A"> <spanclass="optionsTxt">選項A</span></div>14.4.2答題頁設計2.答題區(qū)域設計上述代碼表示每個選項區(qū)域均使用<div>區(qū)分，其內(nèi)部均放置了<input>元素暫時用于顯示單選框和<spanclass="optionsTxt">元素用于顯示當前選項的文本內(nèi)容。其中<input>元素的屬性name="options"取值為開發(fā)者自定義，所有選項都要用同一個name名稱以確保單選框或多選框可以分到同一組內(nèi)；type="radio"表示當前是單選框，如果后期需要改成多選框，可以使用type="checkbox"；屬性id="optionA"和value="A"用于標識當前選項，每個選項對應的取值不同。14.4.2答題頁設計2.答題區(qū)域設計其余選項區(qū)域的HTML5代碼和選項A區(qū)域基本相同，這里就不再重復展示，請開發(fā)者根據(jù)上面的代碼自行補充完整。（提示：只需要把<input>元素中的id="optionA"和value="A"以及<span>元素中的文本“選項A”這三處里面的字母“A”分別改成對應的選項B、C、D取值即可。）14.4.2答題頁設計2.答題區(qū)域設計在公共樣式文件common.css中繼續(xù)追加關于表單的樣式，代碼片段如下：1. /*一、公共樣式（…內(nèi)容略…）*/2. 3. /*二、答題頁樣式*/4. （…內(nèi)容略…）5. /*表單*/6. form{7. align-items:flex-start;/*水平方向左對齊布局*/8. text-indent:2em;/*段落首行縮進2個字符*/9. }10. /*選項*/11. input{12. display:inline-block;/*行內(nèi)塊級元素*/13. margin-right:20px;/*外邊距右側(cè)空20px*/14. }14.4.2答題頁設計2.答題區(qū)域設計運行效果如下圖所示。此時答題頁的答題區(qū)域就已經(jīng)設計完成，下面將介紹解析區(qū)域設計。14.4.2答題頁設計3解析區(qū)域設計該區(qū)域是第二個<divclass="box">元素內(nèi)部內(nèi)容，包含按鈕和解析文本。相關HTML5代碼片段如下：1. <!--2.解析區(qū)域-->2. <divclass="box">3. <!--2-1“查看解析”按鈕-->4. <buttonclass="redBtn">查看解析</button>5. <!--2-2解析文本-->6. <pid="tips">答案解析。</p>7. </div>上述代碼使用按鈕元素<buttonclass="redBtn">顯示紅底白字的圓角按鈕風格，其中redBtn是在公共樣式表中事先聲明過的樣式；段落元素<p>用于顯示答案解析的文本內(nèi)容，此時公共樣式表中事先聲明的段落樣式會直接應用到這里，且為了方便后續(xù)定位為其配置了id="tips"屬性。14.4.2答題頁設計3解析區(qū)域設計運行效果如下圖所示。此時答題頁的解析區(qū)域就已經(jīng)設計完成，下面將介紹底部按鈕區(qū)域設計。14.4.2答題頁設計4按鈕區(qū)域設計該區(qū)域是id="btnBox"的<div>元素內(nèi)部內(nèi)容，包含兩個按鈕和中間的數(shù)字文本。相關HTML5代碼片段如下：1. <!--3.按鈕區(qū)域-->2. <divid="btnBox"class="boxflexH

alignCenter

flexBetween">3. <!--3-1“上一題”按鈕-->4. <buttonclass="redBtn">上一題</button>5. <!--3-2中間數(shù)字標識-->6. <div><spanid="currentNum">1</span>/10</div>7. <!--3-3“下一題”按鈕-->8. <buttonclass="redBtn">下一題</button>9. </div>上述代碼使用按鈕元素<buttonclass="redBtn">顯示左右兩側(cè)的按鈕，其中redBtn是在公共樣式表中事先聲明過的樣式，表示紅底白字的圓角按鈕風格；中間使用了<div>顯示數(shù)字標識區(qū)域，其內(nèi)部格式為“1/10”表示一共10題，當前第1題，由于當前第幾題未來需要動態(tài)變化，這里使用<spanid="currentNum">括住當前題號以便后續(xù)可以快速定位到此處。14.4.2答題頁設計4按鈕區(qū)域設計運行效果如下圖所示。此時答題頁的按鈕區(qū)域就已經(jīng)設計完成，整個答題頁設計完畢。當前由于尚未使用jQueryAJAX技術獲取題庫數(shù)據(jù)，因此當前顯示的僅為樣式效果。14.4.3結果頁設計

結果頁主要分為分數(shù)展示區(qū)域和按鈕區(qū)域兩個部分組成。上圖中的兩個區(qū)域內(nèi)容具體解釋如下：分數(shù)展示區(qū)域：使用<p>元素完成，并將其中數(shù)字用<span>元素括住便于定位。按鈕區(qū)域：使用<button>元素完成。14.4.3結果頁設計

在Result.html中使用<divclass="box">元素將這兩個區(qū)域嵌套在內(nèi)部呈現(xiàn)出來，相關代碼如下：1. <body>2. <!--標題-->3. <h3>思政答題平臺</h3>4. <!--水平線-->5. <hr/>6. <!--結果展示區(qū)域-->7. <divclass="box">8. <!--分數(shù)展示文本-->9. <p>您的分數(shù)是<spanid="finalScore">0</span>分。</p>10. <!--“重新作答”按鈕-->11. <buttonclass="redBtn">重新作答</button>12. </div>13. </body>這段代碼使用段落元素<p>顯示分數(shù)描述文本，并在其中使用了<spanid="finalScore">特別表示分數(shù)數(shù)值方便未來定位和更新；按鈕元素<buttonclass="redBtn">顯示“重新作答”按鈕，其中redBtn是在公共樣式表中事先聲明過的樣式，表示紅底白字的圓角按鈕風格；14.4.3結果頁設計

由于結果頁自身的樣式不多，可以繼續(xù)寫到common.css中，這里新增一個關于分數(shù)數(shù)值樣式的美化代碼。相關CSS文件代碼片段如下：1. /*一、公共樣式（…內(nèi)容略…）*/2. /*二、答題頁樣式（…內(nèi)容略…）*/3. 4. /*三、結果頁樣式*/5. /*分數(shù)文本*/6. #finalScore{7. color:#890000;/*文字顏色為紅色*/8. font-size:40px;/*字體大小*/9. font-weight:bold;/*字體加粗*/10. padding:10px;/*內(nèi)邊距10px*/11. }14.4.3結果頁設計

運行效果如下圖所示。此時結果頁就已經(jīng)設計完成。14.5邏輯實現(xiàn)14.5.1答題頁邏輯 14.5.2結果頁邏輯 14.5.1答題頁邏輯1初始化公共參數(shù)本示例使用外部JS文件實現(xiàn)jQuery相關代碼。在js文件夾中創(chuàng)建quiz.js文件，并在RedQuiz.html文件的<head>首尾標簽中聲明對JS文件的引用。相關HTML5代碼片段如下：1. <head>2. <metacharset="utf-8">3. <title>思政答題平臺</title>4. <linkrel="stylesheet"href="css/common.css">5. <scriptsrc="js/jquery-1.12.3.min.js"></script>6. <scriptsrc="js/quiz.js"></script>7. </head>14.5.1答題頁邏輯1初始化公共參數(shù)首先進行公共參數(shù)的聲明和初始化，quiz.js中相關代碼如下：1. //公共參數(shù)2. vartotal=10;//題目總數(shù)3. varcurrent=1;//當前第幾題4. varquestion={};//當前題目數(shù)據(jù)5. varanswerArr=[];//記錄每題用戶的選項與得分6. //初始化每題選項與得分7. for(vari=0;i<total;i++){8. answerArr[i]={9. score:0,10. answer:‘’};}上述代碼將公共參數(shù)進行了初始化，其中answerArr是數(shù)組的形式，用于記錄答題情況，由于當前尚未開始答題，因此先將每題的用戶得分都歸零，當用戶開始答題后再更新此數(shù)組。14.5.1答題頁邏輯2請求獲取數(shù)據(jù)在quiz.js中添加自定義函數(shù)requestData()用于向服務器發(fā)出請求獲取當前題目數(shù)據(jù)：1. //更新當前數(shù)據(jù)2. functionrequestData(){3. //使用ajax()方法調(diào)用服務器端接口獲取數(shù)據(jù)4. $.ajax({5. url:"api/search.php",6. method:"GET",7. data:{8. id:current9. },10. dataType:"json",11. success:function(data){12. //判斷是否查到了結果13. if(data.status_code==1){//查到了14. //獲取題目數(shù)據(jù)15. question=data.question_data;16. //更新題目數(shù)據(jù)17. updateQuestion();18. }else{//沒查到19. alert("Ops...沒有查到這道題目");20. }21. }22. });23. }上述代碼表示使用jQueryAJAX技術向服務器同一個目錄下的api/search.php接口文件發(fā)起請求，且請求參數(shù)id是攜帶的取值就是題號current的值。如果返回值中的status_code取值是1就表示獲取到了題目數(shù)據(jù)并將數(shù)據(jù)更新給公共參數(shù)question以便后續(xù)使用，返回值是0就表示沒有查到相關題目。14.5.1答題頁邏輯2請求獲取數(shù)據(jù)在ajax()方法的成功回調(diào)函數(shù)內(nèi)更新題目用的updateQuestion()為自定義函數(shù)，用于把公共參數(shù)question的數(shù)據(jù)值依次更新到頁面對應位置上。quiz.js中相關代碼如下：1. //更新題目數(shù)據(jù)2. functionupdateQuestion(){3. //更新題型4. $("#type").text(question.type);5. //更新分值6. $("#score").text(question.score+"分");7. //更新題目8. $("#question").text(question.question);9. //更新選項10. updateOptions();11. //更新解析12. $("#tips").text(question.tips);13. //更新當前第幾題14. $("#currentNum").text(current);15. //更新底部按鈕文字顯示16. updateBtnTxt();17. }其中大部分數(shù)據(jù)都可以直接通過id選擇器更新文本內(nèi)容，例如題型type、分值score、題目question、解析tips等，只要字段名都對應上即可。其中更新選項和更新底部按鈕文字顯示需要執(zhí)行的代碼內(nèi)容較多，因此不妨先分別封裝成自定義函數(shù)updateOptions()和updateBtnTxt()的形式，然后逐一補充完整。14.5.1答題頁邏輯2請求獲取數(shù)據(jù)updateOptions()用于更新選項顯示效果，在quiz.js中代碼如下：1. //更新選項2. functionupdateOptions(){3. //清除所有選中狀態(tài)4. $("#optionForm

input:checked").prop("checked",false);5. //清除所有隱藏狀態(tài)6. $("#optionForm>div").show();7. //默認先都切換為單選框8. $("#optionForminput").attr("type","radio");9. //更新全部選項文字10. $(".optionsTxt:eq(0)").text(question.optionA);11. $(".optionsTxt:eq(1)").text(question.optionB);12. $(".optionsTxt:eq(2)").text(question.optionC);13. $(".optionsTxt:eq(3)").text(question.optionD);14. 15. //如果當前是判斷題16. if(question.type=="判斷題"){17. //隱藏選項C和D18. $("#optionForm>div:eq(2)").hide();19. $("#optionForm>div:eq(3)").hide();20. }21. //如果當前是多選題22. elseif(question.type=="多選題"){23. //切換為多選框24. $("#optionForminput").attr("type","checkbox");25. }26. }14.5.1答題頁邏輯2請求獲取數(shù)據(jù)

updateBtnTxt()用于更新底部按鈕文字顯示，例如在做最后一題時不再