Javascript-форум - option и время

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

- jQuery (https://javascript.ru/forum/jquery/)

- - option и время (https://javascript.ru/forum/jquery/63831-option-i-vremya.html)

Step48_rus

02.07.2016 11:24

option и время

О великие гуру js, помогите пожалуйста с решением вопроса...
И так, есть раскрывающийся список
Доустим
<select>
<option>-2</option>
<option>-1</option>
<option>0</option>
<option>+1</option>
<option>+2</option>
</select>
Ниже идет вывод со временем, напрмиер
11:00 Блаблабла
11:45 Блаблабла
12:30 Блаблабла
13:00 Блаблабла

Вот,как сделать что бы при выборе нужного option,менялось время?
Может кто сталкивался с таким...
Заранее спасибо за все ответы.Всем мир!

laimas

02.07.2016 11:52

Менялось как?

Rasy	02.07.2016 11:53

Цитата:

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

менялось время?

где менялось?

Step48_rus

02.07.2016 11:59

в нижнем блоке ,где
11:00 Блаблабла
11:45 Блаблабла
12:30 Блаблабла
13:00 Блаблабла

соответственно option, -2часа,-1час,0часов,+1час,+2часа

Step48_rus

02.07.2016 11:59

соответственно option, -2часа,-1час,0часов,+1час,+2часа

Rasy	02.07.2016 12:06

Цитата:

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

Я всего лишь ловкая жабка, а не гуру-йог чтобы понять ваш диалог содержащий алогизмы и парадоксы.:)

Step48_rus

02.07.2016 12:12

Нет,вы очень крутая жабка, которая ездите на скоростном ховер-байке, но не об этом...
смотри<select>
<option>-2 часа</option>
<option>-1 час</option>
<option>0</option>
<option>+1 час</option>
<option>+2 часа</option>
</select>
<div class="live">
11:40 программа 1
12:40 программа 2
13:40 программа 3
14:40 программа 4
</div>

Допустим,выбираем первый option, и время стоновится
9:40 программа 1
10:40 программа 2
11:40 программа 3
12:40 программа 4

Может так понятнее будет

Rasy	02.07.2016 12:54

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>

<select name="" id="set_time">
  <option value="0">выбрать</option>
  <option value="-2">-2 часа</option>
  <option value="-1">-1 часа</option>
  <option value="0">0 часов</option>
  <option value="+1">+1 час</option>
  <option value="+2">+2 часа</option>
</select>
<div id="the_program">
  <p>11:40 программа 1</p>
  <p>12:40 программа 2</p>
  <p>13:40 программа 3</p>
  <p>14:40 программа 4</p>
</div>


<script>
$(function() {
  var
    $set_time = $('#set_time'),
    $the_program = $('#the_program'),
    number,
    separator,
    hour,
    min_and_text;

    $set_time.change(function() {
      number = $(this).val();

      $the_program.children().each(function(i, el) {
        separator = $(el).text().indexOf(':'),
        hour = $(el).text().slice('0', separator),
        min_and_text = $(el).text().slice(separator);

        $(el).text(+number + +hour + min_and_text);
      });
    });

});
</script>

</body>

рони	02.07.2016 14:04

Step48_rus,
лучше если будет обьект с данными для div class="live" ,проще изменять обьект чем парсить html

рони	02.07.2016 14:06

Step48_rus,
и как будет 23 : 00 + 2 часа?

Rasy	02.07.2016 14:45

del

laimas

02.07.2016 14:47

Не правильно будет работать, в сутках всего 24 часа.

Step48_rus

02.07.2016 15:19

и что же тогда делать?

laimas

02.07.2016 15:30

Цитата:

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

и что же тогда делать?

Это зависит от того чего требуется.

Rasy	02.07.2016 15:40

Цитата:

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

и что же тогда делать?

Как говорил Лао-цзы - "Все сразу, но не будет"

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>

<select name="" id="set_time">
  <option value="0">выбрать</option>
  <option value="-2">-2 часа</option>
  <option value="-1">-1 часа</option>
  <option value="0">0 часов</option>
  <option value="+1">+1 час</option>
  <option value="+2">+2 часа</option>
</select>
<div id="the_program">
  <p>6:40 программа 1</p>
  <p>7:40 программа 2</p>
  <p>8:40 программа 3</p>
  <p>9:40 программа 4</p>
  <p>10:40 программа 5</p>
  <p>11:40 программа 6</p>
  <p>12:40 программа 7</p>
  <p>13:40 программа 8</p>
  <p>14:40 программа 9</p>
  <p>16:40 программа 10</p>
  <p>17:40 программа 11</p>
  <p>18:40 программа 12</p>
  <p>19:40 программа 13</p>
  <p>20:40 программа 14</p>
  <p>21:40 программа 15</p>
  <p>22:40 программа 16</p>
  <p>23:40 программа 17</p>
  <p>24:40 программа 18</p>
</div>

<script>
$(function() {
  var
    $set_time = $('#set_time'),
    $the_program = $('#the_program'),
    number,
    separator,
    hour,
    size,
    min_and_text;

    $set_time.change(function() {
      number = $(this).val();
      $the_program.children().each(function(i, el) {
        separator = $(el).text().indexOf(':'),
        hour = $(el).text().slice('0', separator),
        min_and_text = $(el).text().slice(separator);

        size = +number + +hour < 0 ? 24 + +number + +hour :
            +number + +hour >= 24 ? +number + +hour - 24
            : +number + +hour;
        $(el).text(size + min_and_text);

      });
    });
});

</script>

</body>

Step48_rus

02.07.2016 15:41

тут скорее всего все таки в php Делать придется,в общем смотри,на сайте есть сайдбар,где выводится программа передач, в ней указано время по МСК, надо что бы при выборе различных часовых поясов,менялось только время, ибо у них канал работает по мск...

Step48_rus

02.07.2016 15:42

Смотри,если выбираешь вначале -2 а потом -1, то в сумме получается -3, а не -1

laimas

02.07.2016 15:54

Цитата:

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

если выбираешь вначале -2 а потом -1, то в сумме получается -3, а не -1

Вы считаете, что я для это опшен самый подходящий элемент?

laimas

02.07.2016 15:55

Цитата:

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

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

Для этого нужно работать не со временем, а с датой/временем.

destus

02.07.2016 16:03

Step48_rus,
Вот небольшой набросок

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.js"></script>
<select>
    <option>Выбрать</option>
    <option value="-2">-2 часа</option>
    <option value="-1">-1 час</option>
    <option value="0">0</option>
    <option value="+1">+1 час</option>
    <option value="+2">+2 часа</option>
</select>
<div class="live">
    <p>11:40 программа 1</p>
    <p>12:40 программа 2</p>
    <p>13:40 программа 3</p>
    <p>23:40 программа 4</p>
</div>
<script>
    let orig = [...document.querySelectorAll(".live>p")].map(el => el.cloneNode(true));
    document.querySelector("select").addEventListener("change", e => {
        for (let p of document.querySelectorAll(".live>p").entries()){
            p[1].textContent = orig[p[0]].textContent.replace(/\d{1,2}\:\d{1,2}/, match => {
                        return moment(match, "HH:mm").add(e.target.value, "hour").format("HH:mm");
                    });
        };
    });
</script>

laimas

02.07.2016 16:09

destus,

Не пойдет так. Время MSK должно быть либо объектом, либо data-атрибутами, которое и смещается по выбранному часовому поясу, а не оперировать цифрами в тексте. И лучше не 11:40 программа 1, а 11:40 программа 1/

рони	02.07.2016 17:41

:write:

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">


</head>

<body>
<select name="" id="set_time">
  <option value="0">выбрать</option>
  <option value="-2">-2 часа</option>
  <option value="-1">-1 часа</option>
  <option value="0">0 часов</option>
  <option value="1">+1 час</option>
  <option value="2">+2 часа</option>
</select>
 <div class="live"></div>
<script>
var obj = {
        data: [{
            time: {
                h: 1,
                m: 40
            },
            text: "программа 0"
        }, {
            time: {
                h: 11,
                m: 40
            },
            text: "программа 1"
        }, {
            time: {
                h: 12,
                m: 40
            },
            text: "программа 2"
        }, {
            time: {
                h: 23,
                m: 40
            },
            text: "программа 3"
        }],
        curent: 0
    },
    div = document.querySelector(".live");
    obj.data.forEach(function(c, a) {
    var b = document.createElement("p");
    div.appendChild(b);
    Object.defineProperty(obj, a, {
        set: function(a) {
            var h = (a.time.h + this.curent) % 24;
            h < 0 && (h += 24);
            b.innerHTML = h + ":" + a.time.m + " " + a.text
        }
    });
    obj[a] = c
});
Object.defineProperty(obj, "show", {
    set: function(c) {
        this.curent = +c || 0;
        this.data.forEach(function(a, b) {
            obj[b] = a
        })
    }
});
document.querySelector("#set_time").addEventListener("change", function() {
    obj.show = this.value
});
  </script>
</body>
</html>

laimas

02.07.2016 22:19

рони,
только еще изменить (автор этого не понимает) сам выбор - не +1, +2..., а на именование часовых поясов, с просчетом разницы между GMT +3 MSK и выбранным часовым поясом.

рони	02.07.2016 23:00

laimas,
я тоже не понял что нужно изменить. зачем высчитывать разницу если разница это значение option?

laimas

02.07.2016 23:17

Пользователь живет то не по высчитанной разнице, а по часовому поясу в который его определила судьба. :)

