<html lang="en"> <head> <meta charset="UTF-8"> <title>网易新用户注册页面</title> <link rel="stylesheet" href="css/register.css" /> </head> <script src="js/jquery-1.12.4.js" type="text/javascript"></script> <script src="js/show.js"></script> <body> <div id="header"><img src="images/register_logo.gif" alt="logo"/></div> <div id="main"> <form id="registerForm" action="" method="post" name="myform"> <dl> <dt>通行证用户名：</dt> <dd><input type="text" id="userName" class="inputs userWidth"/> @163.com</dd> <dd><div id="userNameId"></div></dd> </dl> <dl> <dt>登录密码：</dt> <dd><input type="password" id="pwd" class="inputs"/></dd> <dd><div id="pwdId"></div></dd> </dl> <dl> <dt>重复登录密码：</dt> <dd><input type="password" id="repwd" class="inputs"/></dd> <dd><div id="repwdId"></div></dd> </dl> <dl> <dt>性别：</dt> <dd><input name="sex" type="radio" value="" checked="checked"/>男 <input name="sex" type="radio" value="" />女 </dd> </dl> <dl> <dt>真实姓名：</dt> <dd><input type="text" id="realName" class="inputs" /></dd> </dl> <dl> <dt>昵称：</dt> <dd><input type="text" id="nickName" class="inputs"/></dd> <dd><div id="nickNameId"></div></dd> </dl> <dl> <dt>关联手机号：</dt> <dd><input type="text" id="tel" class="inputs"/></dd> <dd><div id="telId"></div></dd> </dl> <dl> <dt>保密邮箱：</dt> <dd><input type="email" id="email" class="inputs"/></dd> <dd><div id="emailId"></div></dd> </dl> <dl> <dt></dt> <dd><input name=" " type="image" src="images/button.gif"/></dd> </dl> </form> </div> </body> </html>
js文件如下
$(document).ready(function(){
$("form").submit(function(){
var flag=true;
if(!username()) flag=false;
if(!pwd()) flag=false;
if(!name()) flag=false;
if(!iphone()) flag=false;
if(!email()) flag=false;
return flag;
});
$("#userName").focus(function(){
$("#userNameId").html("密码由英文字母和数字组成的4-18位字符");
$("#userNameId").addClass("import_prompt")
})
$("#pwd").focus(function(){
$("#pwdId").html("密码由英文字母和数字组成的4-18位字符");
$("#pwdId").addClass("import_prompt")
});
$("#nickName").focus(function(){
$("#nickNameId").html("密码由英文字母和数字组成的4-18位字符");
$("#nickNameId").addClass("import_prompt")
});
$("#tel").focus(function(){
$("#telId").html("密码由英文字母和数字组成的4-18位字符");
$("#telId").addClass("import_prompt")
});
$("#email").focus(function(){
$("#emailId").html("密码由英文字母和数字组成的4-18位字符");
$("#emailId").addClass("import_prompt")
});
//用户名
function username(){
var username=$("#userName").val();
var $user=$("#userNameId");
var reg=/^[a-zA-Z][a-zA-Z0-9]{3,17}$/;
if(reg.test(username)==false){
$user.html("密码由英文字母和数字组成的4-18位字符");
$user.addClass("error_prompt");
return false;
}
$user.html("符合格式");
$user.addClass("ok_prompt");
return true;
}
//密码长度
function pwd(){
var userpwd=$("#pwd").val();
var $user=$("#pwdId");
var reg=/^[a-zA-Z0-9]{6,16}$/;
if(reg.test(userpwd)==false){
$user.html("密码由英文字母和数字组成的4-10位字符");
$user.addClass("error_prompt");
return false;
}
$user.html("符合格式");
$user.addClass("ok_prompt");
return true;
}
//昵称
function name(){
var userpwd=$("#nickName").val();
var $user=$("#nickNameId");
var reg=/^([u4e00-u9fa5]|w|[@!#$%&*])+$/;
if(reg.test(userpwd)==false){
$user.html("请正确输入昵称格式");
$user.addClass("error_prompt");
return false;
}
$user.html("符合格式");
$user.addClass("ok_prompt");
return true;
}
//手机号
function iphone(){
var userpwd=$("#tel").val();
var $user=$("#telId");
var reg= /^[1][358]d{9}$/;
if(reg.test(userpwd)==false){
$user.html("请正确输入手机号格式");
$user.addClass("error_prompt");
$user.addClass("ok_prompt");
return false;
}
$user.html("符合格式");
$user.addClass("ok_prompt");
return true;
}
//邮箱
function email(){
var userpwd=$("#email").val();
var $user=$("#emailId");
var reg= /^w+((-w+)|(.w+))*@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+)*.[A-Za-z0-9]+$/;
if(reg.test(userpwd)==false){
$user.html("有箱格式不符");
$user.addClass("error_prompt");
return false;
}
$user.html("符合格式");
$user.addClass("ok_prompt");
return true;
}
});
完成样式
1.
2.
以上是一个注册的表单验证
二，
以下是一个购物车的一些 什么 什么！！！！！！
<html lang="en"> <head> <meta charset="UTF-8"> <title>淘宝购物车页面</title> <link href="css/myCart.css" rel="stylesheet" /> </head> <script src="js/jquery-1.12.4.js" type="text/javascript"></script> <script src="js/show.js"></script> <body> <div id="header"><img src="images/taobao_logo.gif" alt="logo" /></div> <div id="nav">您的位置：<a href="#">首页</a> > <a href="#">我的淘宝</a> > 我的购物车</div> <div id="navlist"> <ul> <li class="navlist_red_left"></li> <li class="navlist_red">1. 查看购物车</li> <li class="navlist_red_arrow"></li> <li class="navlist_gray">2. 确认订单信息</li> <li class="navlist_gray_arrow"></li> <li class="navlist_gray">3. 付款到支付宝</li> <li class="navlist_gray_arrow"></li> <li class="navlist_gray">4. 确认收货</li> <li class="navlist_gray_arrow"></li> <li class="navlist_gray">5. 评价</li> <li class="navlist_gray_right"></li> </ul> </div> <div id="content"> <form action="" method="post" name="myform"> <table width="100%" border="0" cellspacing="0" cellpadding="0" id="shopping"> <tr> <td class="title_1"><input id="allCheckBox" type="checkbox" value=""/>全选</td> <td class="title_2" colspan="2">店铺宝贝</td> <td class="title_3">获积分</td> <td class="title_4">单价（元）</td> <td class="title_5">数量</td> <td class="title_6">小计（元）</td> <td class="title_7">操作</td> </tr> <tr> <td colspan="8" class="line"></td> </tr> <tr> <td colspan="8" class="shopInfo">店铺：<a href="#">纤巧百媚时尚鞋坊</a> 卖家：<a href="#">纤巧百媚</a> <img src="images/taobao_relation.jpg" alt="relation" /></td> </tr> <tr id="product1"> <td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product1"/></td> <td class="cart_td_2"><img src="images/taobao_cart_01.jpg" alt="shopping"/></td> <td class="cart_td_3"><a href="#">日韩流行风时尚美眉最爱独特米字拼图金属坡跟公主靴子黑色</a><br /> 颜色：棕色 尺码：37<br /> 保障：<img src="images/taobao_icon_01.jpg" alt="icon" /></td> <td class="cart_td_4">5</td> <td class="cart_td_5">138.00</td> <td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" class="hand"/> <input id="num_1" type="text" value="1" class="num_input" readonly="readonly"/> <img src="images/taobao_adding.jpg" alt="add" class="hand"/></td> <td class="cart_td_7"></td> <td class="cart_td_8"><a href="javascript:void(0);">删除</a></td> </tr> <tr> <td colspan="8" class="shopInfo">店铺：<a href="#">香港我的美丽日记</a> 卖家：<a href="#">lokemick2009</a> <img src="images/taobao_relation.jpg" alt="relation" /></td> </tr> <tr id="product2"> <td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product2" /></td> <td class="cart_td_2"><img src="images/taobao_cart_02.jpg" alt="shopping"/></td> <td class="cart_td_3"><a href="#">chanel/香奈尔/香奈尔炫亮魅力唇膏3.5g</a><br /> 保障：<img src="images/taobao_icon_01.jpg" alt="icon" /> <img src="images/taobao_icon_02.jpg" alt="icon" /></td> <td class="cart_td_4">12</td> <td class="cart_td_5">265.00</td> <td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" class="hand"/> <input id="num_2" type="text" value="1" class="num_input" readonly="readonly"/> <img src="images/taobao_adding.jpg" alt="add" class="hand"/></td> <td class="cart_td_7"></td> <td class="cart_td_8"><a href="javascript:void(0);">删除</a></td> </tr> <tr> <td colspan="8" class="shopInfo">店铺：<a href="#">实体经营</a> 卖家：<a href="#">林颜店铺</a> <img src="images/taobao_relation.jpg" alt="relation" /></td> </tr> <tr id="product3"> <td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product3"/></td> <td class="cart_td_2"><img src="images/taobao_cart_03.jpg" alt="shopping"/></td> <td class="cart_td_3"><a href="#">蝶妆海?蓝清滢粉底液10#（象牙白）</a><br /> 保障：<img src="images/taobao_icon_01.jpg" alt="icon" /> <img src="images/taobao_icon_02.jpg" alt="icon" /></td> <td class="cart_td_4">3</td> <td class="cart_td_5">85.00</td> <td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" class="hand"/> <input id="num_3" type="text" value="1" class="num_input" readonly="readonly"/> <img src="images/taobao_adding.jpg" alt="add" class="hand"/></td> <td class="cart_td_7"></td> <td class="cart_td_8"><a href="javascript:void(0);">删除</a></td> </tr> <tr> <td colspan="8" class="shopInfo">店铺：<a href="#">红豆豆的小屋</a> 卖家：<a href="#">taobao豆豆</a> <img src="images/taobao_relation.jpg" alt="relation" /></td> </tr> <tr id="product4"> <td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product4"/></td> <td class="cart_td_2"><img src="images/taobao_cart_04.jpg" alt="shopping"/></td> <td class="cart_td_3"><a href="#">相宜促销专供 大S推荐 最好用的LilyBell化妆棉</a><br /> 保障：<img src="images/taobao_icon_01.jpg" alt="icon" /></td> <td class="cart_td_4">12</td> <td class="cart_td_5">12.00</td> <td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" class="hand"/> <input id="num_4" type="text" value="2" class="num_input" readonly="readonly"/> <img src="images/taobao_adding.jpg" alt="add" class="hand"/></td> <td class="cart_td_7"></td> <td class="cart_td_8"><a href="javascript:void(0);">删除</a></td> </tr> <tr> <td colspan="3"><a id="deleteAll" href="javascript:void(0);"><img src="images/taobao_del.jpg" alt="delete"/></a></td> <td colspan="5" class="shopend">商品总价（不含运费）：<label id="total" class="yellow"></label> 元<br /> 可获积分 <label class="yellow" id="integral"></label> 点<br /> <input name=" " type="image" src="images/taobao_subtn.jpg" /></td> </tr> </table> </form> </div> </body> </html>
以上是HTML的文件内容
以下是js文件的内容
$(document).ready(function () {
//金额自动计算
productCount();
var integral = 0;
function productCount() {
var one = 0;
var ji = 0;
$("tr").each(function (i, dom) {
//商品数量
var num = $(dom).children(".cart_td_6").find("input").val();
//商品小计
var price = num * $(dom).children(".cart_td_5").text();
//显示商品小计
$(dom).children(".cart_td_7").html(price);
if (isNaN(price)) {
price = 0;
}
one += price;
var c = num * $(dom).children(".cart_td_4").text();
var t = 0;
if (!isNaN(c)) {
t = c;
} else {
}
ji += t;
});
$("#total").html(one);
$("#integral").html(ji);
}
//全选框
$("#allCheckBox").click(function () {
//alert(this.checked);
if ($(this).is(':checked')) {
$('input[type=checkbox][name=cartCheckBox]').prop("checked", true).attr("checked", true);
} else {
$('input[type=checkbox][name=cartCheckBox]').prop("checked", false).attr("checked", false);
}
});
//每个单选
// 当四个选中全选选中
var i = 0;
$("input[type=checkbox][name=cartCheckBox]").click(function () {
var c = 0;
if ($(this).is(':checked')) {
$(this).attr("checked", true);
i++;
} else {
$(this).removeAttr("checked", false);
i--;
}
$('input[type=checkbox][name=cartCheckBox]').each(function (i, dom) {
c++;
});
if (i == c) {
$('#allCheckBox').prop("checked", true).attr("checked", true);
} else {
$('#allCheckBox').prop("checked", true).attr("checked", false);
}
});
//删除所选
$("#deleteAll").children("img").click(function () {
$('input[type=checkbox][name=cartCheckBox]').each(function (i, dom) {
if ($(dom).attr("checked")) {
$(this).parent().parent().prev().remove();
$(this).parent().parent().remove();
productCount();
}
});
});
//添加商品和减少商品
//减少
$(".cart_td_6").children("img").click(function () {
//拿到当前的值
if ($(".cart_td_6").children("img").attr("alt") == "minus") {
var num = $(this).next().val();
num--;
if (num == 0) {
alert("数量不能少于1")
num = 1
}
$(this).next().val("")
$(this).next().val(num)
productCount();
}
});
//添加
$(".cart_td_6").children("img").click(function () {
//拿到当前的值
if ($(this).attr("alt") == "add") {
var num = $(this).prev().val();
num++;
$(this).prev().val("");
$(this).prev().val(num);
productCount();
}
});
//单项删除
$(".cart_td_8").click(function () {
if ($(this).parent().children("td:first").children("input").attr("checked")) {
// $(this).parent().parent().prev().remove();
$(this).parent().prev().remove();
$(this).parent().remove();
productCount();
}else{
alert('您还没有选中')
}
})
});
以下是运行情况！！！！！！
1.可加减金额计算总数
2.可删除
嗯 好多 ！！！！