Question

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>

Answer 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逻辑。

Plnkr

如何将香草JS秒表转换为Angular表？

1 个答案: