AngularJS-计时器应用程序

本文介绍一个基于AngularJS的计时器应用程序，可以实现计时、暂停、重置等功能。

技术栈

• AngularJS
• HTML
• CSS
• JavaScript

功能展示

1. 点击“Start”按钮开始计时；
2. 点击“Pause”按钮暂停计时；
3. 点击“Reset”按钮重置计时器；

实现过程

HTML

我们需要在HTML中创建三个按钮分别用于启动计时器、暂停计时器和重置计时器。

<div ng-app="myApp" ng-controller="myCtrl">
    <div class="timer">{{display}}</div>
    <button ng-click="start()">Start</button>
    <button ng-click="pause()">Pause</button>
    <button ng-click="reset()">Reset</button>
</div>

CSS

我们需要编写一些CSS样式来美化计时器。

.timer {
    font-size: 96px;
    margin-bottom: 10px;
}

JavaScript

我们需要编写一些JavaScript代码来实现计时器的功能。

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope, $interval) {
  
  var intervalPromise;

  $scope.display = "00:00:00";

  function startTimer() {
    var duration = moment.duration($scope.elapsedTime, 'milliseconds');
    $scope.display = duration.format('hh:mm:ss', { trim: false });
  }

  $scope.start = function() {
    if (angular.isDefined(intervalPromise)) return;
    $scope.startTime = Date.now();
    intervalPromise = $interval(function() {
      $scope.elapsedTime = Date.now() - $scope.startTime;
      startTimer();
    }, 1000);
  };

  $scope.pause = function() {
    if (angular.isDefined(intervalPromise)) {
      $interval.cancel(intervalPromise);
      intervalPromise = undefined;
    }
  };

  $scope.reset = function() {
    $scope.elapsedTime = 0;
    $scope.display = "00:00:00";
    $scope.startTime = null;
    $scope.pause();
  };
});

我们需要在AngularJS的控制器中定义三个方法分别用于启动计时器、暂停计时器和重置计时器。

总结

本篇文章介绍了一个基于AngularJS的计时器应用程序，可以实现计时、暂停、重置等功能。