添加删除

来源：互联网发布：js中var是什么意思编辑：程序博客网时间：2024/06/06 23:34
<!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>
阅读全文
0 0