Форум

CORONER · #1 (**permalink**) 07.05.2020, 21:48

Есть таблица

<table>
    <tr>
        <td>время</td>
        <td>имя и фамилия</td>
        <td>инфо</td>
        <td>инфо</td>
        <td>инфо</td>
        <td>инфо</td>
        <td>инфо</td>
    </tr>
    <tr>
        <td>30 секунд назад</td>
        <td>вася пупкин</td>
        <td>-</td>
        <td>-</td>
        <td>-</td>
        <td>-</td>
        <td>-</td>
    </tr>
    <tr>
        <td>45 секунд назад</td>
        <td>ноунем кондрешн</td>
        <td>-</td>
        <td>-</td>
        <td>-</td>
        <td>-</td>
        <td>-</td>
    </tr>
</table>

Как сделать вывод рандомной информации в ячейках из текстового документа в режиме реального времени через setInterval? И значения времени рандомно но в нисходящем порядке (15 секунд, 20 секунд и т.д.)?
Как на этом сайте ссылка, блок "Таблица доходов в реальном времени!"
Спасибо.

рони · #2 (**permalink**) 08.05.2020, 00:25

CORONER,

<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
    tbody {
        counter-reset: n 30;
    }

    tbody tr :nth-child(2)  {
            color: #FF0000;
            font-weight: bold;
    }
    tbody tr :nth-child(1):before{
     content: counter(n)" секунд назад";
    counter-increment: n 15;
    }
    </style>

</head>
<body>
<table>
<tbody></tbody>
</table>

<script>
(async function up() {
    const response = await fetch("https://cors-anywhere.herokuapp.com/http://randomuser.ru/api.json")
    const resArr = await response.json();
        let {last, first} = resArr[0].user.name;
        let tr = `<tr><td></td><td>${last} ${first}</td><td>${2000 + Math.trunc(Math.random() * 10000)}</td></tr>`
        const tbody = document.querySelector('table tbody');
        if(tbody.rows.length == 5) tbody.rows[4].remove();
        tbody.insertAdjacentHTML('afterBegin', tr);
        window.setTimeout(up, 3000);
})();

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

CORONER · #3 (**permalink**) 08.05.2020, 11:56

рони,
Как я понял здесь 3 столбца, в первой выводится значение времени, во втором через json рандомные фамилия, имя.

Вопрос состоит в том, как расширить таблицу до например 6 столбцов, в 4 столбце три рандомных значения "Одобрено, отказано, на рассмотрении", а в 5-ом также рандомно: количество месяцев 2мес до 60 мес, от 7% до 60% и рандомная сумма от 300 000 руб до 480 000 000 с целыми значениями и в 6 столбце рандомно - Квартира, Офис, Дом, Коммерция.
Если необходимо - готов оплатить, ибо решений в интернете и близко нигде не нашёл, а в JS я полный ноль.

upd. (работает через раз)
GET https://cors-anywhere.herokuapp.com/...er.ru/api.json 429 (Too Many Requests), что как я понимаю - превышение лимита обращения к файлу.

рони · #4 (**permalink**) 08.05.2020, 13:04

CORONER,
фамилии и имена даны для примера, их нужно
генерировать на своём сервере, да и все остальные данные.
создайте массивы и выводите.

<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
    tbody {
        counter-reset: n 30;
    }

    tbody tr :nth-child(2)  {
            color: #FF0000;
            font-weight: bold;
    }
    tbody tr :nth-child(1):before{
     content: counter(n)" секунд назад";
    counter-increment: n 15;
    }
    td{
        border: 1px solid #000000;
    }

    </style>

</head>
<body>
<table>
<tbody></tbody>
</table>

