Javascript 倒计时按钮angularjs
我创建了一个倒计时功能,只有当用户在浏览器的当前窗口中时,它才会计数,而且效果很好,唯一的问题是当我在angularjs控制器中插入代码时。它停止工作,我把我的代码留给每个人,让他们知道哪里出了问题 js: html:Javascript 倒计时按钮angularjs,javascript,angularjs,angularjs-directive,Javascript,Angularjs,Angularjs Directive,我创建了一个倒计时功能,只有当用户在浏览器的当前窗口中时,它才会计数,而且效果很好,唯一的问题是当我在angularjs控制器中插入代码时。它停止工作,我把我的代码留给每个人,让他们知道哪里出了问题 js: html: 不要在角度代码中使用非角度函数,如setTimeout或setInterval。这些函数不会成为摘要周期的一部分,您的视图也不会改变 看一看这个例子,它创建了一个带有角度的计时器 请使用$interval而不是setInterval,后者将处理摘要循环以保持绑定同步,然后使用$i
不要在角度代码中使用非角度函数,如setTimeout或setInterval。这些函数不会成为摘要周期的一部分,您的视图也不会改变 看一看这个例子,它创建了一个带有角度的计时器
请使用
$interval
而不是setInterval
,后者将处理摘要循环以保持绑定同步,然后使用$interval.cancel(interval)
到clearInterval
,另外angular.element('#count')
应该是angular.element(document.getElementById('count'))
asjQLite
不支持基于选择器的查询
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>