Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angularjs/22.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 倒计时按钮angularjs_Javascript_Angularjs_Angularjs Directive - Fatal编程技术网

Javascript 倒计时按钮angularjs

Javascript 倒计时按钮angularjs,javascript,angularjs,angularjs-directive,Javascript,Angularjs,Angularjs Directive,我创建了一个倒计时功能,只有当用户在浏览器的当前窗口中时,它才会计数,而且效果很好,唯一的问题是当我在angularjs控制器中插入代码时。它停止工作,我把我的代码留给每个人,让他们知道哪里出了问题 js: html: 不要在角度代码中使用非角度函数,如setTimeout或setInterval。这些函数不会成为摘要周期的一部分,您的视图也不会改变 看一看这个例子,它创建了一个带有角度的计时器 请使用$interval而不是setInterval,后者将处理摘要循环以保持绑定同步,然后使用$i

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

js:

html:


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

看一看这个例子,它创建了一个带有角度的计时器


请使用
$interval
而不是
setInterval
,后者将处理摘要循环以保持绑定同步,然后使用
$interval.cancel(interval)
clearInterval
,另外
angular.element('#count')
应该是
angular.element(document.getElementById('count'))
as
jQLite
不支持基于
选择器的查询
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);
<a  class="btn btn-medium btn-orange" href="">
            In<span id="count">30</span></a>