How to Make a Ticking Clock (Time) in Angularjs and HTML

How to make a ticking clock (time) in AngularJS and HTML

This works quite nicely for me and I think is easy to follow for noobs. See it in action here

JavaScript:

function TimeCtrl($scope, $timeout) {
    $scope.clock = "loading clock..."; // initialise the time variable
    $scope.tickInterval = 1000 //ms

    var tick = function() {
        $scope.clock = Date.now() // get the current time
        $timeout(tick, $scope.tickInterval); // reset the timer
    }

    // Start the timer
    $timeout(tick, $scope.tickInterval);
}

HTML:

<div ng-controller='TimeCtrl'>
    <p>{{ clock  | date:'medium'}}</p>
</div>

Don't forget to include angularJS and the 'ng-app' in your body tag.

Getting Time Left (Countdown) -- Html, Javascript, AngularJS

I took a few minutes to write up a countdown algorithm

$scope.CountDown = {
    getTimeRemaining: function(endtime) {
      var t = Date.parse(endtime) - Date.parse(new Date());
      var seconds = Math.floor((t / 1000) % 60);
      var minutes = Math.floor((t / 1000 / 60) % 60);
      var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
      var days = Math.floor(t / (1000 * 60 * 60 * 24));
      return {
        'total': t,
        'days': days,
        'hours': hours,
        'minutes': minutes,
        'seconds': seconds
      };
    },

    initializeClock: function(endtime) {
      function updateClock() {
        var t = $scope.CountDown.getTimeRemaining(endtime);

        $scope.CountDown.days = t.days;
        $scope.CountDown.hours = ('0' + t.hours).slice(-2);
        $scope.CountDown.minutes = ('0' + t.minutes).slice(-2);
        $scope.CountDown.seconds = ('0' + t.seconds).slice(-2);

        if (t.total <= 0) {
          $interval.cancel(timeinterval);
        }
      }

      updateClock();
      var timeinterval = $interval(updateClock, 1000);
    }
}

All you have to do is add the CountDown object to your scope and call $scope.CountDown.initializeClock($scope.launch.date);

I made a plunker here https://plnkr.co/edit/x0BkVPgPLjD8rtbfADtY?p=preview

You can display CountDown.days, CountDown.hours, CountDown.minutes and CountDown.seconds on your html view

JavaScript Trying to make a clock for html, can't tell what's broken

Let's keey this simple:

//<![CDATA[/* js/external.js */var doc, bod, I, ClockMaker; // for use on other loadsaddEventListener('load', function(){doc = document; bod = doc.body;I = function(id){  return doc.getElementById(id);}ClockMaker = function(output, offset){  this.clocks = [];  var t = this;  function out(a){    var o = a[1] || 0, dt = new Date(3600000*o+Date.now());    a[0].innerHTML = dt.toUTCString();  }  setInterval(function(){    t.clocks.forEach(out);  }, 10);  this.clock = function(output, offset){    this.clocks.push([output, offset]);    return this;  }}var clocks = new ClockMaker;clocks.clock(I('ny'), -5).clock(I('zu'));}); // end load//]]>

/* css/external.css */html,body{  box-sizing:border-box; padding:0; margin:0;}h2{  margin:5px 7px;}h2,h2+div{  display:inline-block;}

<!DOCTYPE html><html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>  <head>    <meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1' />    <title>Simple Clock</title>    <link type='text/css' rel='stylesheet' href='css/external.css' />    <script type='text/javascript' src='js/external.js'></script>  </head><body> <div><h2>New York:</h2><div id='ny'></div><div> <div><h2>Zulu:</h2><div id='zu'></div></div></body></html>

count down timer function in angularJS 2

You could do it like this:

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <button (click)="buttonClicked()">{{ started ? 'reset' : 'start' }}</button>
      <br />
      <span>{{ time.getHours() }}</span>:
      <span>{{ time.getMinutes() }}</span>:
      <span>{{ time.getSeconds() }}</span>
    </div>
  `,
})
export class App {
  name:string;
  started = false;
  time = new Date(2000, 1, 1, 1, 0, 0);

  constructor() {
    this.name = 'Angular2'

    this._timerTick();
  }

  private _timerTick() {
    if (this.started) {
      this.time.setSeconds(this.time.getSeconds(), -1);
    }

    setTimeout(() => this._timerTick(), 1000);
  }

  buttonClicked() {
    if (this.started) this.reset();
    else this.start();
  }

  start() {
    this.started = true;
  }

  reset() {
    this.started = false;
    this.time = new Date(2000, 1, 1, 1, 0, 0);
  }
}

live demo: https://plnkr.co/edit/BkMkAuSoqVgQMhqEKAAg?p=preview

But there are, like always, multiple ways to achieve the goal! :)

How to Make a Ticking Clock (Time) in Angularjs and HTML