本文使用簡單的 html標(biāo)簽+div+css+JavaScript 實(shí)現(xiàn)帶有表單提交和圖片輪播效果的商城網(wǎng)站設(shè)計胸懈，效果如下圖，源碼下載github鏈接（以下僅列舉設(shè)計過程中的部分注意點(diǎn)）
一正罢、搭建網(wǎng)站首頁
-
首頁的所有內(nèi)容可以放置在一個大的table標(biāo)簽中，再通過嵌入表格劃分模塊种蘸，并使用div+css在各個模塊中添加居中等css效果
整體布局
-
商品列表模塊添加圖片
如下圖在table的單元格中插入圖片可以居中顯示矿辽，且在下方有文字說明
商品列表效果圖
需要使用align的居中屬性钉赁，并設(shè)置width的值為百分比
代碼實(shí)現(xiàn)
二蹄殃、搭建網(wǎng)站注冊頁面
-
表單標(biāo)簽：所有需要提交到服務(wù)器端的表單項(xiàng)必須使用<form></form>括起來
注冊頁面 -
表單提交的是value里的內(nèi)容，所以表單中除了file類型都需要設(shè)置value值用于上傳到后臺
設(shè)置value -
默認(rèn)勾選屬性在option標(biāo)簽中是selected而不是checked
默認(rèn)勾選屬性
-
按鈕不需要name屬性
按鈕不需要name屬性
- H5有required屬性你踩，規(guī)定該文本區(qū)域是必填的
三诅岩、搭建網(wǎng)站后臺管理頁面
- 使用框架結(jié)構(gòu)標(biāo)簽<frameset>可以使同一個瀏覽器窗口中顯示不止一個頁面
-
實(shí)現(xiàn)左邊框架超鏈接打開的頁面顯示在右邊框架中的代碼如下
Paste_Image.png
四、JS完成表單校驗(yàn)
-
在form標(biāo)簽添加onsubmit事件,并為其綁定一個函數(shù)
onsubmit綁定js函數(shù) 書寫函數(shù)带膜，用于獲取用戶輸入的數(shù)據(jù)（獲取數(shù)據(jù)時需要在指定位置定義一個id）
-
對用戶輸入的數(shù)據(jù)進(jìn)行判斷（使用document.getElementById("").value與判斷值比較）
書寫值判斷函數(shù).png -
控制表單提交：若輸入數(shù)據(jù)非法吩谦，提示錯誤信息并通過返回一個false阻止表單提交
返回false則表單提交失敗.png 利用正則表達(dá)式驗(yàn)證郵箱
五、bootstrap的登入表單
-
在html頭中引入bootstrap庫文件
-
在body中寫入登入表單代碼
image.png
六膝藕、JS實(shí)現(xiàn)圖片輪播
- 定時器：BOM瀏覽器對象模型中window窗口對象的定時器方法式廷， 結(jié)果都將返回一個唯一的id值，一般用于清除定時器
setInterval("run",3000)方法為每隔3秒執(zhí)行一次run方法
setTimeout("run",3000)方法為3秒后執(zhí)行一次run方法
-
在body標(biāo)簽中添加onload事件芭挽，并綁定一個帶有定時器和更換圖片源文件位置的函數(shù)
設(shè)置定時器和改變圖片資源文件目錄的函數(shù) -
套用jquery代碼實(shí)現(xiàn)手風(fēng)琴輪播效果
效果圖：
七滑废、JS實(shí)現(xiàn)頁面定時彈出廣告
預(yù)期效果：與JS實(shí)現(xiàn)輪播圖片相同，通過onload綁定一個顯示圖片的定時操作函數(shù)袜爪，計時結(jié)束后執(zhí)行顯示廣告圖片函數(shù)蠕趁，之后清除定時操作，再重新隱藏廣告圖片
-
使用 display屬性的block/none值 在頁面指定位置 顯示/隱藏 一個廣告圖片
display屬性 -
清除定時操作
clearInterval方法介紹 -
特別注意setInterval方法返回的id值賦值給的成員變量不能用var修飾辛馆，因?yàn)镴S的函數(shù)中如果成員變量用var修飾的話就成為局部變量俺陋，則不能在其他函數(shù)中調(diào)用
var與成員變量.png
八、用JS完善注冊表單校驗(yàn)
-
在input標(biāo)簽中添加onclick聚焦事件和onblur離焦事件，完成當(dāng)鼠標(biāo)點(diǎn)擊輸入框和鼠標(biāo)點(diǎn)擊另一個輸入框后提示不同的內(nèi)容
表單驗(yàn)證效果 -
代碼重用：相同的代碼不變腊状，不同的代碼用變量代替
代碼重用
九诱咏、JS完成表單各行換色與高亮
-
表格標(biāo)簽中包含的 thead， th 寿酌，tbody 標(biāo)簽
表格標(biāo)簽 JS可以書寫匿名函數(shù)
-
注意當(dāng)一個script標(biāo)簽中書寫兩個相同的 window.onload = funciton(){} 胰苏，則最新的會覆蓋之前的
JS的匿名函數(shù) 通過onmouseover/onmouseout 鼠標(biāo)懸停和移除事件設(shè)置表格當(dāng)前行數(shù)高亮
-
獲取標(biāo)簽后設(shè)置css樣式
獲取標(biāo)簽并修改css樣式
十、使用JS完成注冊表單的省市二級聯(lián)動
onchange：當(dāng)用戶改變內(nèi)容時使用這個事件（二級聯(lián)動）
-
使用方法傳參的方式：this.value 獲取用戶選擇的省份的value值醇疼，this代表當(dāng)前操作對象
this.value傳遞選擇選項(xiàng)的value值 -
使用一個二維數(shù)組來儲存省份和城市（從數(shù)據(jù)庫中導(dǎo)入）硕并，并通過遍歷數(shù)組來獲取省份與用戶選擇的省份比較，如果相同了繼續(xù)遍歷該省份下所有的城市秧荆。
創(chuàng)建二維數(shù)組.png -
DOM文檔對象模型中創(chuàng)建節(jié)點(diǎn)倔毙、文本節(jié)點(diǎn)、添加子節(jié)點(diǎn)等常用的方法
DOM常用方法.png JS內(nèi)置對象中Array對象的數(shù)組長度可變乙濒，數(shù)組的長度為最大角標(biāo)加1
