Javascript-форум - Динамичный подсчет времени

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Динамичный подсчет времени (https://javascript.ru/forum/misc/36700-dinamichnyjj-podschet-vremeni.html)

Цитата:

Сообщение от рони

как правильно написать данный код и как обновляют данные в angular?

Спасибо, Рони, именно это я и хотел. А по вопросу с обновлением данных попробую спросить в ветке по AngularJS или не стоит плодить темы?

kingstakh,
лучше бы вы сразу в той теме написали :) думаю и тут заметят.

Цитата:

Сообщение от рони (Сообщение 401792)

kingstakh,
лучше бы вы сразу в той теме написали :) думаю и тут заметят.

Просто здесь давно обсуждают схожий вопрос, поэтому тут и спросил, чтобы "по шапке" не получить ))). Если никто тут не заметит рискну спросить там ))) :write:

kingstakh,
ок.

Цитата:

Сообщение от рони (Сообщение 401795)

kingstakh,
ок.

Для меня 2 новости, одна хорошая, вторая плохая )))
Хорошая новость, что в приложении обновление данных работает, то есть идет обратный отсчет времени. Плохая, данные JSON у меня не разделяются кавычками.

То есть в примере:

$scope.json = '["12:00", "12:10", "12:35", "23:37"]';

А у меня:

$scope.json = '["12:00, 12:10, 12:35, 23:37"]';

Где исправить код, чтобы работало с моей строкой? :blink:

Решено, додумался, спасибо!

Может кому-то понадобиться, мой вариант

<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
  <meta charset="utf-8">
  <title>Расписание</title>
<script>
 var c = {
    formatTime: function(b) {
        b = Math.floor(b / 1E3);
        var a = Math.floor(b / 60),
            d = Math.floor(a / 60);
        b %= 60;
        a %= 60;
        return c.two(d % 24) + " час. " + c.two(a) + " мин. " + c.two(b) + " сек. "
    },
    two: function(b) {
        return (9 < b ? "" : "0") + b
    }
};
angular.module("app", [])
  //Часы
.controller("TimeCtrl", function($scope, $interval) {
  var tick = function() {
    $scope.clock = Date.now();
  }
  tick();
  $interval(tick, 1000);
})

.controller("TabsDemoCtrl", function($scope) {
    $scope.json = '6:00, 8:45, 12:00, 12:10, 12:35, 23:37'; // Парсинг в другом контроллере, поэтому данные имеют такой вид
    $scope.arrString = new Array();
    $scope.arrString = $scope.json.split(',');
    $scope.myArray = [];
    $scope.fn = function ()
    {
       $scope.myArray = [];
       angular.forEach($scope.arrString,
       function(el) {
        el = el.match(/\d+/g);
        var date = new Date;
        date.setHours(+el[0], +el[1],0,0);
        date = date.getTime() - (new Date).getTime();
        $scope.myArray.push(date < 0 ? "Автобус ушел" : "Осталось : " + c.formatTime(date));

    })

      console.log($scope.myArray)
      window.setTimeout($scope.fn,1000) // Вывод данных в приложении работает
    }
   $scope.fn()

});
</script>
</head>
<body>
<h3 ng-controller="TimeCtrl">Сейчас {{ clock | date:'HH:mm:ss'}}</h3>
  <ul ng-controller="TabsDemoCtrl">
    <li ng-repeat="bustime in arrString track by $index">
       {{bustime + ' ' +myArray[$index]}}
    </li>
</ul>

</body>
</html>

kingstakh,
хотелось бы увидеть обновление времени или узнать почему в посте 20 не работает вывод времени.

Цитата:

Сообщение от рони (Сообщение 401817)

kingstakh,
хотелось бы увидеть обновление времени или узнать почему в посте 20 не работает вывод времени.

Не работает в браузере, в телефоне - работает. Я ничего не менял в этой строке. Может это потому, что в приложении подключен jQuery, а в примере нет :-?

А нет, jQuery не играет роли, у меня еще контроллер текущего времени есть, с ним и здесь все заработало

Рабочий вариант с $interval

<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
  <meta charset="utf-8">
  <title>Расписание</title>
