#注册校验
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<!--<script>
function checkForm(){
//alert("aa");
var uValue = document.getElementById("user").value;
if(uValue==""){
alert("用户名不能为空");
return false;
}
var pValue = document.getElementById("password").value;
if(pValue==""){
alert("密码不能为空");
return false;
}
var reValue = document.getElementById("repassword").value;
if(reValue!=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;
}
/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
var userValue = document.getElementById("username").value;
if(userValue==""){
alert("姓名不能为空");
return false;
}
}
</script>-->
<script>
function showTips(id,info){
document.getElementById(id+"span").innerHTML="<font color='gray'>"+info+"</font>";
}
function check(id,info){
uValue=document.getElementById(id).value;
if(uValue==""){
document.getElementById(id+"span").innerHTML="<font color='red'>"+info+"</font>";
}else{
document.getElementById(id+"span").innerHTML="";
}
}
</script>
</head>
<body>
<table border="1px" align="center" cellpadding="0px" cellspacing="0px" width="1300px">
<tr>
<td>
<table width="100%" border="1px">
<tr height="50px">
<td width="33.3%" height="47px"><img src="img/logo2.png"/></td>
<td width="33.3%" height="47px"><img src="img/header.png"/></td>
<td width="33.3%" height="47px">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</td>
</tr>
</table>
</td>
</tr>
<!--导航栏-->
<tr height="50px">
<td bgcolor="black">
<a href="#"><font size="5" 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>
<td height="600px" background="img/regist_bg.jpg">
<form action="#" method="get" name="regForm "onsubmit="return checkForm()" >
<table border="1px" width="750px" height="360px" align="center" cellpadding="0px" cellspacing="0px">
<tr height="40px">
<td colspan="2">
<font size="4">会员注册</font> USER FREGISTER
</td>
</tr>
<tr>
<td>用户名</td>
<td>
<input type="text" name="username" size="34px" id="user" onfocus="showTips('user','用户必填！')" onblur="check('user','用户名不能为空！')"/><span id="userspan"></span>
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input type="password" name="password" size="34px" id="password" onfocus="showTips('password','密码必填！')" onblur="check('password','密码不能为空！')"/><span id="passwordspan"></span>
</td>
</tr>
<tr>
<td>确认密码</td>
<td>
<input type="password" name="repassword" size="34px" id="repassword"/>
</td>
</tr>
<tr>
<td>email</td>
<td>
<input type="text" name="email" size="34px" id="email"/>
</td>
</tr>
<tr>
<td>姓名</td>
<td>
<input type="text" name="username" size="34px" id="username"/>
</td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" value="男" size="34px"/>男
<input type="radio" name="sex" value="女" size="34px"/>女
</td>
</tr>
<tr>
<td>出生日期</td>
<td>
<input type="text" name="birthday" size="34px"/>
</td>
</tr>
<tr>
<td>验证码</td>
<td>
<input type="text" name="yzm"/>
<img src="img/yanzhengma.png" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" />
</td>
</tr>
</table>
</form>
</td>
</tr>
<tr>
<td>
<img src="img/footer.jpg" width="100%" />
</td>
</tr>
<tr>
<td align="center">
<a href="#">关于我们</a>
<a href="#">关于我们</a>
<a href="#">关于我们</a>
<a href="#">关于我们</a>
<a href="#">关于我们</a>
<a href="#">关于我们</a>
<p>关于我们</p>
</td>
</tr>
</table>
</body>
</html>
#轮播图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
a{
text-decoration: none;
}
#father{
border: 0px solid red;
width: 1300px;
height: 2170px;
margin: auto;
}
#logo{
border: 0px solid black;
width: 1300px;
height: 50px;
}
.top{
border: 0px solid blue;
width: 431px;
height:50px;
float: left;
}
#top{
padding-top:12px ;
height: 38px;
}
#menu{
border: 0px solid red;
width: 1300px;
height: 50px;
background-color: black;
margin-bottom: 10px;
}
ul li{
display: inline;
color: white;
}
#product{
border: 0px solid red;
width: 1300px;
height: 558px;
}
#product_top{
border: 0px solid blue;
width: 100%;
height: 45px;
padding: 8px;
}
#product_bottom{
border: 0px solid green;
width: 100%;
height: 500px;
}
#product_bottom_left{
border: 0px solid pink;
width: 200px;
height: 500px;
float: left;
}
#product_bottom_right{
border: 0px solid blue;
width: 1094px;
height: 500px;
float: left;
}
#big{
border: 0px solid red;
width: 544px;
height: 248px;
float: left;
}
.small{
border: 0px solid blue;
width: 180px;
height: 248px;
float: left;
text-align: center;
}
#bottom{
text-align: center;
}
</style>
<!--<script>
function init(){
window.setInterval("changeImg()",500);
time = window.setInterval("showAd()",500);
}
var i=0;
function changeImg(){
i++;
document.getElementById("img1").src="../../img/"+i+".jpg";
if(i==3){
i=0;
}
}
function showAd(){
var adEle = document.getElementById("img2");
adEle.style.display="block";
clearInterval(time);
time2 = setInterval("haddenAd()",500);
}
function haddenAd(){
document.getElementById("img2").style.display="none";
clearInterval(time2);
}
</script>-->
<script type="text/javascript" src="1..js"></script>
</head>
<body onload="init()">
<div id="father">
<!--定时弹出广告位置-->
<img src="../../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%" style="display: none;" id="img2"/>
<!--logo-->
<div id="logo">
<div class="top">
<img src="../../img/logo2.png" height="46px"/>
</div>
<div class="top">
<img src="../../img/header.png" height="46px" />
</div>
<div class="top" id="top">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</div>
</div>
<!--导航栏-->
<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>
</ul>
</div>
<!--轮播图-->
<div id="">
<img src="../../img/1.jpg" width="100%" id="img1"/>
</div>
<!--最新商品-->
<div id="product">
<div id="product_top">
<span style="font-size: 25px;">最新商品</span>
<img src="../../img/title2.jpg" />
</div>
<div id="product_bottom">
<div id="product_bottom_left">
<img src="../../img/big01.jpg" width="100%" height="100%" />
</div>
<div id="product_bottom_right">
<div id="big">
<a href="#"><img src="../../img/middle01.jpg" width="100%" height="100%"/></a>
</div>
<div class="small">
<img src="../../img/small03.jpg"/>
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">￥399</p>
</div>
<div class="small">
<img src="../../img/small03.jpg"/>
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">￥399</p>
</div>
<div class="small">
<img src="../../img/small03.jpg"/>
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">￥399</p>
</div>
<div class="small">
<img src="../../img/small03.jpg"/>
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">￥399</p>
</div>
<div class="small">
<img src="../../img/small03.jpg" />
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">￥399</p>
</div>
<div class="small">
<img src="../../img/small03.jpg"/>
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">￥399</p>
</div>
<div class="small">
<img src="../../img/small03.jpg"/>
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">￥399</p>
</div>
<div class="small">
<img src="../../img/small03.jpg" />
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">￥399</p>
</div>
<div class="small">
<img src="../../img/small03.jpg"/>
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">￥399</p>
</div>
</div>
</div>
</div>
<!--广告图片-->
<div id="">
<img src="../../img/ad.jpg" width="100%" height="100%" />
</div>
<!--最新商品-->
<div id="product">
<div id="product_top">
<span style="font-size: 25px;">最新商品</span>
<img src="../../img/title2.jpg" />
</div>
<div id="product_bottom">
<div id="product_bottom_left">
<img src="../../img/big01.jpg" width="100%" height="100%" />
</div>
<div id="product_bottom_right">
<div id="big">
<a href="#"><img src="../../img/middle01.jpg" width="100%" height="100%"/></a>
</div>
<div class="small">
<img src="../../img/small03.jpg"/>
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">￥399</p>
</div>
<div class="small">
<img src="../../img/small03.jpg"/>
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">￥399</p>
</div>
<div class="small">
<img src="../../img/small03.jpg"/>
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">￥399</p>
</div>
<div class="small">
<img src="../../img/small03.jpg"/>
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">￥399</p>
</div>
<div class="small">
<img src="../../img/small03.jpg" />
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">￥399</p>
</div>
<div class="small">
<img src="../../img/small03.jpg"/>
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">￥399</p>
</div>
<div class="small">
<img src="../../img/small03.jpg"/>
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">￥399</p>
</div>
<div class="small">
<img src="../../img/small03.jpg" />
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">￥399</p>
</div>
<div class="small">
<img src="../../img/small03.jpg"/>
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">￥399</p>
</div>
</div>
</div>
</div>
<!--广告图片-->
<div id="">
<img src="../../img/footer.jpg" width="100%" height="100%" />
</div>
<!--友情连接-->
<div id="bottom">
<a href="#">关于我们</a>
<a href="#">关于我们</a>
<a href="#">关于我们</a>
<a href="#">关于我们</a>
<a href="#">关于我们</a>
<a href="#">关于我们</a>
<p>关于我们</p>
</div>
</div>
</body>
</html>
#复选框的全选和全部选
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function checkAll(){
var checkAllEle = document.getElementById("checkAll");
if(checkAllEle.checked==true){
var checkOnes = document.getElementsByName("checkOne");
for (var i=0;i<checkOnes.length;i++) {
checkOnes[i].checked=true;
}
}else{
var checkOnes = document.getElementsByName("checkOne");
for (var i=0;i<checkOnes.length;i++) {
checkOnes[i].checked=false;
}
}
}
</script>
</head>
<body>
<table border="1" width="500" height="50" align="center" >
<thead>
<tr>
<td colspan="4">
<input type="button" value="添加" />
<input type="button" value="删除" />
</td>
</tr>
<tr>
<th><input type="checkbox" onclick="checkAll()" id="checkAll"/></th>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr >
<td><input type="checkbox" name="checkOne"/></td>
<td>1</td>
<td>张三</td>
<td>22</td>
</tr>
<tr >
<td><input type="checkbox" name="checkOne"/></td>
<td>2</td>
<td>李四</td>
<td>25</td>
</tr>
<tr >
<td><input type="checkbox" name="checkOne"/></td>
<td>3</td>
<td>王五</td>
<td>27</td>
</tr>
<tr >
<td><input type="checkbox" name="checkOne"/></td>
<td>4</td>
<td>赵六</td>
<td>29</td>
</tr>
<tr >
<td><input type="checkbox" name="checkOne"/></td>
<td>5</td>
<td>田七</td>
<td>30</td>
</tr>
<tr >
<td><input type="checkbox" name="checkOne"/></td>
<td>6</td>
<td>汾九</td>
<td>20</td>
</tr>
</tbody>
</table>
</body>
</html>
#省市二级联动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册页面重新布局</title>
<style type="text/css">
.top{
border: 1px solid red;
width: 32.9%;
height: 50px;
float: left;
}
#clear{
clear: both;
}
#menu{
border: 1px solid blue;
width: 99%;
height: 40px;
background-color: black;
}
#menu ul li{
display: inline;
color: white;
font-size: 19px;
}
#bottom{
text-align: center;
}
#contanier{
border: 1px solid red;
width: 99%;
height: 600px;
background: url(../img/regist_bg.jpg);
position: relative;
}
#content{
border: 5px solid gray;
width: 50%;
height: 60%;
position: absolute;
top: 100px;
left: 300px;
background-color: white;
padding-top: 50px;
}
</style>
<script>
var cities=new Array(3);
cities[0]=new Array("郑州","郑州","郑州","郑州");
cities[1]=new Array("商丘","商丘","商丘","商丘");
cities[2]=new Array("安阳","安阳","安阳","安阳");
cities[3]=new Array("洛阳","洛阳","洛阳","洛阳");
function changeCity(val){
var cityEle = document.getElementById("city");
cityEle.options.length=0;
for (var i=0;i<cities.length;i++) {
if(val==i){
for (var j=0;j<cities[i].length;j++) {
//alert(cities[i][j]);
var textNode=document.createTextNode(cities[i][j]);
var opEle = document.createElement("option");
opEle.appendChild(textNode);
cityEle.appendChild(opEle);
}
}
}
}
</script>
</head>
<body>
<div>
<!--1.logo部分的div-->
<div>
<!--切分为3个小的div-->
<div class="top">
<img src="../img/logo2.png" height="47px"/>
</div>
<div class="top">
<img src="../img/header.png" height="47px"/>
</div>
<div class="top" style="padding-top: 15px;height: 35px;">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</div>
</div>
<!--清除浮动-->
<div id="clear">
</div>
<!--2.导航栏部分的div-->
<div id="menu">
<ul>
<li >首页</li>
<li >电脑办公</li>
<li >手机数码</li>
<li >孕婴保健</li>
<li >鞋靴箱包</li>
</ul>
</div>
<!--3.中间注册表单部分div-->
<div id="contanier">
<div id="content">
<table border="1" align="center" cellpadding="0" cellspacing="0" width="70%" height="70%" bgcolor="white">
<form method="get" action="#" onsubmit="return checkForm()">
<tr>
<td colspan="2" align="center">
<font size="5">会员注册</font>
</td>
</tr>
<tr>
<td>
用户名
</td>
<td>
<input type="text" name="username" id="username" onfocus="showTips('username','必须以字母开头')" onblur="check('username','用户名不能为空')" /><span id="usernamespan"></span>
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input type="password" name="password" id="password" onfocus="showTips('password','密码长度不能低于6位！')" onblur="check('password','密码不能为空！')" /><span id="passwordspan"></span>
</td>
</tr>
<tr>
<td>确认密码</td>
<td>
<input type="password" name="repassword" />
</td>
</tr>
<tr>
<td>email</td>
<td>
<input type="text" name="email" id="email" />
</td>
</tr>
<tr>
<td>姓名</td>
<td>
<input type="text" name="name" />
</td>
</tr>
<!--1.编写HTML文件部分的内容-->
<tr>
<td>籍贯</td>
<td>
<!--2.确定事件，通过函数传参的方式拿到改变后的城市-->
<select onchange="changeCity(this.value)">
<option>--请选择--</option>
<option value="0">湖北</option>
<option value="1">湖南</option>
<option value="2">河南</option>
<option value="3">河北</option>
</select>
<select id="city">
</select>
</td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女
</td>
</tr>
<tr>
<td>出生日期</td>
<td>
<input type="text" name="birthday" />
</td>
</tr>
<tr>
<td>验证码</td>
<td>
<input type="text" name="yanzhengma" />
<img src="../img/yanzhengma.png" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="注册" />
</td>
</tr>
</form>
</table>
</div>
</div>
<!--4.广告图片的div-->
<div id="">
<img src="../img/footer.jpg" width="99%" />
</div>
<!--5.超链接与版权信息的div-->
<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>
<p>Copyright © 2005-2016 传智商城 版权所有 </p>
</div>
</div>
</body>
</html>
扫一扫
1418
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