<script>
(async function up() {
    const randomItem = arr => arr[Math.trunc(arr.length * Math.random())];
    const randomNum = (min, max) => min + Math.trunc((max + 1 - min) * Math.random());
    const title = 'Квартира, Офис, Дом, Коммерция'.split(', ');
    const business = randomItem(title)
    const num = randomNum(300, 1000);
    const digit = num < 480 ? ' 000 000' : ' 000'
    const profit = num + digit;
    const percent = randomNum(7, 60);
    const resolution = 'Одобрено, отказано, на рассмотрении'.split(', ');
    const choice = randomItem(resolution);
    const time = randomNum(2, 60);
    //const response = await fetch("https://cors-anywhere.herokuapp.com/http://randomuser.ru/api.json");// эта строка только для примера
    //const resArr = await response.json();
    //    let {last, first} = resArr[0].user.name;
    const people = [{"first":"Георгий","last":"Емельянов"},{"first":"Елизавета","last":"Петрова"}, {"first":"Любовь","last":"Костина"}];
        let {last, first}  =  randomItem(people);
        let tr = `<tr><td></td>
        <td>${last} ${first}</td>
        <td>${business}</td>
        <td>${profit} руб.</td>
        <td>${percent}%</td>
        <td>${time} мес.</td>
        <td>${choice}</td>
        </tr>`
        const tbody = document.querySelector('table tbody');
        if(tbody.rows.length == 5) tbody.rows[4].remove();
        tbody.insertAdjacentHTML('afterBegin', tr);
        window.setTimeout(up, 3000);
})();

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

CORONER · #5 (**permalink**) 08.05.2020, 14:21

рони,
Спасибо Вам огромное!
Последнее, что хотел спросить - как в

const resolution = 'Одобрено, отказано, на рассмотрении'.split(', ');

Использовать html коды, например:

<span class="yeptable">Одобрено</span>

рони · #6 (**permalink**) 08.05.2020, 14:37

CORONER,

const resolution = '<span class="yeptable">Одобрено</span>, отказано, на рассмотрении'.split(', ');

и сss поправьте строки 11 и 15
tbody tr td:nth-child

рони · #7 (**permalink**) 08.05.2020, 14:46

CORONER,

<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
    tbody {
        counter-reset: n 30;
    }

    tbody tr td:nth-child(2)  {
            color: #FF0000;
            font-weight: bold;
    }
    tbody tr td:nth-child(1):before{
    content: counter(n)" секунд назад";
    counter-increment: n 15;
    }
    td{
        border: 1px solid #000000;
    }
    .yeptable {
        color: #006400;
        font-weight: bold;
    }
    .no{
       color: #FF0000;
       font-weight: bold;
    }

    </style>

</head>
<body>
<table>
<tbody></tbody>
</table>

<script>
(async function up() {
    const randomItem = arr => arr[Math.trunc(arr.length * Math.random())];
    const randomNum = (min, max) => min + Math.trunc((max + 1 - min) * Math.random());
    const title = 'Квартира, Офис, Дом, Коммерция'.split(', ');
    const business = randomItem(title);
    const num = randomNum(300, 1000);
    const digit = num < 480 ? ' 000 000' : ' 000'
    const profit = num + digit;
    const percent = randomNum(7, 60);
    const resolution = '<span class="yeptable">Одобрено</span>, <span class="no">отказано</span>, на рассмотрении'.split(', ');
    const choice = randomItem(resolution);
    const time = randomNum(2, 60);
    //const response = await fetch("https://cors-anywhere.herokuapp.com/http://randomuser.ru/api.json");// эта строка только для примера
    //const resArr = await response.json();
    //    let {last, first} = resArr[0].user.name;
    const people = [{"first":"Георгий","last":"Емельянов"},{"first":"Елизавета","last":"Петрова"}, {"first":"Любовь","last":"Костина"}];
        let {last, first}  =  randomItem(people);
        let tr = `<tr><td></td>
        <td>${last} ${first}</td>
        <td>${business}</td>
        <td>${profit} руб.</td>
        <td>${percent}%</td>
        <td>${time} мес.</td>
        <td>${choice}</td>
        </tr>`
        const tbody = document.querySelector('table tbody');
    const size = 5, pause = 3000;
        if(tbody.rows.length == 5) tbody.rows[4].remove();
        tbody.insertAdjacentHTML('afterBegin', tr);
    const delay = tbody.rows.length < size ? 0 : pause;
        window.setTimeout(up, delay);
})();

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

CORONER · #8 (**permalink**) 08.05.2020, 15:02

рони,
Спасибо огромное!!!

Форум

Справочник

Discord чат

Курсы javascript