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

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

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

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

var timeBuss = ['9:30', '10:30', '11:40', '11:45', '11:50', '12:10', '12:30', '12:41', '12:52', '12:55', '13:10']
setInterval(currentTimeForBuss, 5000);
function currentTimeForBuss() {
    var date = new Date()//Получили текущую дату
    var time = {
        hours:date.getHours(),
        minutes:date.getMinutes()
    }//получили часы и минуты
    console.log(time.hours + ':' + time.minutes);

    for (var i = 0; i < timeBuss.length - 1; i++) {//Цикл по массиву с расписанием
        var tmp = timeBuss[i].split(':');//разбили время расписания на часы и минуты
        var bussTime = {//время в расписании (номер i)
            hours:tmp[0], minutes:tmp[1]
        }
        tmp = timeBuss[i + 1].split(':');
        var nextBussTime = {//следующее время в расписании (i + 1)
            hours:tmp[0], minutes:tmp[1]
        }

        if ((time.hours >= bussTime.hours && time.hours <= nextBussTime.hours) &&
            (time.minutes >= bussTime.minutes && time.minutes < nextBussTime.minutes)) {
            var timeLeft = nextBussTime;
            break;
        }
    }
    console.log(timeLeft)
    if (time.hours < timeLeft.hours) {
        timeLeft.minutes = parseInt(timeLeft.minutes) + 60;
    }
    alert('Осталось минут: ' + (timeLeft.minutes - time.minutes));
};
currentTimeForBuss();

Не переходит на следующую отметку, после того как 11:45 закончилось(алерт не показывается).
В консоле вот такая ошибка:
Uncaught TypeError: Cannot read property 'hours' of undefined 1.html:32
currentTimeForBuss
32 строка это

if (time.hours < timeLeft.hours) {

Если обновить страницу, то находит уже 11:50 и все работает.

Может знаете, как сделать чтобы без перезагрузки страницы сделать переход на следующую отметку?

Всем большое спасибо! Отблагодарил плюсами в карму :)

Появилась подзадача для этого скрипта. Имеется цикл который вызывает этот скрипт (используется вариант Дзен-трансгуманиста) для определения времени ближайшего автобуса.
Сейчас он считает только для первого раза. Для остальных не работает. Очень прошу помочь!

Нужна помощь в доведении скрипта размещенного выше.
Пишу на jquery mobile расписание автобусов. Хотелось бы использовать вышеописанный скрипт для подсчета времени до прибытия автобуса. Отсюда и вопрос, данный пример работает с определенным массивом, указанным в скрипте, но верстка с query mobile подразумевает один большой код с разбивкой на страницы. Вставлять этот код на каждую страницу со своим массивом глупо и не оправдано. Может подскажете как использовать это скрипт один раз для всех страниц, с подгрузкой нужной строки (расписание автобуса на конкретной остановке) из файла данных в массив и вызов функции подсчета с конкретным массивом уже непосредственно в коде страницы?

<!doctype html>
<html>
<head>
    <title>My Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css">
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>  
	<script>
var timeBuss = ['9:30','10:30','11:40','11:45','11:50','12:30','13:20','14:06','14:56','15:06','15:36','16:16','16:43','17:06','17:23','17:34','17:52','18:04','18:10','19:06','19:36','20:06','20:35','21:08','21:31','22:08','22:26','22:53','23:26','23:59','00:06']
setInterval(currentTimeForBuss, 60);
function currentTimeForBuss() {
    var date = new Date()//Получили текущую дату
    var time = {
        hours: date.getHours(),
        minutes: date.getMinutes(),
		seconds: date.getSeconds()
    }//получили часы и минуты
	document.getElementById("current_time").innerHTML = ('Текущее время: ' +  (time.hours + ':' + time.minutes + ':' + time.seconds));

    for (var i = 0; i < timeBuss.length-1; i++) {//Цикл по массиву с расписанием
        var tmp = timeBuss[i].split(':');//разбили время расписания на часы и минуты
        var bussTime = {
            hours: tmp[0], minutes: tmp[1]
        }
        tmp = timeBuss[i + 1].split(':');
        var nextBussTime = {
            hours: tmp[0], minutes: tmp[1]
        }
        
        if ((time.hours >= bussTime.hours && time.hours <= nextBussTime.hours)) {
            var timeLeft = bussTime;
        }
    }
		document.getElementById("nextbusleft").innerHTML = ("Осталось минут: " + (timeLeft.minutes - time.minutes))
};
currentTimeForBuss();
</script>
</head>
<body>
    <div data-role="page">

        <div data-role="content">
        <ul data-role="listview">
    <li><a href="#second_page">Маршрут №1</a></li>
</ul>
        </div><!-- /content -->

 
    </div><!-- /page -->
        <div data-role="page" id="second_page">
 

        <div data-role="content">
        <ul data-role="listview">
    <li><a href="#busstop_1_1">Конечная 1 — Конечная 2</a></li>
    <li><a href="#busstop_1_2">Конечная 2 — Конечная 1</a></li>
</ul>
        </div><!-- /content -->

    </div><!-- /page -->
            <div data-role="page" id="busstop_1_1">
        <div data-role="content">
        <ul data-role="listview">
    <li><a href="#schedule_1_1">Остановка 1</a></li>
    <li><a href="#schedule_1_2">Остановка 2</a></li>    
