倒计时按钮角度

Countdown button angularjs

本文关键字:按钮 倒计时      更新时间:2023-09-26

我创建了一个倒计时功能,只有当用户在浏览器的当前窗口中时,它才会计数,并且效果很好,唯一的问题是当我在 Angularjs 控制器中插入我的代码时。它停止工作,上面我把我的代码留给每个人都知道出了什么问题。

.js:

var span = angular.element('#count');
        var counter = 30;
        var timer;
        var startTimer = function() {
            // do nothing if timer is already running
            if (timer) return;
            timer = setInterval(function() {
                counter--;
                if (counter >= 0) {
                    span.innerHTML = counter;
                }
                // Display 'counter' wherever you want to display it.
                if (counter === 0) {
                    alert('this is where it happens');
                    stopTimer();
                }
            }, 1000);
        };
        var stopTimer = function() {
            clearInterval(timer);
            timer = null;
        };
        var onBlur = function() {
            stopTimer();
        };
        var onFocus = function() {
            startTimer();
        };
        var onLoad = function() {
            startTimer();
        };

        angular.element(window).load(onLoad);
        angular.element(window).blur(onBlur);
        angular.element(window).focus(onFocus);

.html:

<a  class="btn btn-medium btn-orange" href="">
            In<span id="count">30</span></a>

不要在角度代码中使用非角度函数,如setTimeout或setInterval。这些函数不会成为摘要周期的一部分,您的视图也不会更改。

看看这个创建有角度的计时器的例子。

https://codeforgeek.com/2014/09/refresh-div-angularjs-interval/