安卓啊啊哈

<head>
    <meta charset="utf-8" />
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" charset="utf-8">
    <style type="text/css">
        ul {
            list-style: none;
        }

        ul li {
            text-align: center;
        }

        .a1 {
            float: left;
        }

        .a2 {
            position: relative;
            left: -120px;
            top: 50px;
        }

        .a3 {
            position: relative;
            left: 110px;
            top: 10px;
        }

        .a4 {
            position: relative;
            left: 110px;
            top: 10px;
        }

        .a5 {
            position: relative;
            left: 110px;
            top: 10px;
        }

        .a6 {
            position: relative;
            left: 110px;
            top: 10px;
        }

        .a7 {
            position: relative;
            left: 110px;
            top: 10px;
        }

        #a9 {
            position: relative;
            top: 50px;
            left: -30px;
        }
        table tr:nth-child(odd){
            background-color: blue;
        }

        table tr:nth-child(even){
            background-color: yellowgreen;
        }

    </style>
    <script src="lib/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="lib/angular.min.js" type="text/javascript" charset="utf-8"></script>
</head>

<body ng-app="myapp" ng-controller="myctrl">

    <br />
    <table border="" cellspacing="0" cellpadding="0" width="200px" height="200px">
        <tr>
            <td><img src="img/1.PNG" /></td>
        </tr>
        <tr>
            <td><img src="img/4.PNG" style="float: left;" />
                <p class="a1">大兴史各庄大西瓜5-10kg</p>
                <p class="a2" style="color: red;">￥<span style="">50.0</span></p>
                <input type="button" class="a3" value="-" onclick="res(this)" />
                <span class="a4">
                    5   
                </span>
                <input type="button" class="a5" value="+" onclick="plus(this)" />
                <input type="button" class="a6" value="删除" onclick="del(this)" />
                <span class="a7">250</span>
            </td>
        </tr>
        <tr>
            <td><img src="img/3.PNG" style="float: left;" />
                <p class="a1">台湾大芒果</p>
                <p id="a9" style="color: red;">￥<span style="">39.0</span></p>
                <input type="button" class="a3" value="-" onclick="res(this)" />
                <span class="a4">
                        2   
                </span>
                <input type="button" class="a5" value="+" onclick="plus(this)" />
                <input type="button" class="a6" value="删除" onclick="del(this)" />
                <span class="a7">78</span>
            </td>
        </tr>
        <tr>
            <td><img src="img/4.PNG" style="float: left;" />
                <p class="a1">大兴史各庄大西瓜5-10kg</p>
                <p class="a2" style="color: red;">￥<span style="">50.0</span></p>
                <input type="button" class="a3" value="-" ng-click="{{x.num=x+1}}" />
                <span class="a4">
                    6       
                </span>
                <input type="button" class="a5" value="+" onclick="plus(this)" />
                <input type="button" class="a6" value="删除" onclick="del(this)" />
                <span class="a7">300</span>
            </td>
        </tr>
    </table>
    <div>
        <p style="color: red;position: relative;left: 300px;">总价：<span id="total">1000</span>
            <input type="button" id="" value="添加" onclick="add()" />
        </p>

    </div>
    <ul hidden="hidden">
        <li>
            <h4>添加页面</h4></li>
        <li>商品名称:<input type="text" id="bname" placeholder="商品名字不能为空"> </li>
        <li>商品价格:<input type="text" id="bprice" value="" placeholder="商品价格不能小于0" /></li>
        <li>商品数量:<input type="text" id="bnum" value="" placeholder="商品数量不能小于0" /></li>
        <li><input type="button" id="add" value="保存"  /></li>
    </ul>

    <script type="text/javascript">
        //添加
        function add() {
            if(confirm("您确定要添加吗")) {
                $("ul").show();
            } else {
                $("ul").hide();
            }
        }
        //删除
        function del(obj){
            if(confirm("您确定要删除吗")){
                alert("删除成功")
                $(obj).parent().parent().remove();     
            }else{
                alert("吓死宝宝了")
            }

        }
        //减少
        function res(obj) {
            var ele = $(obj).next();
            var v = ele.text();
            if(v == 0) {
                $(obj).parent().parent().remove();
            } else {
                v--;
                ele.text(v);
                var p=$(obj).parent().children(":nth-child(3)").children().text();
                var s =$(obj).parent().children(":nth-child(8)");
                s.text(p*v);
            }
            getTotal();
        }
        //总计
        function getTotal(){
            var t=0;
            var cs = $("tr :nth-child(1)").children(":nth-child(8)");
            cs.each(function(){
                var v =$(this).text();
                t+=parseInt(v);
            })
            $("#total").text(t);
        }
        //增加
        function plus(obj){
            var ele = $(obj).prev();
            var v = ele.text();

            v++;
            ele.text(v);
            var p=$(obj).parent().children(":nth-child(3)").children().text();
            var s =$(obj).parent().children(":nth-child(8)");
            s.text(p*v);
            getTotal();
        }

        $(function(){
            $("#add").click(function(){
                var bname = $("#bname").val();
                var bprice = $("#bprice").val();
                var bnum = $("#bnum").val();
                if(bname==""||bname.length==0) {
                    alert("商品名称不能为空");
                    return;
                }
                if(bprice<=0){
                    alert("商品价格不能小于0");
                    return;
                }
                if(bnum<=0){
                        alert("商品数量不能小于0");
                        return ;
                }
                alert(bname+bprice+bnum)
                var newtr = "<tr><td><img src='img/3.PNG' style='float:left'>"+"<p class='a1'>"+
                bname+"</p>"+"<p class='a2' style='color :red'>￥<span>"+bprice+"</span></p>"+
                "<input type='button' class='a3' value='-' onclick='res(this)'>"+
                "<span class='a4'>"+bnum+"</span>"+
                "<input type='button' class='a5' value='+' onclick='plus(this)'>"+
                "<input type='button' value='删除' class='a6' onclick='del(this)'>"+
                "<span class='a7'>"+bnum*bprice+"</span></td></tr>"
                $("table").append(newtr);
            })
        })

        var app = angular.module("myapp",[]);
        app.controller("myctrl",function($scope){


        })


    </script>
</body>
猜你喜欢
