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

来源：互联网发布：淘宝常促网编辑：程序博客网时间：2024/04/28 15:04
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>创建pagesone.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"  }]
阅读全文
0 0