рони	02.07.2016 23:28

laimas,
так? пост 22 строки 13 - 17

laimas

02.07.2016 23:43

Да, но Москва то не есть Гринвич, у Москвы +3 GMT, а к примеру житель Камчатки живет не по GMT как разнице между Москвой и Петропавловск-Камчатский, а по +12 GMT. :)

Что серверный, что клиентский скрипт не должны оперировать "искусственной" коррекцией, а опираться на существующие часовые пояса, а они то не обязательно с разницей в час, есть разница и по 30 минут. К тому, а если еще добавить возможность автоматом корректировать время, то есть получить часовой пояс клиента и ничего выбирать не надо, но тогда то полный швах будет. )

рони	02.07.2016 23:51

laimas,
я пас, вернул всё как было, ты прав но в данном случае это не имеет никакого значения, люди скорее всего помнят часовую разницу с москвой, чем какой-то гринвич ( GMT ) и повезло не надо вычислять 30 минут.

laimas

03.07.2016 00:06

Цитата:

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

люди скорее всего помнят часовую разницу с москвой, чем какой-то гринвич

Ну если часовой пояс в системных часах также бы значился как "Москва плюс/минус ваша деревня" тогда бы и вопросов не было, но это то не так. ) Пользователь вообще ничего не должен "подозревать", все скрыто от него за html-элементами, он выбирает не разницу, а место жительства по которому определяется его часовой пояс, а скрипты сами разберутся, что нужно делать, но оперировать то они должны действующими значениями.

