JS新手,如果不允许将删除。我有一些常规的JS代码,我一直在尝试将其切换到控制器。
对于给定的示例,什么是最优化的方式。我见过带有指令,计数器等的情况,但我认为这对我正在做的事情来说非常复杂。到目前为止我设法将秒和十分绑定到屏幕,但是我有更新$ interval的问题,我是否需要.watch,.promises .then? (对不起,对于新问题,任何帮助都会很棒)
JS脚本
window.onload = function() {
var seconds = 00;
var tens = 00;
var appendTens = document.getElementById("tens");
var appendSeconds = document.getElementById("seconds");
var buttonStart = document.getElementById('button-start');
var buttonStop = document.getElementById('button-stop');
var buttonReset = document.getElementById('button-reset');
var Interval;
buttonStart.onclick = function () {
clearInterval(Interval);
Interval = setInterval(startTimer, 10);
};
buttonStop.onclick = function () {
clearInterval(Interval);
};
buttonReset.onclick = function () {
clearInterval(Interval);
tens = "00";
seconds = "00";
appendTens.innerHTML = tens;
appendSeconds.innerHTML = seconds;
console.log("clear()");
};
function startTimer() {
tens++;
if (tens < 9) {
appendTens.innerHTML = "0" + tens;
}
if (tens > 9) {
appendTens.innerHTML = tens;
}
if (tens > 99) {
console.log("seconds");
seconds++;
appendSeconds.innerHTML = "0" + seconds;
tens = 0;
appendTens.innerHTML = "0" + 0;
}
if (seconds > 9) {
appendSeconds.innerHTML = seconds;
}
}
};
这就是我将HTML绑定到屏幕的方式
<span id="seconds">{{ seconds+":"+tens }}</span>
答案 0 :(得分:1)
我设置了一个简单的$interval
循环来更新秒和分钟:
angular.module('plunker', []).controller('MainCtrl', function($interval) {
var interval_;
this.seconds = 0;
this.minutes = 0;
this.start = function() {
interval_ = $interval(function() {
this.seconds++;
if(this.seconds > 59) {
this.seconds = 0;
this.minutes++;
}
}.bind(this), 1000)
}
this.stop = function() {
$interval.cancel(interval_)
}
})
.filter('adjustTime', function(){
return function(input) {
if(input < 10) {
return '0' + input;
}
return input;
}
});
我是代表团的粉丝,所以我制作了你看到的过滤器来处理如果它小于10则添加额外的0;无需破解$interval
逻辑。