使用Angular Js显示定时器

Displaying Timer using Angular Js

本文关键字：定时器 显示 Js Angular 使用      更新时间：2023-09-26

我试图显示定时器和倒计时定时器从59秒到0秒以减少顺序，并在计数完成后显示警报消息。但是在显示倒计时时有一个问题，那就是它在0:1秒之前显示警报消息。有人能帮助解决这个问题吗?

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title></title>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
    </style>
</head>
<body>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript">
    var app = angular.module('MyApp',[])
    app.controller('MyController',function($scope,$window,$timeout){
        var tim;
        $scope.totalsec = 60;
        var countdowntime= function(){
            $scope.totalsec--;
            $scope.min = parseInt($scope.totalsec / 60, 10);
            $scope.sec = $scope.totalsec - ($scope.min * 60);
            if($scope.sec >0){
                tim = $timeout(countdowntime, 1000);
            } else if($scope.sec ==0){
                $timeout.cancel(tim);
                $window.alert("Time Up");
            }
        };
        countdowntime();
    });
</script>
<div ng-app="MyApp" ng-controller="MyController">  
    countertime:{{min}}:{{sec}}
</div>
</body>
</html>

 if($scope.sec >0){
应:

 if($scope.sec ==0){

所以"1"不会触发它。"1"大于"0"

Try This:

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);
}
}
相关文章：