There is a timer code, it works fine, but there is always some “But”. This “But” is that only one timer works on the same page, instead of the required amount.

Please help me figure it out.

Counter code itself

<?php // we will be sending Javascript codes, remember... header('Content-Type: text/javascript'); // select the timezone for your countdown $timezone = trim($_GET['timezone']); putenv("TZ=$timezone"); // Counting down to New Year's on 2020 $countdown_to = trim($_GET['countto']); // 24-Hour Format: YYYY-MM-DD HH:MM:SS" // Getting the current time $count_from = date("Ymd H:i:s"); // current time -- NO NEED TO CHANGE // Date difference function. Will be using below function datediff($interval, $datefrom, $dateto, $using_timestamps = false) { /* $interval can be: yyyy - Number of full years q - Number of full quarters m - Number of full months y - Difference between day numbers (eg 1st Jan 2004 is "1", the first day. 2nd Feb 2003 is "33". The datediff is "-32".) d - Number of full days w - Number of full weekdays ww - Number of full weeks h - Number of full hours n - Number of full minutes s - Number of full seconds (default) */ if (!$using_timestamps) { $datefrom = strtotime($datefrom, 0); $dateto = strtotime($dateto, 0); } $difference = $dateto - $datefrom; // Difference in seconds switch($interval) { case 'yyyy': // Number of full years $years_difference = floor($difference / 31536000); if (mktime(date("H", $datefrom), date("i", $datefrom), date("s", $datefrom), date("n", $datefrom), date("j", $datefrom), date("Y", $datefrom)+$years_difference) > $dateto) { $years_difference--; } if (mktime(date("H", $dateto), date("i", $dateto), date("s", $dateto), date("n", $dateto), date("j", $dateto), date("Y", $dateto)-($years_difference+1)) > $datefrom) { $years_difference++; } $datediff = $years_difference; break; case "q": // Number of full quarters $quarters_difference = floor($difference / 8035200); while (mktime(date("H", $datefrom), date("i", $datefrom), date("s", $datefrom), date("n", $datefrom)+($quarters_difference*3), date("j", $dateto), date("Y", $datefrom)) < $dateto) { $months_difference++; } $quarters_difference--; $datediff = $quarters_difference; break; case "m": // Number of full months $months_difference = floor($difference / 2678400); while (mktime(date("H", $datefrom), date("i", $datefrom), date("s", $datefrom), date("n", $datefrom)+($months_difference), date("j", $dateto), date("Y", $datefrom)) < $dateto) { $months_difference++; } $months_difference--; $datediff = $months_difference; break; case 'y': // Difference between day numbers $datediff = date("z", $dateto) - date("z", $datefrom); break; case "d": // Number of full days $datediff = floor($difference / 86400); break; case "w": // Number of full weekdays $days_difference = floor($difference / 86400); $weeks_difference = floor($days_difference / 7); // Complete weeks $first_day = date("w", $datefrom); $days_remainder = floor($days_difference % 7); $odd_days = $first_day + $days_remainder; // Do we have a Saturday or Sunday in the remainder? if ($odd_days > 7) { // Sunday $days_remainder--; } if ($odd_days > 6) { // Saturday $days_remainder--; } $datediff = ($weeks_difference * 5) + $days_remainder; break; case "ww": // Number of full weeks $datediff = floor($difference / 604800); break; case "h": // Number of full hours $datediff = floor($difference / 3600); break; case "n": // Number of full minutes $datediff = floor($difference / 60); break; default: // Number of full seconds (default) $datediff = $difference; break; } return $datediff; } // getting Date difference in SECONDS $diff = datediff("s", $count_from, $countdown_to); ?> // Here's where the Javascript starts countdown = <?=$diff?>; // Converting date difference from seconds to actual time function convert_to_time(secs) { secs = parseInt(secs); hh = secs / 3600; hh = parseInt(hh); mmt = secs - (hh * 3600); mm = mmt / 60; mm = parseInt(mm); ss = mmt - (mm * 60); if (hh > 23) { dd = hh / 24; dd = parseInt(dd); hh = hh - (dd * 24); } else { dd = 0; } if (ss < 10) { ss = "0"+ss; } if (mm < 10) { mm = "0"+mm; } if (hh < 10) { hh = "0"+hh; } if (dd == 0) { return (hh+":"+mm+":"+ss); } else { if (dd > 1) { return (dd+" дней "+hh+":"+mm+":"+ss); } else { return (dd+" день "+hh+":"+mm+":"+ss); } } } // Our function that will do the actual countdown function do_cd() { if (countdown < 0) { <?php if(strtolower(trim($_GET['do'])) == 'r' ) { ?> // redirect web page document.location.href = "<?=$_GET['data']?>"; <?php } ?> <?php if(strtolower(trim($_GET['do'])) == 't' ) { ?> // change text document.getElementById('cd').innerHTML = "<?=$_GET['data']?>"; <?php } ?> } else { document.getElementById('cd').innerHTML = convert_to_time(countdown); setTimeout('do_cd()', 1000); } countdown = countdown - 1; } document.write("<div id='cd'></div>\n"); do_cd(); <? exit(); ?> 

