html 倒计时$ interval计时器

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 倒计时$ interval计时器相关的知识，希望对你有一定的参考价值。

(function () {
    let MainController = function ($scope, $interval) {
        let intervalToken;
        const countdownStartNumber = 5;
        const countdownEndAction = function(){
            console.log("Countdown ended");
        }
        const decrementCountdown = function(){
            $scope.countdown--;
            if ($scope.countdown<1)
                countdownEndAction();
        }
        $scope.resetCountdown = function(){
            $scope.stopCountdown();
            $scope.countdown=countdownStartNumber;
        }
        $scope.startCountdown = function(){
            if (stopped){
                intervalToken=$interval(decrementCountdown,1000,$scope.countdown);
                stopped = false;
            }
        }
        $scope.stopCountdown = function(){
            stopped = true;
            $interval.cancel(intervalToken);
        }
        $scope.countdown = countdownStartNumber;
        let stopped=true;
        $scope.startCountdown();
    }

    var app = angular.module("App", []);
    app.controller("MainController", MainController);
})();
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
    <script src="app.js"></script>
</head>
<body ng-app="App">
    <div ng-controller="MainController">
        <h1>{{countdown}}</h1>
        <button ng-click="stopCountdown()">Stop</button>
        <button ng-click="resetCountdown()">Reset</button>
        <button ng-click="startCountdown()">Start</button>
    </div>
</body>
</html>

以上是关于html 倒计时$ interval计时器的主要内容，如果未能解决你的问题，请参考以下文章

七angularjs 倒计时

使用 ng-click 函数激活 $interval

怎么能让vb的时间控件interval 的计时功能暂停

winform 中如何获取计时器控件的值

angularjs 日期倒计时效果

JS两种计时器/定时器