Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了angularjs-$interval大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
http://www.webfront-js.com/articaldetail/86.html
<!doctype html>
<html lang="en">
<head>
  <Meta charset="UTF-8">
  <title>Example - example-interval-service-production</title>
  

  <script src="//code.angularjs.org/snapshot/angular.min.js"></script>
  

  
</head>
<body ng-app="intervalExample">
  <script>
  angular.module('intervalExample',[])
    .controller('ExampleController',['$scope','$interval',function($scope,$interval) {
        $scope.format = 'M/d/yy h:mm:ss a';
        $scope.blood_1 = 100;
        $scope.blood_2 = 120;

        var stop;
        $scope.fight = function() {
          // Don't start a new fight if we are already fighTing
          if ( angular.isDefined(stop) ) return;

          stop = $interval(function() {
            if ($scope.blood_1 > 0 && $scope.blood_2 > 0) {
              $scope.blood_1 = $scope.blood_1 - 3;
              $scope.blood_2 = $scope.blood_2 - 4;
            } else {
              $scope.stopfight();
            }
          },100);
        };

        $scope.stopfight = function() {
          if (angular.isDefined(stop)) {
            $interval.cancel(stop);
            stop = undefined;
          }
        };

        $scope.resetfight = function() {
          $scope.blood_1 = 100;
          $scope.blood_2 = 120;
        };

        $scope.$on('$destroy',function() {
          // Make sure that thE interval is destroyed too
          $scope.stopfight();
        });
      }])
    // Register the 'myCurrentTime' directive factory method.
    // We inject $interval and dateFilter service since the factory method is DI.
    .directive('myCurrentTime',['$interval','dateFilter',function($interval,dateFilter) {
        // return the directive link function. (compile function not needed)
        return function(scope,element,attrs) {
          var format,// date format
              stopTime; // so that we can cancel the time updates

          // used to update the UI
          function updatetiR_4_11845@e() {
            element.text(dateFilter(new Date(),format));
          }

          // watch the expression,and update the UI on change.
          scope.$watch(attrs.myCurrentTime,function(value) {
            format = value;
            updatetiR_4_11845@e();
          });

          stopTime = $interval(updatetiR_4_11845@e,1000);

          // listen on DOM destroy (removal) event,and cancel the next UI update
          // to prevent updating time after the DOM element was removed.
          element.on('$destroy',function() {
            $interval.cancel(stopTimE);
          });
        }
      }]);
</script>

<div>
  <div ng-controller="ExampleController">
    <label>Date format: <input ng-model="format"></label> <hr/>
    Current time is: <span my-current-time="format"></span>
    <hr/>
    Blood 1 : <font color='red'>{{Blood_1}}</font>
    Blood 2 : <font color='red'>{{Blood_2}}</font>
    <button type="button" data-ng-click="fight()">fight</button>
    <button type="button" data-ng-click="stopfight()">Stopfight</button>
    <button type="button" data-ng-click="resetfight()">resetfight</button>
  </div>
</div>
</body>
</html>

<!-- 
Copyright 2017 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->

大佬总结

以上是大佬教程为你收集整理的angularjs-$interval全部内容,希望文章能够帮你解决angularjs-$interval所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。