JSFiddle - React, Tailwind, and code Playground
HTML
<div ng-app='testApp' ng-controller='MainController'>
<div class="jumbotron">
<h1>{{position_hms}}</h1>
<p class="lead"></p>
<p><a class="btn btn-lg btn-success" ng-click='start()' ng-href="#">Start!</a>
</p>
</div>
<div>seconds:
<input type='text' ng-model='set_to' />
</div>
<div>HH:MM:SS:
<input type='text' ng-model='hms' />
</div>
<div>
<button ng-click='set()'>Set</button>
</div>
</div>
JavaScript
function zfill(number, size) {
number = number.toString();
while (number.length < size) {
number = "0" + number;
}
return number;
}
function toHMS(value) {
//http://stackoverflow.com/questions/4228356/integer-division-in-javascript
//Math.floor() may not work as expected with negative numbers
var hours = Math.floor(value / 3600);
var min_secs = value % 3600;
var minutes = Math.floor(min_secs / 60);
var seconds = min_secs % 60;
var hms = zfill(hours, 2) + ":" + zfill(minutes, 2) + ":" + zfill(seconds, 2);
return hms;
}
function toSeconds(hms) {
var values = hms.split(':');
var hours = values[0];
var minutes = values[1];
var seconds = values[2];
var total = (parseInt(hours) * 3600) + (parseInt(minutes) * 60) + parseInt(seconds);
return total;
}
var app = angular.module('testApp', []);
app.controller("MainController", function($scope, $interval){
$scope.position = 0;
$scope.position_hms = toHMS($scope.position);
$scope.running = null;
$scope.hms = "00:00:00";
$scope.set_to = "";
$scope.$watch("set_to", function(newValue, oldValue) {
//$scope.hms = toHMS($scope.set_to);
$scope.hms = toHMS(newValue);
console.log("Updating hms to", $scope.hms);
});
$scope.$watch("hms", function(newValue, oldValue) {
//var total = toSeconds($scope.hms);
var total = toSeconds(newValue);
console.log("Updating set_to to", total);
$scope.set_to = total.toString();
});
$scope.$watch("position", function(newValue, oldValue) {
//$scope.position_hms = toHMS($scope.position);
$scope.position_hms = toHMS(newValue);
});
$scope.update = function() {
$scope.position -= 1;
console.log($scope.position);
if ($scope.position <= 0) {
//clearInterval($scope.running);
$interval.cancel($scope.running);
console.log("Time's up!!");
}
...