Вы же прекрасно знаете, что время, это особый тип данных, и неаккуратность с этими данными может привести к неожиданным результатам. А это то изначально и заложено было "миной" как в самом описании "конструкции" автора, так и в последовавших предложениях "решения проблемы". Ну это же очевидно. :)

рони	03.07.2016 00:06

Цитата:

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

то есть получить часовой пояс клиента и ничего выбирать не надо, но тогда то полный швах будет.

программа московских передач согласно времени клиента

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">


</head>

<body>

 <div class="live"></div>
 <script>
var obj = {
        data: [{
            time: {
                h: 1,
                m: 40
            },
            text: "программа 0"
        }, {
            time: {
                h: 11,
                m: 40
            },
            text: "программа 1"
        }, {
            time: {
                h: 12,
                m: 40
            },
            text: "программа 2"
        }, {
            time: {
                h: 23,
                m: 40
            },
            text: "программа 3"
        }]
    },
    div = document.querySelector(".live");
    obj.data.forEach(function(a) {
    var b = document.createElement("p");
    div.appendChild(b);
    b.innerHTML = time(a.time.h, a.time.m) +  " " + a.text

});

function time(h,m) {
  var d = new Date();
  d.setHours( h + 3, m + d.getTimezoneOffset());
  return d.toTimeString().substring(0,5);
}






  </script>
