aj

来源：互联网发布：电视机通过网络看电视编辑：程序博客网时间：2024/06/03 02:04

<!DOCTYPE html><html>//变颜色<head lang="en">    <meta charset="UTF-8">    <script type="text/javascript" src="angular-1.3.0.js"></script>    <title></title>    <style>        .sky {            background-color: lightblue;        }        .t {            background-color: coral;        }    </style></head><body ng-app="">     <select ng-model="a">         <option value="sky">天空</option>         <option value="t">番茄</option>     </select><div ng-class="a">         <h2>sdasd</h2></div></body></html>

//随机数

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <script src="angular-1.3.0.js"></script>    <script>            var my = angular.module('my',[]);            my.controller("myapp",function($scope){                $scope.check = function()                {                    $scope.random=Math.ceil(Math.random()*6);                    $scope.rad=Math.ceil(Math.random()*6);                    $scope.haha = $scope.random - $scope.rad;                }                $scope.chong = function()                {                    $scope.random=null;                    $scope.rad=null;                    $scope.haha = null;                }            });    </script></head><body ng-app="my" ng-controller="myapp">    <input type="number" ng-model="random"/><br>    <input type="number" ng-model="rad"/><br>    <button type="button" ng-click="check()">掷骰子</button>    <button type="button" ng-click="chong()">不玩了</button>    <h4 ng-if="haha>0">张三赢了</h4>    <h4 ng-if="haha<0">李四赢了</h4>    <h4 ng-if="haha==0">张三李四平局</h4></body></html>

<div ng-app="" >//钱    <input type="number" ng-model="quantity">    <input type="number" ng-model="price">    <p>总价 = {{ (quantity * price) | currency }}</p></div>

//时间

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">      <script type="text/javascript" src="angular-1.3.0.js"></script>    <title></title>    <script>        var app=angular.module("timer",[]);        app.directive("nowTime",function(){              return{                  restrict:"EACM",                  template:"<h3>" + new Date().toLocaleDateString()+""+new Date().toLocaleTimeString()+ "</h3>",                  replace: true              }            });    </script></head><body ng-app="timer">  <now-time>当前时间:</now-time>  <!-- 标签: restrict: "E" - Element -->  <div now-time>档当当</div>  <!-- 属性: restrict: "A" - Attribute -->  <div class="now-time">当前时间：</div>  <!-- 类: restrict: "C" -->  <!-- directive: now-time --> <!-- 注释: restrict: "M" --></body></html>

//Http   Service
<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <script type="text/javascript" src="angular-1.3.0.js"></script>    <title></title>    <script type="text/javascript">        var app = angular.module("myApp", []);        app.controller("bookCtrl", function ($scope, $http) {            $http({                method: "GET",                url: "book.json"            }).success(function (data, status, headers, config) {                $scope.book = data;            }).error(function (data, status, headers, config) {                console.log(status);            });        });        app.controller("bookListCtrl", function ($scope, $http) {            $http({                method: "GET",                url: "books.json"            }).success(function (data, status, headers, config) {                $scope.books = data;            }).error(function (data, status, headers, config) {                console.log(status);            });        });    </script></head><body ng-app="myApp"><div ng-controller="bookCtrl">    <ul>        <li>ID：{{ book.id }}</li>        <li>标题：{{ book.title }}</li>        <li>类型：{{ book.type }}</li>        <li>描述：{{ book.description }}</li>        <li>图片：<img src="{{ book.picture }}" /></li>        <li>是否推荐：{{ book.isRecommend }}</li>        <li>上架时间：{{ book.dtCreated }}</li>    </ul></div><div ng-controller="bookListCtrl">    <table border="1">        <tr>            <th>NO</th>            <th>ID</th>            <th>标题</th>            <th>是否推荐</th>            <th>价格</th>        </tr>        <tbody ng-repeat="book in books">        <tr>            <td>{{$index}}</td>            <td>{{book.id}}</td>            <td>{{book.title}}</td>            <td>                <i ng-if="book.isRecommend">是</i>                <i ng-if="!book.isRecommend">否</i>            </td>            <td>{{book.price}}</td>        </tr>        </tbody>    </table></div></body></html>

//秒变
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <script type="text/javascript" src="angular-1.3.0.js"></script>    <title></title>    <script>        var nowtime=function(){            return new Date().toLocaleDateString()+""+new Date().toLocaleTimeString();        }        var app=angular.module("myApp",[]);        app.controller("myCtrl",function($scope,$interval,$timeout){           $interval(function(){               $scope.nowtime=nowtime();           },1000);            $timeout(function () {                $scope.mytext = "Java B C";            }, 5000);        })    </script></head><body ng-app="myApp">   <div ng-controller="myCtrl">       <div>{{ nowtime }}</div>       <div>等待5秒显示的文字：{{ mytext }}</div>   </div></body></html>

阅读全文

0 0