Last active
January 9, 2017 20:02
-
-
Save cindy7721888/66cbebc5802c9be6ebd38753ac3f7029 to your computer and use it in GitHub Desktop.
Progress time out
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html ng-app> | |
| <head> | |
| <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> | |
| <meta charset=utf-8 /> | |
| <title>$timeout</title> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> | |
| <style type="text/css"> | |
| .bs-example{ | |
| margin: 20px; | |
| } | |
| </style> | |
| </head> | |
| <body ng-controller="Ctrl"> | |
| <button ng-click="reset()">reset</button> | |
| <div class="progress"> | |
| <div class="{{className}}" ng-style="myStyle"> | |
| {{minutes}}:{{seconds}} | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function Ctrl($scope,$timeout) { | |
| var resetMinutes = 1800; | |
| $scope.countDown = resetMinutes; | |
| $scope.onTimeout = function(){ | |
| $scope.countDown--; | |
| if ($scope.countDown > 0) { | |
| mytimeout = $timeout($scope.onTimeout,1000); | |
| } | |
| else { | |
| } | |
| $scope.minutes = Math.floor($scope.countDown/ 60) % 60; | |
| $scope.seconds = $scope.countDown % 60; | |
| $scope.width = ($scope.countDown/resetMinutes)*100; | |
| $scope.myStyle = { | |
| "width" : $scope.width+"%", | |
| "color" : "black" | |
| }; | |
| if($scope.minutes>10){ | |
| $scope.className = "progress-bar progress-bar-info"; | |
| } | |
| else if ($scope.minutes < 10 && $scope.minutes > 5) | |
| { | |
| $scope.className = "progress-bar progress-bar-warning"; | |
| }else | |
| { | |
| $scope.className = "progress-bar progress-bar-danger"; | |
| } | |
| } | |
| var mytimeout = $timeout($scope.onTimeout,1000); | |
| $scope.reset= function(){ | |
| $scope.countDown = resetMinutes; | |
| mytimeout = $timeout($scope.onTimeout,1000); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
add progress-bar show countDown