Как сделать имитацию дат записей и комментариев?

157

24 марта 2018, 18:02

На странице есть несколько блоков с записями и комментариями. Как при клике на кнопку равномерно распределить даты постов на 7 дней, и задать реалистичное время для комментариев? Количество записей и комментариев может быть произвольным.

Пример (даты изначально не заданы, рассчитываются при клике):

<div class="post">
    <div class="text">Текст записи (7 дней назад)</div>
    <ul>
        <li>Комментарий (7 дней назад)</li>
        <li>Комментарий (5 дней назад)</li>
        <li>Комментарий (5 дней назад)</li>
        <li>Комментарий (3 дней назад)</li>
    </ul>
</div>
<div class="post">
    <div class="text">Текст записи (4 дня назад)</div>
    <ul>
        <li>Комментарий (4 дней назад)</li>
        <li>Комментарий (3 дней назад)</li>
        <li>Комментарий (2 дней назад)</li>
        <li>Комментарий (1 дней назад)</li>
    </ul>
</div>
<div class="post">
    <div class="text">Текст записи (1 день назад)</div>
    <ul>
        <li>Комментарий (1 день назад)</li>
        <li>Комментарий (22 часа назад)</li>
        <li>Комментарий (14 часов назад)</li>
        <li>Комментарий (27 минут назад)</li>
    </ul>
</div>
<button class="calc_date">Показать даты</button>

Answer 1

Вариант с использованием moment.js

Генерирует рандомные даты при каждом нажатии. Стартовая дата - месяц назад.

var divstart, 
    listart; 
moment.locale('ru'); 
 
function randomDate(start, end) { 
  return new moment(start.valueOf() + Math.random() * (end.valueOf() - start.valueOf())); 
} 
 
$('.calc_date').on('click', function() { 
  divstart = moment().subtract(1, 'months'); 
  $('.text>span').each(function() { 
    divstart = listart = randomDate(divstart, moment()); 
    $(this).text(divstart.fromNow()); 
    $(this).parent().next().find('span').each(function() { 
      listart = randomDate(listart, moment()); 
      $(this).text(listart.fromNow()); 
    }); 
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.21.0/moment.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.21.0/locale/ru.js"></script> 
<div class="post"> 
  <div class="text">Текст записи  <span></span></div> 
  <ul> 
    <li>Комментарий  <span></span></li> 
    <li>Комментарий  <span></span></li> 
    <li>Комментарий  <span></span></li> 
    <li>Комментарий  <span></span></li> 
  </ul> 
</div> 
 
<div class="post"> 
  <div class="text">Текст записи  <span></span></div> 
  <ul> 
    <li>Комментарий  <span></span></li> 
    <li>Комментарий  <span></span></li> 
    <li>Комментарий  <span></span></li> 
    <li>Комментарий  <span></span></li> 
  </ul> 
</div> 
 
<div class="post"> 
  <div class="text">Текст записи  <span></span></div> 
  <ul> 
    <li>Комментарий  <span></span></li> 
    <li>Комментарий  <span></span></li> 
    <li>Комментарий  <span></span></li> 
    <li>Комментарий  <span></span></li> 
  </ul> 
</div> 
 
<button class="calc_date">Показать даты</button>

Answer 2

Например, так:

* Взять количество постов (N)
* Сгенерировать массив из N элементов, каждый из которых - рандомное целое число от 0 до 6 (число дней).
* отсортировать массив по возрастанию.
* В цикле для каждого поста:
  - задать дату, равную начальной плюс взятое из i-го элемента массива число.
  - проделать таким же способом расстановку времени для комментариев, задав рандомное число минут в промежутке от 0 до числа минут в "рабочем дне" и прибавив это число минут к времени начала "рабочего дня".

Answer 3

набросал функцию, которая принимает количество постов или комментариев и формирует массив с этим количеством чисел от 1 до 7. Числа могут повторяться т.к. постов может быть 100 а чисел всего 7. Далее можешь сам прикрутить минуты.

function get_date(n) {
    var arr = [];
    for (var i = 0; i < n; i++) {
        arr.push(Math.round(Math.random() * 7));
    }
    arr.sort(function(a, b) {
        return a - b;
    });
    return arr;
}