source

angularjs는 간단한 카운트다운을 한다.

gigabyte 2023. 2. 23. 22:51
반응형

angularjs는 간단한 카운트다운을 한다.

Angular js를 사용하여 카운트다운을 만들고 싶습니다.이것이 제 코드입니다.

HTML 파일

<div ng-app ng-controller = "countController"> {{countDown}} <div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

js 파일

function countController($scope){
    $scope.countDown = 10;    
    var timer = setInterval(function(){$scope.countDown--; console.log($scope.countDown)},1000);  
}​​

console.log에서는 카운트다운이 있습니다만, {{countdown} 갱신에서는 도움이 되지 않습니다.고마워!

여기 이 예를 보세요.이것은 카운트 업의 간단한 예입니다!카운트다운을 생성하기 위해 쉽게 수정할 수 있을 것 같습니다.

http://jsfiddle.net/ganarajpr/LQGE2/

JavaScript 코드:

function AlbumCtrl($scope,$timeout) {
    $scope.counter = 0;
    $scope.onTimeout = function(){
        $scope.counter++;
        mytimeout = $timeout($scope.onTimeout,1000);
    }
    var mytimeout = $timeout($scope.onTimeout,1000);

    $scope.stop = function(){
        $timeout.cancel(mytimeout);
    }
}

HTML 마크업:

<!doctype html>
<html ng-app>
<head>
    <script src="http://code.angularjs.org/angular-1.0.0rc11.min.js"></script>
    <script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
</head>
<body>
<div ng-controller="AlbumCtrl">
    {{counter}}
    <button ng-click="stop()">Stop</button>    
</div>
</body>
</html>

버전 1.3에서는 모듈ng에 서비스가 있습니다.$interval

function countController($scope, $interval){
    $scope.countDown = 10;    
    $interval(function(){console.log($scope.countDown--)},1000,0);
}​​

사용 시 주의:

주의: 이 서비스에 의해 작성된 간격은 종료 후 명시적으로 파기해야 합니다.특히 컨트롤러의 범위나 디렉티브의 요소가 파괴되어도 자동으로 파괴되지 않습니다.이 점을 고려하여 항상 적절한 시점에 간격을 취소해야 합니다.이 작업의 방법과 시기에 대한 자세한 내용은 다음 예를 참조하십시오.

출처: Angular의 공식 문서.

$scope를 사용해야 합니다.각도 프레임워크 외부에서 각도 식을 실행하는 경우 $sular(). 

function countController($scope){
    $scope.countDown = 10;    
    var timer = setInterval(function(){
        $scope.countDown--;
        $scope.$apply();
        console.log($scope.countDown);
    }, 1000);  
}

http://jsfiddle.net/andreev_artem/48Fm2/

정지 및 재개 기능을 보여주기 위해 Mr. ganaraj 답변을 업데이트하고 카운트다운 타이머 포맷에 각도 js 필터를 추가했습니다.

여기 jsFiddle에 있습니다.

컨트롤러 코드

'use strict';
var myApp = angular.module('myApp', []);
myApp.controller('AlbumCtrl', function($scope,$timeout) {
    $scope.counter = 0;
    $scope.stopped = false;
    $scope.buttonText='Stop';
    $scope.onTimeout = function(){
        $scope.counter++;
        mytimeout = $timeout($scope.onTimeout,1000);
    }
    var mytimeout = $timeout($scope.onTimeout,1000);
    $scope.takeAction = function(){
        if(!$scope.stopped){
            $timeout.cancel(mytimeout);
            $scope.buttonText='Resume';
        }
        else
        {
            mytimeout = $timeout($scope.onTimeout,1000);
            $scope.buttonText='Stop';
        }
            $scope.stopped=!$scope.stopped;
    }   
});

stackoverflow에서 RobG에서 채택된 필터 코드

myApp.filter('formatTimer', function() {
  return function(input)
    {
        function z(n) {return (n<10? '0' : '') + n;}
        var seconds = input % 60;
        var minutes = Math.floor(input / 60);
        var hours = Math.floor(minutes / 60);
        return (z(hours) +':'+z(minutes)+':'+z(seconds));
    };
});

AngularJ에서 카운트다운 워치를 위한 코드를 작성하는 방법S"

순서 1: HTML 코드샘플

<div ng-app ng-controller="ExampleCtrl">
    <div ng-show="countDown_text > 0">Your password is expired in 180 Seconds.</div>
    <div ng-show="countDown_text > 0">Seconds left {{countDown_text}}</div>
    <div ng-show="countDown_text == 0">Your password is expired!.</div>
</div>

순서 2: AngulaJs 코드샘플

function ExampleCtrl($scope, $timeout) {
  var countDowner, countDown = 10;
  countDowner = function() {
    if (countDown < 0) {
      $("#warning").fadeOut(2000);
      countDown = 0;
      return; // quit
    } else {
      $scope.countDown_text = countDown; // update scope
      countDown--; // -1
      $timeout(countDowner, 1000); // loop it again
    }
  };

  $scope.countDown_text = countDown;
  countDowner()
}

아래 예시와 같이 AngularJs의 전체 오버카운트다운 워치는 다음과 같습니다.

<!DOCTYPE html>
<html>

<head>
  <title>AngularJS Example - Single Timer Example</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
  <script>
    function ExampleCtrl($scope, $timeout) {
      var countDowner, countDown = 10;
      countDowner = function() {
        if (countDown < 0) {
          $("#warning").fadeOut(2000);
          countDown = 0;
          return; // quit
        } else {
          $scope.countDown_text = countDown; // update scope
          countDown--; // -1
          $timeout(countDowner, 1000); // loop it again
        }
      };

      $scope.countDown_text = countDown;
      countDowner()
    }
  </script>
</head>

<body>
  <div ng-app ng-controller="ExampleCtrl">
    <div ng-show="countDown_text > 0">Your password is expired in 180 Seconds.</div>
    <div ng-show="countDown_text > 0">Seconds left {{countDown_text}}</div>
    <div ng-show="countDown_text == 0">Your password is expired!.</div>
  </div>
</body>

</html>

모듈을 올바르게 선언하지 않았거나 모듈이 선언되기 전에 함수를 삽입했을 수 있습니다(안전 규칙은 페이지가 모두 로드되면 각도 모듈을 본문 뒤에 놓는 것입니다).angularjs를 사용하고 있기 때문에 $interval(Windows 서비스인 setInterval에 대한 angularjs 등가)을 사용해야 합니다.

유효한 솔루션은 다음과 같습니다.

angular.module('count', [])
  .controller('countController', function($scope, $interval) {
    $scope.countDown = 10;
    $interval(function() {
      console.log($scope.countDown--);
    }, 1000, $scope.countDown);
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.1/angular.min.js"></script>


<body>
  <div ng-app="count" ng-controller="countController"> {{countDown}} </div>
</body>

주의: html 뷰에서는 0으로 끝납니다만, console.log에서는 1로 끝납니다.그 이유를 알 수 있을까요?;)

내가 했던 방식대로, 작동했어!

  • * 버전 1.5.8 이후.

각도 코드

var app = angular.module('counter', []);

app.controller('MainCtrl', function($scope, $interval) {
  var decrementCountdown = function() {
    $scope.countdown -= 1;
    if ($scope.countdown < 1) {
      $scope.message = "timed out";
    }
  };
  var startCountDown = function() {
    $interval(decrementCountdown, 1000, $scope.countdown)
  };
  $scope.countdown = 100;
  startCountDown();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.10/angular.min.js"></script>



<body ng-app="counter" ng-controller="MainCtrl">
  {{countdown}} {{message}}
</body>

function timerCtrl ($scope,$interval) {
    $scope.seconds = 0;
    var timer = $interval(function(){
        $scope.seconds++;
        $scope.$apply();
        console.log($scope.countDown);
    }, 1000);
}

var timer_seconds_counter = 120;
$scope.countDown = function() {
      timer_seconds_counter--;
      timer_object = $timeout($scope.countDown, 1000);
      $scope.timer = parseInt(timer_seconds_counter / 60) ? parseInt(timer_seconds_counter / 60) : '00';
      if ((timer_seconds_counter % 60) < 10) {
        $scope.timer += ':' + ((timer_seconds_counter % 60) ? '0' + (timer_seconds_counter % 60) : '00');
      } else {
        $scope.timer += ':' + ((timer_seconds_counter % 60) ? (timer_seconds_counter % 60) : '00');
      }
      $scope.timer += ' minutes'
      if (timer_seconds_counter === 0) {
        timer_seconds_counter = 30;
        $timeout.cancel(timer_object);
        $scope.timer = '2:00 minutes';
      }
    }

$scope.countDown = 30;
var timer;
$scope.countTimer = function () {
    var time = $timeout(function () {
         timer = setInterval(function () {
             if ($scope.countDown > 0) {
                 $scope.countDown--;
            } else {
                clearInterval(timer);
                $window.location.href = '/Logoff';
            }
            $scope.$apply();
        }, 1000);
    }, 0);
}

$scope.stop= function () {
    clearInterval(timer);
    
}

HTML:

<button type="submit" ng-click="countTimer()">Start</button>
<button type="submit" ng-click="stop()">Clear</button>

언급URL : https://stackoverflow.com/questions/12050268/angularjs-make-a-simple-countdown

반응형

'source' 카테고리의 다른 글

앵귤러와의 체인 약속JS  (0) 2023.02.23
AngularJS 클라이언트 측 데이터 바인딩 및 서버 측 템플릿 생성  (0) 2023.02.23
ROWID(오라클) - 쓸모가 있습니까?  (0) 2023.02.23
HTTP 'Get' 서비스 응답을 AngularJS로 캐시하시겠습니까?  (0) 2023.02.23
WordPress의 하위 테마에서 위젯을 재정의하려면 어떻게 해야 합니까?  (0) 2023.02.23

'source'의 다른글

  • 현재글angularjs는 간단한 카운트다운을 한다.

관련글

댓글

티스토리툴바