</body>
</html>

рони	03.07.2016 00:08

laimas,
ваш пост 29 не понял целиком.

laimas

03.07.2016 00:20

d.setHours( h + 3, m + d.getTimezoneOffset()); - во, но данные/список отдает сервер, а значит явно прописать "h + 3" нельзя, это сервер должен получить и вставить. Сервер всегда будет корректировать смещение времени с учетом "временных революций", которые в нашей стране дай бог может быть и закончились, но кто его знает... :) А сервер и отдает смещение к востоку как положительное, а клиент наоборот возвращает отрицательное. То есть "искусственно подгонять под ответ время" и не требуется, да и может быть причиной ошибок.

laimas

03.07.2016 00:28

Цитата:

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

ваш пост 29 не понял целиком.

Если вернуться к этому

Цитата:

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

Смотри,если выбираешь вначале -2 а потом -1, то в сумме получается -3, а не -1

и представлению времени как строке никак не связанной вообще со временем, которую постоянно изменяют, то очевидно, что баг неизбежен на 99%. То есть изначально речь идет фактически не о времени, а каких-то цифрах, само представление "время" отсутствует. )

Хотя, мне то, ну хотят так, да за ради бога. :)

рони	03.07.2016 00:43

Цитата:

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

Если вернуться к этому

ну вы меня поняли ... спасибо за разьяснение ... но больше не надо, я похоже вас всё равно не пойму, признаю эфективность решения на сервере, но сервер не моя стихия, решил задачу как умею.

laimas

03.07.2016 00:52

:D
да я не о том, что должен решать сервер, это как раз забота клиента. Но сервер и клиент живут то по одному времени, сервер только задает данные, а все должно решаться автоматом. И вы это прекрасно знаете, как и в вас понял.

рони	03.07.2016 00:55

laimas,
в коде который я написал есть ошибки? ответ да / нет
если нет , то менять ничего не нужно.
если есть ошибки напишите правильный вариант кода.
так понятно?

Rasy	03.07.2016 01:05

laimas,
Я правильно понял, что в разметке циферки со смещением времени корректирует сервер, а все остальное делает яваскриптик?

<select>
<option>-2</option>
<option>-1</option>
<option>0</option>
<option>+1</option>
<option>+2</option>
</select>

laimas

03.07.2016 06:11

рони,
а я разве писал, что в коде вашем есть ошибка? Я писал о том, что время, оно и в Африке время, и оперировать нужно им.

Rasy,
серверу ничего не нужно корректировать, сервер должен отдать список часовых поясов, где не <option>0</option>, а <option value="3" selected>Москва</option>, если расписание по умолчанию отдается по московскому времени. Это же значение отдается и скрипту для корректировки времени для клиента.

В нашей стране со временем вообще непонятно что происходило и нет гарантии, что все устаканилось. Да и Москву могут смотреть не только у нас в стране, а это не только в час разница, да и к примеру Китай граничащий с нами имеет свои часовые пояса, а в Китае Москву смотрят. И что лазить в скрипты и подгонять, или же отдать текущий список часовых поясов и JS все сам сделает?

Представьте себе, что вы данный скрипт будете использовать для отображения расписания какого либо местного ТВ, которое могут смотреть и в соседних регионах, и расписание будет по местному времени. Что придется делать - также рассчитывать разность между деревней Клюевка и Заречное для списка или же все таки использовать установленные часовые пояса, которые известны всем уважающим себя языкам программирования?

Я что так не понятно говорю или ...? :)

Step48_rus

03.07.2016 11:33

Ребята,всем огромное спасибо за вашу помощь,взял вариант destus
Еще раз всем огромное спасибо!!!!!!!

Часовой пояс GMT +3, время: 05:46.