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