網(wǎng)頁設(shè)計與制作（活頁式） 課件 情景9-7 課中案例

網(wǎng)頁設(shè)計與制作情景案例授課教師：喬振華HTMLCSSJavaScriptJavaScript目錄CONTENTS1案例分析2思政育人3知識導(dǎo)圖4案例操練5創(chuàng)新拓展案例分析01案例分析表單是網(wǎng)站非常重要的一部分，我們可以通過表單注冊，成為某個網(wǎng)站的會員，比如淘寶會員、支付寶會員、QQ、微信等，都需要登陸和注冊，都是通過表單來實現(xiàn)。今天我們要實現(xiàn)的案例，是在情景七案例的基礎(chǔ)上，利用JavaScript焦點(diǎn)事件和函數(shù)對表單頁面功能進(jìn)行完善，使其具有簡單的交互功能。那么，我們?nèi)绾螌崿F(xiàn)一個具有交互功能的注冊頁面呢，首先我們先思考幾個問題：

01如何通過DOM結(jié)構(gòu)獲取節(jié)點(diǎn)？

03如何設(shè)置焦點(diǎn)事件？思考

02如何利用函數(shù)生成驗證碼？案例分析那么，我們?nèi)绾螌崿F(xiàn)一個具有交互功能的注冊頁面呢，首先我們先思考幾個問題：02思政育人思政育人一個優(yōu)秀且友好的表單頁面要能夠清楚地顯示網(wǎng)站的要求，告訴用戶網(wǎng)站需要什么。比如用戶在填寫用戶名的時候，如果不明確提示用戶怎么填，用戶將不知道他填寫的內(nèi)容是否正確；尤其在填寫“密碼”字段，因為不同的產(chǎn)品有不同的要求，要明確告知用戶密碼的組成符號或位數(shù)是什么，用戶才能做到心中明了。思政育人有效溝通，善于表達(dá)這也告訴我們，平時在和他人溝通的時候，要能夠清晰的表達(dá)自己的需求，尤其是當(dāng)大家步入社會進(jìn)入公司的時候，做到有效溝通、信息明確、反饋互通，以保證任務(wù)順利實施，達(dá)成工作目標(biāo)，同時還有助于我們建立起良好的人際關(guān)系。03知識導(dǎo)圖案例探究本次案例所需要的知識線路圖04案例操練案例實施Step01

打開開發(fā)工具“HBuilderX”，選擇“文件”------>“新建”------>“項目”，打開如下圖所示對話框：創(chuàng)建項目寫好相應(yīng)的項目名稱后，選擇基本的HTML項目，點(diǎn)擊創(chuàng)建，即可完成項目的創(chuàng)建。案例實施

插入表單標(biāo)簽，并在表單標(biāo)簽里面嵌套一個四行兩列的表格，并將最后一行的兩個單元格合并，如下圖：Step02案例實施

接下來，為表格添加標(biāo)題，并在每個單元格中，分別寫入相應(yīng)的表單內(nèi)容，代碼如下：Step03案例實施表格中第三行和第四行的代碼案例實施Step04運(yùn)行效果圖案例實施

接下來使用CSS美化表單，我們先在css文件夾中新建一個form.css文件，右鍵css文件夾，選擇新建，css文件，起名為“form”，并將該文件引入到網(wǎng)頁中。Step05案例實施

接下來使用CSS美化表單，首先我們對表格和表格的標(biāo)題進(jìn)行修飾，設(shè)置表格的背景顏色、圓角半徑、字體大小，樣式如下：Step06案例實施

因為<fontid="namenote"></font>和<fontid="pwdnote"></font>是獲得焦點(diǎn)才顯示內(nèi)容，字體顏色設(shè)置為紅色，具體樣式如下：Step07案例實施

為按鈕添加樣式，如下圖：Step08案例實施

接下來是驗證碼的樣式<spanid=“ran”>1234</span>，以及“刷新”文字的樣式，如下圖：Step09案例實施Step10運(yùn)行效果圖案例實施Step11

下面開始事件的編寫，首先是焦點(diǎn)事件，分別在用戶名的輸入框和密碼的輸入標(biāo)簽中，各添加兩個帶參數(shù)的方法，一個是獲取焦點(diǎn)的方法，一個是失去焦點(diǎn)的方法，如下圖：案例實施Step12

在js文件夾中新建一個main.js文件，右鍵js文件夾，選擇新建，js文件，起名為“main”，并將該文件引入到網(wǎng)頁中。案例實施Step13

首先是焦點(diǎn)事件的編寫，以用戶名的輸入框獲取焦點(diǎn)為例，添加兩個帶參數(shù)的方法，一個是獲取焦點(diǎn)的方法，一個是失去焦點(diǎn)的方法，如下圖是用戶名的輸入框的焦點(diǎn)事件，密碼框類似：案例實施Step14

實現(xiàn)驗證碼，代碼如下如所示：最終效果圖如下，當(dāng)用戶名輸入框獲取焦點(diǎn)的時候，會提示相應(yīng)的紅色文字；點(diǎn)擊刷新，驗證碼會更新：案例實施05創(chuàng)新拓展任務(wù)拓展使用正則表達(dá)式，完成表單的驗證功能，如郵箱和電話的驗證，使表單的交互功能更豐富。3使用頁面加載事件window.onload，實現(xiàn)每次打開注冊頁面，都能隨機(jī)生成一個驗證碼。2將該注