本文使用简单的 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
