Skip to content

Instantly share code, notes, and snippets.

/jsbin.oyOQENe.html

Created January 5, 2014 09:15
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save anonymous/8266141 to your computer and use it in GitHub Desktop.
Save anonymous/8266141 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.oyOQENe.html
<!DOCTYPE html>
<html ng-app="docsTimeDirective">
<head>
<meta name="description" content="Simple Angular JS countdown timer" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div ng-controller="Ctrl2">
<label for="minutes">Minutes<input id="minutes" type="text" ng-model="minutes"></label>
<label for="seconds">Seconds<input id="seconds" type="text" ng-model="seconds"></label>
<button ng-click="startTimer()">Start</button>
<h3>{{timeLeft}}</h3>
</div>
</body>
</html>
Raw
jsbin.oyOQENe.js
angular.module('docsTimeDirective', [])
.controller('Ctrl2', function($scope, $interval, dateFilter) {
$scope.format = 'mm:ss';
$scope.minutes = 0;
$scope.seconds = 5;
$scope.total = $scope.minutes * 60 + $scope.seconds;
$scope.timeLeft = dateFilter( $scope.total * 1000, $scope.format );
$scope.startTimer = function(){
var updateTimer = function(){
$scope.timeLeft = dateFilter( $scope.total * 1000, $scope.format );
};
var countDown = $interval(function(){
console.log($scope.timeLeft);
if ( $scope.total !== 0 && $scope.total !== '0' ) {
$scope.total--;
updateTimer();
} else {
$scope.total = $scope.minutes * 60 + $scope.seconds;
updateTimer();
$interval.cancel(countDown);
}
}, 1000);
};
});
@hitautodestruct
Copy link

Simple Angular JS countdown timer.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment