Таймер обратного отсчёта(etimer) и цикл foreach - JavaScript, Ajax

zzzZZZzzz · 11.05.2019, 00:35

Прошу Вашей помощи в интеграции таймера "eTimer" в цикл foreach. Таймер всегда берет последнюю переменную цикла, никак не могу это исправить. На мой взгляд проблема в функции ready, но так как я силен в js все попытки обойти данную функцию не увенчались успехом. Прикладываю код... Может быть эта затея вообще обречена на провал? Подскажите ваше мнение по этому поводу. Код таймера брал с оф. сайта 'e-timer.ru'. Может быть Вы знаете более простой таймер для этого решения?

Код:

<?php
    include $_SERVER['DOCUMENT_ROOT'] . '/includes/connect.inc.php';
 
$result = $pdo->query('SELECT id, dataend,
EXTRACT(DAY FROM dataend) as day, EXTRACT(MONTH FROM dataend) as month, 
EXTRACT(YEAR FROM dataend) as year, EXTRACT(HOUR FROM dataend) as hour, EXTRACT(MINUTE FROM dataend) as minute
 from timer');
 
foreach ($result as $row) {
    $timered[] = array('id' => $row['id'],'day' => $row['day'], 'month' => $row['month'], 'year' => $row['year'],
        'hour' => $row['hour'], 'minute' => $row['minute']);
 
}
 
include 'form.html.php';

Код:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
</head>
<body>
<table class="table">
    <tr class="hat">
        <th id="id" width="2%">Номер таймера</th>
        <th id="time" width="8%"><p>Таймер</p></th>
    </tr>
    <?php foreach ($timered as $timer):?>
            <tr>
            <div><td style="text-align: center;">
                    #<?php echo($timer['id']); ?>
                </td></div>
            <div><td>
                    <!-- НАЧАЛО ТАЙМЕРА -->
                    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
                    <script src="https://e-timer.ru/js/etimer.js"></script>
                    <script type="text/javascript">
                        jQuery(document).ready(function() {
                            jQuery(".eTimer").eTimer({
                                etType: 0, etDate: "<?php echo($timer['day']); ?>.<?php echo($timer['month']); ?>.<?php echo($timer['year']); ?>.<?php echo($timer['hour']); ?>.<?php echo($timer['minute']); ?>",
                                etTitleText: "Номер таймера #<?php echo($timer['id']); ?> осталось:", etTitleSize: 24, etShowSign: 1,
                                etSep: ":", etFontFamily: "Trebuchet MS", etTextColor: "#dfdfdf", etPaddingTB: 15, etPaddingLR: 15,
                                etBackground: "#4d4d4d", etBorderSize: 0, etBorderRadius: 10, etBorderColor: "white",
                                etShadow: " 0px 0px 10px 0px #333333", etLastUnit: 4, etNumberFontFamily: "Impact",
                                etNumberSize: 35, etNumberColor: "white", etNumberPaddingTB: 0, etNumberPaddingLR: 8,
                                etNumberBackground: "#FF8E00", etNumberBorderSize: 0, etNumberBorderRadius: 5,
                                etNumberBorderColor: "white", etNumberShadow: "inset 0px 0px 10px 0px rgba(0, 0, 0, 0.5)"
                            });
                        });
                    </script>
                        <div class="eTimer"></div>
                    <!-- КОНЕЦ ТАЙМЕРА -->
                </td></div>
    <?php endforeach; ?>
</table>
</body>
</html>

Alex11223 · 12.05.2019, 12:28

Какого цикла? Сделать-то что надо?

http://phpfaq.ru/newbie/na_tanke

zzzZZZzzz · 13.05.2019, 16:51

Alex11223, хочется сделать так, чтобы для каждого значения в БД (см влодженый скрин БД) таймер брал значения. А у меня выходит что таймер берет значения всегда последней записи (см вложеный скрин Таймер). И вот ломаю голову как это исправить(

Alex11223 · 13.05.2019, 16:54

Создавайте например уникальный id для элемента на каждой итерации и используйте его вместо ".eTimer".

Serge_Bliznykov · 13.05.2019, 17:53

минимальные правки и - вуаля!

Код:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
</head>
<body>
<table class="table">
    <tr class="hat">
        <th id="id" width="2%">Номер таймера</th>
        <th id="time" width="8%"><p>Таймер</p></th>
    </tr>
    <?php foreach ($timered as $timer):?>
            <tr>
            <div><td style="text-align: center;">
                    #<?php echo($timer['id']); ?>
                </td></div>
            <div><td>
                    <!-- НАЧАЛО ТАЙМЕРА -->
                    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
                    <script src="https://e-timer.ru/js/etimer.js"></script>
                    <script type="text/javascript">
                        jQuery(document).ready(function() {
                            jQuery("#eTimer<?=$timer['id']?>").eTimer({
                                etType: 0, etDate: "<?php echo($timer['day']); ?>.<?php echo($timer['month']); ?>.<?php echo($timer['year']); ?>.<?php echo($timer['hour']); ?>.<?php echo($timer['minute']); ?>",
                                etTitleText: "Номер таймера #<?php echo($timer['id']); ?> осталось:", etTitleSize: 24, etShowSign: 1,
                                etSep: ":", etFontFamily: "Trebuchet MS", etTextColor: "#dfdfdf", etPaddingTB: 15, etPaddingLR: 15,
                                etBackground: "#4d4d4d", etBorderSize: 0, etBorderRadius: 10, etBorderColor: "white",
                                etShadow: " 0px 0px 10px 0px #333333", etLastUnit: 4, etNumberFontFamily: "Impact",
                                etNumberSize: 35, etNumberColor: "white", etNumberPaddingTB: 0, etNumberPaddingLR: 8,
                                etNumberBackground: "#FF8E00", etNumberBorderSize: 0, etNumberBorderRadius: 5,
                                etNumberBorderColor: "white", etNumberShadow: "inset 0px 0px 10px 0px rgba(0, 0, 0, 0.5)"
                            });
                        });
                    </script>
                        <div id="eTimer<?=$timer['id']?>" class="eTimer"></div>
                    <!-- КОНЕЦ ТАЙМЕРА -->
                </td></div>
    <?php endforeach; ?>
</table>
</body>
</html>

zzzZZZzzz · 13.05.2019, 19:18

Спасибо Alex11223!!!=) ТЫ ГЕНИЙ!!!=) Сейчас только когда раз 20 прочитал, что ты написал, до меня дошло как реализовать модель которую я хочу=) и правда все очень просто, надо было просто добавить <?php echo($timer['id']); ?> после .eTimer ) Спасибо большое=)

zzzZZZzzz · 13.05.2019, 19:19

Serge_Bliznykov, прости сначала написал потом увидел, что ты уже все поправил=) Спасибо большое что помогли разобраться=)

Naive · 14.05.2019, 02:18

Цитата:

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

Спасибо Alex11223!!!=) ТЫ ГЕНИЙ!!!=) Сейчас только когда раз 20 прочитал, что ты написал, до меня дошло как реализовать модель которую я хочу=) и правда все очень просто, надо было просто добавить <?php echo($timer['id']); ?> после .eTimer ) Спасибо большое=)

А теперь запусти на свой сайт 2 и более юзеров.

Serge_Bliznykov · 14.05.2019, 09:26

Цитата:

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

А теперь запусти на свой сайт 2 и более юзеров.

простите, а что будет?

вроде тут никакого криминала.
страничка получает данные запросом из БД и отдаёт страницу клиенту.
Дальше там работает клиентский JS. На сервер нагрузки нет.

12.05.2019, 12:28	#2
Alex11223 Старожил Регистрация: 12.01.2011 Сообщений: 19,500	Какого цикла? Сделать-то что надо? http://phpfaq.ru/newbie/na_tanke Ушел с форума, https://www.programmersforum.rocks, alex.pantec@gmail.com, https://github.com/AlexP11223 ЛС отключены Аларом.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Flash Таймер обратного отсчёта до наступления события	x1233	Общие вопросы Web	0	31.10.2015 20:44
Таймер обратного отсчёта	HellkilleR	Microsoft Office Excel	21	18.03.2015 12:49
Таймер обратного отсчета в VBA	LiannaVoron	Помощь студентам	0	27.04.2014 17:51
Таймер обратного отсчёта (отредактировать код)	Deis	C++ Builder	1	05.03.2011 02:01
Таймер обратного отсчета	kpachbiu	JavaScript, Ajax	4	09.01.2011 15:32

13.05.2019, 16:54	#4
Alex11223 Старожил Регистрация: 12.01.2011 Сообщений: 19,500	Создавайте например уникальный id для элемента на каждой итерации и используйте его вместо ".eTimer". Ушел с форума, https://www.programmersforum.rocks, alex.pantec@gmail.com, https://github.com/AlexP11223 ЛС отключены Аларом.

13.05.2019, 19:18	#6
zzzZZZzzz Регистрация: 01.06.2010 Сообщений: 8	Спасибо Alex11223!!!=) ТЫ ГЕНИЙ!!!=) Сейчас только когда раз 20 прочитал, что ты написал, до меня дошло как реализовать модель которую я хочу=) и правда все очень просто, надо было просто добавить <?php echo($timer['id']); ?> после .eTimer ) Спасибо большое=)

13.05.2019, 19:19	#7
zzzZZZzzz Регистрация: 01.06.2010 Сообщений: 8	Serge_Bliznykov, прости сначала написал потом увидел, что ты уже все поправил=) Спасибо большое что помогли разобраться=)