The code of the page on which the counter is used.

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>До ЧАСА Х осталось...</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> <!-- #cd { margin: auto; height: 50px; width: 450px; font-family: "Courier New", Courier, mono; font-size: 24pt; color: #FFF; text-align: center; font-weight: bold; background-image: url(back.jpg); vertical-align: middle; } --> </style> </head> <body> <h1 align="center"> До ЧАСА X осталось </h1> <SCRIPT language="JavaScript" SRC="countdown.php?timezone=Europe/Moscow&countto=2015-01-01 12:00:00&do=r&data=http://onfireparadise.com"></SCRIPT> <br> <SCRIPT language="JavaScript" SRC="countdown.php?timezone=Europe/Moscow&countto=2015-02-01 1:12:00&do=r&data=http://onfireparadise.com"></SCRIPT> - ВОТ ЭТА СТРОКА НЕ РАБОТАЕТ (ПОКАЗЫВАЕТ ТОЛЬКО КАРТИНКУ ФОНА) <!--Тайм-зона http://www.php.net/manual/en/timezones.php do=t&data= - текст, который будет написан вместо таймера по наступлению часа Х do=r&data= Когда наступит час X, отправим посетителя на какую-нибудь страницу, например : http://ruseller.com --> <p>&nbsp;</p> <a></a> </body> </html> 
  • 2
    Lay out only the most important pieces of code, no one will dig into this - Zowie
  • It will be difficult to cut out the timer code. <body> <h1 align = "center"> There are </ h1> <SCRIPT language = "JavaScript" SRC = "countdown.php? timezone = Europe / Moscow & countto = 2015-01-01 12: 00: 00 & do = r & data = onfireparadise.com "> </ SCRIPT > <br> <SCRIPT language =" JavaScript "SRC =" countdown.php? timezone = Europe / Moscow & countto = 2015-02-01 1: 12: 00 & do = r & data = onfireparadise.com "> </ SCRIPT > - HERE THIS LINE DOES NOT WORK (SHOWS ONLY A BACKGROUND PICTURE) And you need to make it so that you can see several timers. - Nikita Aristarkhov
  • Yes, exactly, I am also not particularly interested in digging into your source code, put a piece where you think there may be a mistake. - AseN
  • If I had known a mistake, I would not have addressed, right? I think the error is somewhere in the first code. - Nikita Aristarkhov
  • WTF all variables global? "clear code" - Zowie

2 answers 2

Solved the problem by searching on the Internet. It turns out the normal timer existed in the search. Slightly redid the design and the code itself.

Link to the timer.

    Long been engaged in this problem. I propose an interesting option to work with the Jquery library. It has ready-made options for taimeng. Download this plugin "jquery.timers.js" and of course the library itself. An old "jquery-1.2.6.js" will do.

    And here are the first swallows

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru"> <head> <title>Построение пользовательских интерфейсов на основе библиотеки jQuery</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <meta name="author" content="Kotov AV" /> <meta name="email" content="1vipperson1@rambler.ru" /> <meta name="domain" content="vkosmodrom.com" /> <meta name="robots" content="noindex" /> <script type="text/javascript" src="jquery-1.2.6.js"></script> <script type="text/javascript" src="jquery.timers.js"></script> <style type="text/css"> * { margin:0; padding:0; } html, body { background-color:#E2F2E2; font-family: "Trebuchet MS", Tahoma, sans-serif; font-size: 10pt; } div { text-align:center; margin-bottom:15px; } #example_1 { font-size:1.4em; font-weight:bold; color:#00F; padding:0 15px; } #example_11 { font-size:1.4em; font-weight:bold; color:#00F; padding:0 15px; } #example_2 { font-size:1.4em; font-weight:bold; color:#0F0; padding:0 15px; } #example_3 { font-size:1.2em; font-weight:bold; color:#666; background-color:yellow; padding:0 5px; } #example_4 { font-size:1.2em; font-weight:bold; color:#666; background-color:yellow; padding:0 5px; } #example_5 { font-size:1.2em; font-weight:bold; color:#666; background-color:yellow; padding:0 5px; } button { font-family: "Trebuchet MS", Tahoma, sans-serif; font-size: 8pt; font-weight:bold; width:75px; height:22px; } </style> </head> <body> <!-- css и javascript-коды специально размещены непосредственно на странице. --> <div>Пример №2: <button id="start">Старт</button> <span id="example_2">0</span> <button id="stop">Стоп</button></div> <div>Пример №3: <span id="example_3">Работает программатор</span></div> <div>Отключение систем: <span id="example_4">Отключение A</span></div><div>Пример №1: прошло <span id="example_1">0</span> секунд.</div> <div>Отключение систем: <span id="example_5">Отключение B</span></div><div>Пример №1: прошло <span id="example_11">0</span> секунд.</div> <!-- вариант написания ф-ций setTimeout и setInterval на jQuery --> <p align="center">Работа систем <div id='showTime' style="display: none; text-align: center;"><h3>Идёт самопроверка!</h3></div></p> <script type="text/javascript"> $(document).ready(function(){ // пример №1 $("#example_1").everyTime(1000,function(i) { $(this).text(i); }); // пример №1 $("#example_11").everyTime(1000,function(i) { $(this).text(i); }); // пример №2 $("#start").click(function() { $("#example_2").everyTime(1000, 'timer2', function(i) { $(this).text(i); }, 15); }); $("#stop").click(function() { $("#example_2").stopTime('timer2'); }); // пример №3 $("#example_3").oneTime("30s", function() { $(this).hide(2500); }); // пример №5 $("#example_4").oneTime("10s", function() { $(this).hide(3500); }); // пример №5 $("#example_5").oneTime("50s", function() { $(this).hide(2500); }); }); // пример №4 написания ф-ций setTimeout и setInterval на jQuery $(function() { $('#showTime').show(); var deltime = setInterval(function() { $('#showTime').html('<h2>Отключите систему!</h2>').css({'color':'#cc0000'}); setTimeout(function() { $('#showTime').css({'color':'orange'}); },1000); }, 3000); // setinterval javascript ( веремя через которое исчезнет текст 1) }); </script> </body> </html> 
    • I have a countdown timer, but thanks for the lesson. - Nikita Aristarkhov