图片展示+购物车+天气查询+猜大小+日程

最新推荐文章于 2023-01-16 11:18:50 发布
C--罗纳尔多
最新推荐文章于 2023-01-16 11:18:50 发布
阅读量374
点赞数
分类专栏： html5
本文链接：https://blog.csdn.net/dangai0201/article/details/78052120
版权
html5 专栏收录该内容
31 篇文章 0 订阅
订阅专栏
index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .color{
            color: red;
        }
    </style>
    <script src="angular/angular.js"></script>
    <script src="angular/angular-route.js"></script>
    <script>
        var myapp = angular.module("myapp",["ngRoute"]);
        myapp.config(function ($routeProvider) {
            $routeProvider.when("/one",{
                templateUrl:"pages/one.html",
                controller:"oneCtrl"
            }).when("/two",{
                templateUrl:"pages/two.html",
                controller:"twoCtrl"
            }).when("/three",{
                templateUrl:"pages/three.html",
                controller:"threeCtrl"
            }).when("/richeng",{
                templateUrl:"pages/richeng.html",
                controller:"richengCtrl"
            }).when("/home",{
                templateUrl:"pages/home.html",
                controller:"homeCtrl"
            })
        })
        myapp.controller("oneCtrl",function ($scope) {
            $scope.date=[{
                id:'1235',name:'iphone',price:3400,num:10,check:false
            },{
                id:'425',name:'ipad',price:6400,num:500,check:false
            },{
                id:'235',name:'mini',price:2400,num:100,check:false
            },{
                id:'8635',name:'sumsung',price:100,num:1,check:false
            }]

            $scope.checkall=function () {
                for(var i=0;i<$scope.date.length;i++){
                    $scope.date[i].check=!$scope.date[i].check;
                }
            }

            $scope.delete=function (index) {
                var b = confirm("确定删除吗?");
                if(b){
                    $scope.date.splice(index,1);
                }

            }
            $scope.deleteall=function () {
                var a=confirm("确定要删除吗?");
                if(a){
                    for(var i=$scope.date.length-1;i>=0;i--){
                        if($scope.date[i].check==true){
                            $scope.date.splice(i,1);
                        }
                    }
                }
            }

            $scope.sort="name";
            $scope.reve=false;
            $scope.sortFun=function (column) {
                if($scope.sort==column){
                    $scope.reve=!$scope.reve;
                }
                $scope.sort=column;
            }

            $scope.class1=function (name) {
                if(name==$scope.sort){
                    return 'color';
                }
            }
            $scope.arr=[];
            $scope.addbuy=function (index) {
                $scope.arr.push({id:$scope.date[index].id,name:$scope.date[index].name,price:$scope.date[index].price,num:1});
            }
            $scope.buycardel=function (index) {
                $scope.arr.splice(index,1);
            }

            $scope.allmoney=function () {
                $scope.money=0;
                for(var i=0;i<$scope.arr.length;i++){
                    $scope.money+=$scope.arr[i].price*$scope.arr[i].num;
                }
            }
            $scope.add1=function (index) {
                $scope.arr[index].num++;
            }
            $scope.jian1=function (index) {
                $scope.arr[index].num--;
            }

        })
        var u1="https://free-api.heweather.com/v5/weather?city=";
        var u2;
        var u3="&key=545d63e185fc48169a43cbabba6e74d2";
        myapp.controller("twoCtrl",function ($scope,$http) {
            $scope.city="beijing";
            $scope.ask=function () {
                u2=$scope.city;
                $http({
                    url:u1+u2+u3,
                }).then(function (data) {
                    $scope.cityname=data.data.HeWeather5[0].basic.city;
                    $scope.cityweather=data.data.HeWeather5[0].daily_forecast[0].cond.txt_d;
                    $scope.citywendu=data.data.HeWeather5[0].daily_forecast[0].hum;
                })

                $scope.city="";
            }

        })
        myapp.controller("threeCtrl",function ($scope) {



            $scope.cheke=function () {

                $scope.differ=$scope.guess-$scope.random;
                $scope.num++;
                $scope.guess="";
            }
            $scope.again=function () {
                $scope.num=0;
                $scope.random=Math.ceil(Math.random()*10);
                console.log($scope.random)
                $scope.differ=null;
                $scope.guess="";
            }
        })
        myapp.controller("richengCtrl",function ($scope) {
            $scope.arr=[{
                action:"爬山",done:false
            },{
                action:"会友",done:false
            },{
                action:"游泳",done:false
            },{
                action:"唱歌",done:false
            },{
                action:"喝酒",done:false
            },{
                action:"约会",done:false
            },{
                action:"休息",done:false
            }]

            $scope.addricheng=function () {
                $scope.arr.push({action:$scope.newaction,done:false})
                $scope.newaction="";
            }
            $scope.dones=[];
            $scope.del1=function (index) {
                $scope.dones.push({action:$scope.arr[index].action,done:true});
                $scope.arr.splice(index,1);
            }
        })
        
        myapp.controller("homeCtrl",function ($scope,$http) {
            $http({
                url:"package.json"
            }).then(function (data) {
                $scope.data=data.data;
            })
        })
        
    </script>