<script>
 var c = {
    formatTime: function(b) {
        b = Math.floor(b / 1E3);
        var a = Math.floor(b / 60),
            d = Math.floor(a / 60);
        b %= 60;
        a %= 60;
        return c.two(d % 24) + " час. " + c.two(a) + " мин. " + c.two(b) + " сек. "
    },
    two: function(b) {
        return (9 < b ? "" : "0") + b
    }
};
angular.module("app", [])

.controller("TabsDemoCtrl", function($scope, $interval) {
    $scope.json = '6:00, 8:45, 12:00, 12:10, 12:35, 23:37'; // Парсинг в другом контроллере, поэтому данные имеют такой вид
    $scope.arrString = new Array();
    $scope.arrString = $scope.json.split(',');
    $scope.myArray = [];

    var tick = function() {
      $scope.clock = Date.now();
    }
    tick();
    $interval(tick, 1000);

    $scope.fn = function ()
    {
       $scope.myArray = [];
       angular.forEach($scope.arrString,
       function(el) {
        el = el.match(/\d+/g);
        var date = new Date;
        date.setHours(+el[0], +el[1],0,0);
        date = date.getTime() - (new Date).getTime();
        $scope.myArray.push(date < 0 ? "Автобус ушел" : "Осталось : " + c.formatTime(date));

    })

      console.log($scope.myArray)
      window.setTimeout($scope.fn,1000) // Вывод данных в приложении работает
    }
   $scope.fn()

});
</script>
</head>
<body>
  <ul ng-controller="TabsDemoCtrl">
    <li ng-repeat="bustime in arrString track by $index">
       {{bustime + ' ' +myArray[$index]}}
    </li>
</ul>

</body>
</html>

Цитата:

Сообщение от рони (Сообщение 401817)

kingstakh,
хотелось бы увидеть обновление времени или узнать почему в посте 20 не работает вывод времени.

У меня снова "грабли". Пример работает, все отлично, но у меня на одной странице расписание на рабочие и выходные дни, поэтому два "потока" данных. С одним, как в примере, работает, но когда дублирую функция для второго - зависает.

<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
  <meta charset="utf-8">
  <title>Расписание</title>
<script>
 var c = {
    formatTime: function(b) {
        b = Math.floor(b / 1E3);
        var a = Math.floor(b / 60),
            d = Math.floor(a / 60);
        b %= 60;
        a %= 60;
        return c.two(d % 24) + " час. " + c.two(a) + " мин. " + c.two(b) + " сек. "
    },
    two: function(b) {
        return (9 < b ? "" : "0") + b
    }
};
angular.module("app", [])
  //Часы
.controller("TimeCtrl", function($scope, $interval) {
  var tick = function() {
    $scope.clock = Date.now();
  }
  tick();
  $interval(tick, 1000);
})

.controller("TabsDemoCtrl", function($scope) {
    $scope.work = '6:00, 8:45, 12:00, 12:10, 12:35, 23:37'; // Рабочие дни
    $scope.weekend = '6:00, 8:45, 12:00, 12:10, 12:35, 23:37'; // Выходные дни 
    $scope.arrString = new Array();
    $scope.arrString = $scope.work.split(',');
    $scope.myArray = [];
    $scope.fn = function ()
    {
       $scope.myArray = [];
       angular.forEach($scope.arrString,
       function(el) {
        el = el.match(/\d+/g);
        var date = new Date;
        date.setHours(+el[0], +el[1],0,0);
        date = date.getTime() - (new Date).getTime();
        $scope.myArray.push(date < 0 ? "Автобус ушел" : "Осталось : " + c.formatTime(date));

    })

      console.log($scope.myArray)
      window.setTimeout($scope.fn,1000) // Вывод данных в приложении работает
    }
   $scope.fn()

});
</script>
</head>
<body>
<h3 ng-controller="TimeCtrl">Сейчас {{ clock | date:'HH:mm:ss'}}</h3>
  <ul ng-controller="TabsDemoCtrl">
    <li ng-repeat="bustime in arrString track by $index">
       {{bustime + ' ' +myArray[$index]}}
    </li>
</ul>
  <ul ng-controller="TabsDemoCtrl">
Здесь для выходных дней
    <li ng-repeat="bustime in arrString track by $index">
       {{bustime + ' ' +myArray[$index]}}
    </li>
</ul>

</body>
</html>