课程选择与购物车实现-优快云博客

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            width: 400px;
            height: 400px;
            border: 1px solid #000000;
            margin: 0 auto;
        }
        ul li{
            list-style: none;
            width: 80px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            border: 1px solid #000000;
            margin: 10px;
            float: left;
        }
        .box{
            width: 400px;
            margin: 40px auto;
        }
        button{
            width: 100px;
            height: 40px;
            margin:20px 10px;
        }
    </style>
</head>
<body>
<ul>

</ul>
<div class="box">
    <button data-type="yy">英语</button>
    <button data-type="yw">语文</button>
    <button data-type="sx">数学</button>
    <button data-type="ty">体育</button>
    <button data-type="wl">物理</button>
    <button data-type="ms">美术</button>

</div>
<script>

    var uul=document.getElementsByTagName("ul")[0];
    var btn=document.getElementsByTagName("button");
    var nli;

    for(var i= 0;i<btn.length;i++){

        btn[i].onclick=function () {

            var hasLi=false;

            nli=  document.createElement("li");
            nli.innerHTML=this.innerHTML+"<span> ✖ </span>";


            var type=this.getAttribute("data-type");
            nli.setAttribute("data-type",type);

            var ali=uul.getElementsByTagName("li");
            for(var i=0;i<ali.length;i++){
                if(ali[i].getAttribute("data-type")==this.getAttribute("data-type")){
                    hasLi=true;
                    break;
                }else{
                    hasLi=false;
                }
            }
            if(hasLi==false){
                uul.append(nli);
            }
//        删除
            var span= nli.getElementsByTagName("span")[0];
            span.onclick=function () {
                uul.removeChild(this.parentNode);
            }
        }
    }


</script>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            width: 400px;
            height: 400px;
            border: 1px solid #000000;
            margin: 0 auto;
        }
        ul li{
            list-style: none;
            width: 80px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            border: 1px solid #000000;
            margin: 10px;
            float: left;
        }
        .box{
            width: 400px;
            margin: 40px auto;
        }
        button{
            width: 100px;
            height: 40px;
            margin:20px 10px;
        }
    </style>
</head>
<body>
<ul>

</ul>
<div class="box">
    <button data-type="yy">英语</button>
    <button data-type="yw">语文</button>
    <button data-type="sx">数学</button>
    <button data-type="ty">体育</button>
    <button data-type="wl">物理</button>
    <button data-type="ms">美术</button>

</div>
<script>

    var uul=document.getElementsByTagName("ul")[0];
    var btn=document.getElementsByTagName("button");
    var nli;

    for(var i= 0;i<btn.length;i++){

        btn[i].onclick=function () {

            var hasLi=false;

            nli=  document.createElement("li");
            nli.innerHTML=this.innerHTML+"<span> ✖ </span>";


            var type=this.getAttribute("data-type");
            nli.setAttribute("data-type",type);

            var ali=uul.getElementsByTagName("li");
            for(var i=0;i<ali.length;i++){
                if(ali[i].getAttribute("data-type")==this.getAttribute("data-type")){
                    hasLi=true;
                    break;
                }else{
                    hasLi=false;
                }
            }
            if(hasLi==false){
                uul.append(nli);
            }
//        删除
            var span= nli.getElementsByTagName("span")[0];
            span.onclick=function () {
                uul.removeChild(this.parentNode);
            }
        }
    }


</script>
</body>
</html>





<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title> 购物车</title>
    <link rel="stylesheet" type="text/css"  href="css/bootstrap.min.css">
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/angular.js"></script>
    <style>
      span{padding-left:50px;padding-right:50px;}
    </style>
    <script>
        var app=angular.module('myApp',[]);
        app.controller('myCtrl',function($scope){
            $scope.shopList=[
                { name:'单片机',price:'80.90',num:10},
                { name:'电烙铁',price:'20.40',num:10},
                { name:'万用表',price:'46.90',num:10},
                { name:'示波器',price:'231.00',num:10},
                { name:'电源',price:'279.30',num:10}
            ];
            //减少
            $scope.reduce= function (index) {
                if($scope.shopList[index].num>1){
                    $scope.shopList[index].num--;
                }else{
                    $scope.remove(index);
                }
            };
            //增加
            $scope.add=function(index){
                $scope.shopList[index].num++;
            };
            //计算总价
            $scope.allSum=function(){
                var allPrice = 0;
                for(var i= 0;i<$scope.shopList.length;i++){
                    allPrice+=$scope.shopList[i].price*$scope.shopList[i].num;
                }
                return allPrice;
            };
            //计算总数量
            $scope.allNum=function(){
                var allShu=0;
                for(var i=0;i<$scope.shopList.length;i++){
                    allShu+=$scope.shopList[i].num;
                }
                return allShu;
            };
            //移除一项
            $scope.remove=function(index){
                if(confirm('确定移除此项吗？')){
                    $scope.shopList.splice(index,1);
                }
            };
            //使得输入框中不得小于等于0
            $scope.change=function(index){
                if($scope.shopList[index].num>=1){
                }else{
                    $scope.shopList[index].num=1;
                }
            };
            //清空购物车
            $scope.removeAll=function(){
                if(confirm('确定清空购物车')){
                    $scope.shopList=[];
                }
            }
        });
   
    </script>
</head>
<body ng-app="myApp">
    <div class="container">
        <div ng-controller="myCtrl">
        <ul class="list-group">
            <li ng-repeat="shop in shopList" class="list-group-item">
                <span>{{shop.name}}</span>
                <span>{{shop.price|currency}}</span>
                <span>
                    <button ng-click="reduce($index)">-</button>
                    <input type="text" placeholder="请输入大于0的数" ng-model="shop.num" ng-change="change($index)">
                    <button ng-click="add($index)">+</button>
                </span>
                <span>{{shop.price*shop.num}}</span>
                <button class="btn btn-primary btn-xs" ng-click="remove($index)">移除</button>
            </li>
        </ul>
            总价：<span ng-bind="allSum()"></span>  总数：<span ng-bind="allNum()"></span>
            <button class="btn btn-warning "ng-click="removeAll()">清空购物车</button>
        </div>
    </div>
</body>
</html>
添加删除