</head>
<body ng-app="myapp">
<ul>
    <li><a href="#home">图片展示</a></li>
    <li><a href="#one">购物车</a></li>
    <li><a href="#two">天气查询</a></li>
    <li><a href="#three">猜大小</a></li>
    <li><a href="#richeng">日程</a></li>
</ul>
<div ng-view=""></div>
</body>
</html>
创建pages
one.html
<input type="text" ng-model="search"><button ng-click="deleteall()">批量删除</button>
<table>
    <thead>
        <th><input type="checkbox" ng-click="checkall()"></th>
        <th ng-click="sortFun('id')" ng-class="class1('id')">商品编号</th>
        <th ng-click="sortFun('name')" ng-class="class1('name')">商品名称</th>
        <th ng-click="sortFun('price')" ng-class="class1('price')">商品价格</th>
        <th ng-click="sortFun('num')" ng-class="class1('num')">商品库存</th>
        <td>商品小计</td>
        <th>商品操作</th>
    </thead>
    <tbody>
        <tr ng-repeat="item in date|filter:search|orderBy:sort:reve">
            <td><input type="checkbox" ng-model="item.check"></td>
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.price|currency:'￥'}}</td>
            <td>{{item.num}}</td>
            <td>{{item.price*item.num}}</td>
            <td><button ng-click="delete($index)">删除</button><button ng-click="addbuy($index)">添加购物车</button></td>
        </tr>
    </tbody>
</table>
<h2>我的购物车</h2>
<table>
    <thead>
        <th>商品编号</th>
        <th>商品名称</th>
        <th>商品价格</th>
        <th>商品数量</th>
        <th>商品小计</th>
        <th>商品操作</th>
    </thead>
    <tbody>
        <tr ng-repeat="item in arr">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.price}}</td>
            <td><button ng-click="jian1($index)">-</button>{{item.num}}<button ng-click="add1($index)">+</button></td>
            <td>{{item.price*item.num}}</td>
            <td><button ng-click="buycardel($index)">删除</button></td>
        </tr>
        <tr>
            <td><button ng-click="allmoney()">计算总金额</button></td>
            <td>{{money}}</td>
        </tr>
    </tbody>
</table>

richeng.html
<input type="text" ng-model="newaction"><button ng-click="addricheng()">添加日程</button>
<table>
    <thead>
        <th>序号</th>
        <th>日程</th>
        <th>完成情况</th>
    </thead>
    <tbody>
        <tr ng-repeat="item in arr">
            <div ng-hide="item.done">
                <td>{{$index+1}}</td>
                <td>{{item.action}}</td>
                <td><input type="checkbox" ng-model="item.done" ng-click="del1($index)"></td>
            </div>
        </tr>
    </tbody>
</table>
<div>
    <h2>已完成项目</h2>
    <table>
        <thead>
        <th>序号</th>
        <th>日程</th>
        <th>完成情况</th>
        </thead>
        <tbody>
        <tr ng-repeat="item in dones">
            <td>{{$index+1}}</td>
            <td>{{item.action}}</td>
            <td><input type="checkbox" ng-model="item.done"></td>
        </tr>
        </tbody>
    </table>
</div>

two.html
<input type="text" ng-model="city"><button ng-click="ask()">点击查询</button>
<ul>
    <li>城市:  {{cityname}}</li>
    <li>天气:  {{cityweather}}</li>
    <li>温度:  {{citywendu}}</li>
</ul>

three.html
<input type="text" ng-model="guess">
<button ng-click="cheke()">检查</button><button ng-click="again()">再来一次</button>
<div>
    <p ng-show="differ>0">猜大了</p>
    <p ng-show="differ<0">猜小了</p>
    <p ng-show="differ==0">猜对了</p>
</div>
<p>您猜了{{num}}次</p>
home.html
<h1>首页</h1>
<ul>
    <li ng-repeat="item in data">
        <p>{{item.title}}</p>
        <img ng-src="{{item.img}}">
    </li>
</ul>
package.json
[{
    "id":1,
    "img":"1.jpg",
    "title":"小丸子1"
  },{
    "id":2,
    "img":"2.jpg",
    "title":"小丸子2"
  },{
    "id":3,
    "img":"3.jpg",
    "title":"小丸子3"
  },{
    "id":3,
    "img":"3.jpg",
    "title":"小丸子3"
  },{
    "id":4,
    "img":"4.jpg",
    "title":"小丸子4"
  },{
    "id":5,
    "img":"5.jpg",
    "title":"小丸子5"
  },{
    "id":6,
    "img":"6.jpg",
    "title":"小丸子6"
  }
]