У меня есть сценарий, необходимый для создания таймера обратного отсчета, который имеет кнопку запуска и возобновления. То, что я пытаюсь сделать, – это кнопки Start, Stop и Reset на одной странице, которая управляет таймером на другой странице. Поэтому, если пользователь X посещает page.html, он увидит таймер, который находится в 0. Admin X посещает admin.html, где они видят таймер в 0, но у них также есть кнопки запуска, остановки и сброса. Когда администратор нажимает кнопку, таймер на странице.html начинает обратный отсчет. Если другой пользователь посещает страницу во время отсчета таймера, они будут видеть, где находится таймер. Если у кого-нибудь есть идеи кода, другие ответы на этом сайте, на которые я могу ссылаться, или код, который мне понадобится, я был бы очень благодарен.
— Реальный сценарий У нас есть люди на скайпе, которые делают шоу, и им нужно знать, когда пришло время отдохнуть. Идея состоит в том, что производитель может нажать кнопку, которая запускает таймер обратного отсчета, чтобы сообщить им, что у них есть 60 секунд до перерыва. Причина, по которой я хочу это сделать на веб-странице, – это то, что на странице, на которую обращает внимание человек на skype, есть другие вещи. Поэтому я хотел чего-то, чего они не могут пропустить. Я имею доступ к серверу sql и могу делать как php, так и javascript. Я предполагаю, что мне нужно будет сделать какую-то комбинацию из двух.
ОБНОВЛЕНИЕ Спасибо всем за вашу помощь.
Я обновляю это, потому что понял, что я, вероятно, делаю вещи более сложными, чем они должны быть в этот момент. Перерыв происходит каждые 30 минут, и все шоу либо начинаются с вершины часа, либо через 30 минут. Наконец я понял идеальный сценарий. Хотя это может быть слегка отключено из-за нормального дрейфа часов, он должен фактически отображать то же самое независимо от того, кто входит на страницу.
<script> function addZero(i) { if (i<10) { i="0" + i; } return i; } setInterval(function() { function addZero(i) { if (i<10) { i="0" + i; } return i; } var d = new Date(); var s =(d.getSeconds()); var m =(d.getMinutes()); var x = document.getElementById("timer"); var c = addZero(30 - m) + ":" + addZero(60 - s); var d = addZero(60 - m) + ":" + addZero(60 - s); if (m < 30) { t = c } else { t = d } x.innerHTML = t; }, 250) </script> <div align="center"> <table><tbody> <tr><td style="font-size:34px;" id="timer"></td> <td nowrap="nowrap" width="15px"><p style="text-align: left;"></p></td> <td style="font-size:24px;">Minutes till Station Break.</td></tr> </tbody></table> </div> Похоже, вам понадобится решение COMET / Push , которое позволит вам отслеживать активные клиенты и нажимать на них новые данные. Я не уверен, что PHP является лучшим решением для этого, поскольку есть другие языки программирования, которые обрабатывают это более элегантно.
См .: Использование кометы с PHP?
Другие могут не согласиться, но Node.js – отличное решение для решения этой проблемы. Комбинируйте Node.js с Socket.io, и у вас есть основные инструменты для реализации именно того, что вы описываете.
В двух словах клиентское приложение отправит на сервер запрос AJAX. Затем сервер будет удерживать запрос до тех пор, пока у него не будет чего-то вернуть (в вашем случае – таймер запущен, таймер отмечен, таймер приостановлен и т. Д.). Как только данные будут возвращены, другой запрос будет сделан и удерживаться сервером, тем самым повторяя этот процесс. Если ваши серверные и клиентские сервисы WebSockets , то поддерживаемые AJAX-соединения можно избежать в пользу соединения WebSocket (TCP через HTTP).
Поскольку не все используют последнюю версию Chrome / Firefox, вам, вероятно, придется поддерживать несколько методов push, чтобы быть совместимыми с браузерами. Socket.io рецензирует коммуникационный уровень (Comet – длительный опрос, WebSockets, Adobe Flash Socket, Ajax multipart streaming, Forever Iframe, JSONP Polling) и выбирает лучшую технологию, основанную на возможностях браузера клиента.
альтернатива
Вы также можете использовать интервал javascript для периодического опроса сервера (через AJAX), чтобы узнать, установлен ли таймер. Однако вы можете загружать свой сервер с запросами, так как каждый клиент будет постоянно опросить сервер, чтобы определить, начался ли 60-секундный таймер.
Я наконец придумал решение, которое работает. Есть еще элементы, которые я не совсем понял, как исправить, но следующий код по существу делает именно то, что мне нужно сейчас.
setInterval(function() { function addZero(i) { if (i < 10) { i = "0" + i; } return i; } var x = document.getElementById("timer"); var d = new Date(); var s = (d.getSeconds()); var m = (d.getMinutes()); var a = addZero(30 - m); var b = addZero(60 - m); var c = (60 - s); var z = "<span style='color:red;font-size:50px;'>" + "Break" + "</span>"; var v = "<span style='color:black;font-size:24px;'>" + "Break" + "</span>"; if (m > 30) { y = b; } else if (m < 30) { y = a; } if (y < 2 && c < 15) { q = z; } else { q = v; } var t = y + (":" + addZero(c) + " Till Station " + (q)); x.innerHTML = t; }, 250); <div align="center" id="timer" style='color:black;font-size:24px;' ></div>
Когда таймер запуска администратора, сервер сохраняет start_time и duration таймера (60 секунд) (в db, файле или что-то еще). Когда пользователь посещает page.html, start_time и duration получает от сервера, вычисляет значение finish_time (или finish_time вычисляет при сохранении). Затем finish_time - current_time – это разница, которая является текущим состоянием таймера.
$start_time = strtotime( '2012-09-19 00:30:05' ); $duration = 300; //300 seconds = 5 minutes (60 * 5) $finish_time = $start_time + $duration; $timer_state = $finish_time - time();
$timer_state передается в javascript и обратный отсчет до нуля.
И вот окончательное решение, которое я сейчас использую … Ниже приводится файл, называемый timer.js
setInterval(function() { function addZero(i) { if (i < 10) { i = "0" + i; } return i; } var d = new Date(); var s = (d.getSeconds()); var m = (d.getMinutes()); var x = document.getElementById("timer") var a = (29 - m); var b = (59 - m); var f = (60 - s); if (m < 30) { e = addZero(a); } else { e = addZero(b); } var c = " Minutes Till Station "; var z = "<span style='color:red;font-size:50px;'>" + "Break" + "</span>"; var v = "<span style='color:white;font-size:24px;'>" + "Break" + "</span>"; if (e < 1 && f < 30) { t = (e) + ":" + addZero(f) + (c) + (z); } else { t = (e) + ":" + addZero(f) + (c) + (v); } x.innerHTML = (t); }, 250);
Затем я использовал это на странице, чтобы отобразить конечный результат.
<script language="javascript" src="timer.js"></script> <div id="timer" style='margin-top:150;float:center;color:white;font-size:24px;'></div>