Таблица с рандомным контентом
Есть таблица
<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 секунд и т.д.)? Как на этом сайте ссылка, блок "Таблица доходов в реальном времени!" Спасибо. |
фейковая таблица выигрышей
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> |
рони,
Как я понял здесь 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), что как я понимаю - превышение лимита обращения к файлу. |
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> |
рони,
Спасибо Вам огромное! Последнее, что хотел спросить - как в const resolution = 'Одобрено, отказано, на рассмотрении'.split(', '); Использовать html коды, например: <span class="yeptable">Одобрено</span> |
CORONER,
const resolution = '<span class="yeptable">Одобрено</span>, отказано, на рассмотрении'.split(', '); и сss поправьте строки 11 и 15 tbody tr td:nth-child |
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> |
рони,
Спасибо огромное!!! |
Часовой пояс GMT +3, время: 04:01. |