今天先汇报一下进度，js 实现表单的校验，以及轮播图的放映。
js的简单语法规范，
表单校验的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function checkForm(){
//校验用户名
//1、获取用户输入的数据
var uValue = document.getElementById("username").value;//这句话意思是 获取id .value的意思是获取id 对应的内容
if(nValue==""){//若为空
alert("用户名不能为空！");
return false;
}
var pValue = document.getElementById("pwd").value;
if(pValue==""){
alert("密码不能为空！");
return false;
}
var rpValue = document.getElementById("repwd").value;
if(rpValue!=pValue){
alert("两次输入的密码不一致！");
return false;
}
//校验邮箱
var eValue = document.getElementById("email").value;
if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])/.test(eValue))
{
alert("邮箱格式不正确！");
return false;
}
}
</script>
</head>
<body>
<table border="1px" align="center" width="1300px" cellpadding="0px">
<!--logo-->
<tr>
<td>
<table width="100%">
<tr height="50px">
<td width="33.3%">
<img src="../img/logo2.png" height="47px" alt="" />
</td>
<td width="33.3%">
<img src="../img/header.png" height="47px" />
</td>
<td width="33.3%">
<a href="https://www.baidu.com/?tn=06074089_11_dg">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</td>
</tr>
</table>
</td>
</tr>
<!--daohao-->
<tr height="50px">
<td bgcolor="black">
<a href="#">
<font size="4" color="white">首页</font>
</a>
<a href="#">
<font color="white">手机数码</font>
</a>
<a href="#">
<font color="white">电脑办公</font>
</a>
<a href="#">
<font color="white">鞋靴箱包</font>
</a>
<a href="#">
<font color="white">电用家器</font>
</a>
</td>
</tr>
<!--注册表单-->
<tr height="600px" background="../img/regist_bg.jpg">
<td>
<form action="regist 校验.html" name="regForm" method="post" onsubmit="return checkForm()">
<table border="1px" width="750px" height="400px" align="center" cellpadding="0px" bgcolor="white">
<tr height="40px">
<td colspan="2">
<font size="4" color="blue">会员注册</font> USER REGISTER
</td>
</tr>
<tr>
<td>
<b>用户名</b>
</td>
<td>
<input type="text" name="username" placeholder="请输入用户名" id="username" />
</td>
</tr>
<tr>
<td>
<b>密码</b>
</td>
<td>
<input type="password" name="pwd" placeholder="请输入密码" id="pwd" />
</td>
</tr>
<tr>
<td>
<b>确认密码</b>
</td>
<td>
<input type="password" name="repwd" placeholder="请输入确认密码" id="repwd" />
</td>
</tr>
<tr>
<td>
<b>Email</b>
</td>
<td>
<input type="text" name="email" placeholder="Email" id="email" /><!-- 这里的id 校验用到 -->
</td>
</tr>
<tr>
<td>
<b>姓名</b>
</td>
<td>
<input type="text" name="name" placeholder="请输入姓名" id="name" />
</td>
</tr>
<tr>
<td>
<b>性别</b>
</td>
<td>
<input type="radio" name="sex" value="男" />男
<input type="radio" name="sex" value="女" />女<br />
</td>
</tr>
<tr>
<td>
<b>出生日期</b>
</td>
<td>
<input type="text" name="birth" placeholder="年/月/日" size="34px" id="birth" />
</td>
</tr>
<tr>
<td>
<b>验证码</b>
</td>
<td>
<input type="text" name="yz" />
<img src="../img/yanzhengma.png" alt="验证码" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="注册" />
</td>
</tr>
</table>
</form>
</td>
</tr>
<!--广告-->
<tr>
<td><img src="../img/footer.jpg" width="100%" alt="" /></td>
</tr>
<!--版权-->
<tr>
<td align="center">
<font>
<a href="#">关于我们</a>
<a href="#">联系我们</a>
<a href="#">招贤纳士</a>
<a href="#">法律声明</a>
<a href="#">友情链接</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服务声明</a>
<a href="#">广告声明</a> <br /><br /> Copyright ©2005-2016传智商城 版权所有
</font>
</td>
</tr>
</table>
</body>
</html>
嗯 ……图片的话自己找就行了，我只是做了个演示。
思路：
（明天再提交，今天电脑要没电了，抱歉）
然后是 轮播图，实现访问页面时，图片自动切换并循环。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="21.css" />
<script type="text/javascript">
function init()
{
//书写轮播图片的定时操作
window.setInterval("changeImg()",4000);
}
//书写函数
var i=0;
function changeImg(){
i++;
//获取图片位置 并设置src属性值
document.getElementById("img1").src="../../img/"+i+".jpg";
if(i==3){
i=0;
}
}
</script>
</head>
<body onload="init()"><!--init() 初始化-->
<div id="father">
<!--1-->
<div id="logo">
<div class="top">
<img src="../../img/logo2.png" height="46px" alt="" />
</div>
<div class="top">
<img src="../../img/header.jpg" height="46px" alt="" />
</div>
<div class="top" id="top">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</div>
</div>
<!--2-->
<div id="menu">
<ul>
<a href="#"><li style="font-size:20px">首页</li></a>
<a href="#"><li>手机数码</li></a>
<a href="#"><li>电脑办公</li></a>
<a href="#"><li>家用电器</li></a>
<a href="#"><li>鞋靴箱包</li></a>
<a href="#"><li>孕婴保健</li></a>
<a href="#"><li>奢侈品</li></a>
</ul>
</div>
<!--3-->
<div>
<img src="../../img/1.jpg" width="100%" id="img1" alt="" />
</div>
<!--4-->
<div>
<div id="pr_top">
<span><font size="4">最新商品</font></span>
<img src="../../img/title2.jpg" alt="" />
</div>
<div id="pr_bottom">
<div id="left">
<img src="../../img/big01.jpg" width="100%" height="100%" alt="" />
</div>
<div id="right">
<div id="big">
<img src="../../img/middle01.jpg" width="100%" height="100%" alt="" />
</div>
<div class="small">
<a href="#"><img src="../../img/small03.jpg" /></a>
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">￥499</p>
</div>
<div class="small">
<a href="#"><img src="../../img/small03.jpg" /></a>
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">￥499</p>
</div>
<div class="small">
<a href="#"><img src="../../img/small03.jpg" /></a>
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">￥499</p>
</div>
<div class="small">
<a href="#"><img src="../../img/small03.jpg" /></a>
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">￥499</p>
</div>
<div class="small">
<a href="#"><img src="../../img/small03.jpg" /></a>
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">￥499</p>
</div>
<div class="small">
<a href="#"><img src="../../img/small03.jpg" /></a>
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">￥499</p>
</div>
<div class="small">
<a href="#"><img src="../../img/small03.jpg" /></a>
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">￥499</p>
</div>
<div class="small">
<a href="#"><img src="../../img/small03.jpg" /></a>
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">￥499</p>
</div>
<div class="small">
<a href="#"><img src="../../img/small03.jpg" /></a>
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">￥499</p>
</div>
</div>
</div>
</div>
<!--5-->
<div>
<img src="../../img/ad.jpg" width="100%" alt="" />
</div>
<!--6-->
<div>
<div id="pr_top">
<span><font size="4">热门商品</font></span>
<img src="../../img/title2.jpg" alt="" />
</div>
<div id="pr_bottom">
<div id="left">
<img src="../../img/big01.jpg" width="100%" height="100%" alt="" />
</div>
<div id="right">
<div id="big">
<img src="../../img/middle01.jpg" width="100%" height="100%" alt="" />
</div>
<div class="small">
<a href="#"><img src="../../img/small03.jpg" /></a>
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">￥499</p>
</div>
<div class="small">
<a href="#"><img src="../../img/small03.jpg" /></a>
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">￥499</p>
</div>
<div class="small">
<a href="#"><img src="../../img/small03.jpg" /></a>
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">￥499</p>
</div>
<div class="small">
<a href="#"><img src="../../img/small03.jpg" /></a>
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">￥499</p>
</div>
<div class="small">
<a href="#"><img src="../../img/small03.jpg" /></a>
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">￥499</p>
</div>
<div class="small">
<a href="#"><img src="../../img/small03.jpg" /></a>
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">￥499</p>
</div>
<div class="small">
<a href="#"><img src="../../img/small03.jpg" /></a>
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">￥499</p>
</div>
<div class="small">
<a href="#"><img src="../../img/small03.jpg" /></a>
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">￥499</p>
</div>
<div class="small">
<a href="#"><img src="../../img/small03.jpg" /></a>
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">￥499</p>
</div>
</div>
</div>
</div>
<!--7-->
<div>
<img src="../../img/footer.jpg" width="100%" alt="" />
</div>
<!--8-->
<div id="bottom">
<a href="#">关于我们</a>
<a href="#">联系我们</a>
<a href="#">招贤纳士</a>
<a href="#">法律声明</a>
<a href="#">友情链接</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服务声明</a>
<a href="#">广告声明</a> <br /><br />
Copyright ©2005-2016传智商城 版权所有
</div>
</div>
</body>
</html>
21.css文件：
#father{
width:1300px;
height: 2170px;
margin: auto;
}
#logo{
width: 1300px;
height: 50px;
}
.top{
width:431px;
height: 50px;
float:left;
}
#top{
padding-top: 12px;
height: 38px;
}
#menu{
border: 1px solid white;
width: 1300px;
height:50px;
background:black;
margin-bottom: 10px;
}
ul li{
display: inline;
color :white;
}
#pr{
width: 1300px;
height: 558px;
}
#pr_top{
width: 1300px;
height: 45px;
padding-top:8px;
}
#pr_bottom{
width: 1300px;
height: 500px;
}
#left{
width: 200px;
height: 500px;
float:left;
}
#right{
width: 1094px;
height: 500px;
float:left;
}
#big{
width: 544px;
height: 248px;
float:left;
}
.small{
width: 180px;
height: 248px;
float:left;
text-align: center;
}
#bottom{
text-align: center;
}
a{
text-decoration: none;
/*去掉超链接的下划线*/
}
思路：
来源：https://www.cnblogs.com/022414ls/p/12020034.html