zoukankan      html  css  js  c++  java
  • <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> &gt; <a href="#">我的淘宝</a> &gt; 我的购物车</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.可删除

     嗯  好多 !!!!

  • 相关阅读:
    ArrayList用法
    MessageBox
    将文本文件导入Sql数据库
    在桌面和菜单中添加快捷方式
    泡沫排序
    Making use of localized variables in javascript.
    Remove double empty lines in Visual Studio 2012
    Using Operations Manager Connectors
    Clear SharePoint Designer cache
    Programmatically set navigation settings in SharePoint 2013
  • 原文地址:https://www.cnblogs.com/matianpeng/p/8891656.html
Copyright © 2011-2022 走看看