</ul>
        </div><!-- /content -->

 
    </div><!-- /page -->
<div data-role="page" id="schedule_1_1">
        <div data-role="content">
			<div id="schedule">'9:30','10:30','11:40','11:45','11:50','12:30','13:20','14:06','14:56','15:06','15:06','16:06','16:06','17:06','23:59','00:06'</div>
            <div id="current_time"></div>
            <div id="nextbusleft"></div>
        </div><!-- /content -->
    </div><!-- /page -->

</div>

</body>
</html>

Не надо дергать функцию расчета времени каждые 60 милисекунд. Дергайте хотя бы раз в секунду (1000 мс)
Я исправил код так, что функция принимает массив, по которому будет считать время прибытия.

Вообще код иногда даёт странные результаты, но я думаю вы справитесь :)

Вызываем timerCurrentBuss и передаём туда массив времени.

<!doctype html>
<html>
<head>
    <title>My Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css">
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>  
	<script>

var timeBuss = ['9:30','10:30','11:40','11:45','11:50','12:30','13:20','14:06','14:56','15:06','15:36','16:16','16:43','17:06','17:23','17:34','17:52','18:04','18:10','19:06','19:36','20:06','20:35','21:08','21:31','22:08','22:26','22:53'  ,'23:26','23:59','00:06']

function timerCurrentBuss(time) {   

    var timeBuss = time;

    setInterval(currentTimeForBuss, 60);
    
    function currentTimeForBuss() {
        var date = new Date()//Получили текущую дату
        var time = {
            hours: date.getHours(),
            minutes: date.getMinutes(),
    		seconds: date.getSeconds()
        }//получили часы и минуты
    	document.getElementById("current_time").innerHTML = ('Текущее время: ' +  (time.hours + ':' + time.minutes + ':' +     time.seconds));
    
        for (var i = 0; i < timeBuss.length-1; i++) {//Цикл по массиву с расписанием
            var tmp = timeBuss[i].split(':');//разбили время расписания на часы и минуты
            var bussTime = {
                hours: tmp[0], minutes: tmp[1]
            }
            tmp = timeBuss[i + 1].split(':');
            var nextBussTime = {
                hours: tmp[0], minutes: tmp[1]
            }
            
            if ((time.hours >= bussTime.hours && time.hours <= nextBussTime.hours)) {
                var timeLeft = bussTime;
            }
        }
        
        document.getElementById("nextbusleft").innerHTML = ("Осталось минут: " + (timeLeft.minutes - time.minutes))
    };
}

timerCurrentBuss(timeBuss);

</script>
</head>
<body>
    <div data-role="page">

        <div data-role="content">
        <ul data-role="listview">
    <li><a href="#second_page">Маршрут №1</a></li>
</ul>
        </div><!-- /content -->

 
    </div><!-- /page -->
        <div data-role="page" id="second_page">
 

        <div data-role="content">
        <ul data-role="listview">
    <li><a href="#busstop_1_1">Конечная 1 — Конечная 2</a></li>
    <li><a href="#busstop_1_2">Конечная 2 — Конечная 1</a></li>
</ul>
        </div><!-- /content -->

    </div><!-- /page -->
            <div data-role="page" id="busstop_1_1">
        <div data-role="content">
        <ul data-role="listview">
    <li><a href="#schedule_1_1">Остановка 1</a></li>
    <li><a href="#schedule_1_2">Остановка 2</a></li>    
</ul>
        </div><!-- /content -->

 
    </div><!-- /page -->
<div data-role="page" id="schedule_1_1">
        <div data-role="content">
			<div id="schedule">'9:30','10:30','11:40','11:45','11:50','12:30','13:20','14:06','14:56','15:06','15:06','16:06','16:06','17:06','23:59','00:06'</div>
            <div id="current_time"></div>
            <div id="nextbusleft"></div>
        </div><!-- /content -->
    </div><!-- /page -->

</div>

</body>
</html>

<!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>
angular.module("app", [])
  .controller('TabsDemoCtrl',function($scope,$http){
   
        $scope.string = '12:00, 12:10, 12:35, 13:07';
        $scope.arrString = new Array();
        $scope.arrString = $scope.string.split(',');
  console.log($scope.arrString)
    });
</script>
</head>
<body>        
  <ul ng-controller="TabsDemoCtrl">
    <li ng-repeat="bustime in arrString track by $index">
       {{bustime}} (Тут условие, если текущее время < {{bustime}}, то показывать оставшееся время, если >, то "Автобус ушел"
    </li>
</ul>


</body>
</html>

Всем доброго дня! Если у кого-то будет возможность и время, помогите решить задачу с расписанием.

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

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

<!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, $http) {
    $scope.json = '["12:00", "12:10", "12:35", "23:37"]';
    $scope.arrString = JSON.parse($scope.json);
    $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>
  <ul ng-controller="TabsDemoCtrl">
    <li ng-repeat="bustime in arrString track by $index">
       {{bustime + ' ' +myArray[$index]}}
    </li>
</ul>


</body>
</html>

Цитата:

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

'12:00, 12:10, 12:35, 13:07' - это не json-строка, если получаешь в формате json, то и в примере наверное надо в этом же формате писать как ты думаешь?

Прошу прощения, мое упущение, в действительности строка имеет вид

["12:00", "12:10", "12:35", "23:37"]

Я все упростил для примера, чтобы передать саму суть