Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Скрипт ссылки-таймера (https://javascript.ru/forum/dom-window/49264-skript-ssylki-tajjmera.html)

condpattern 05.08.2014 13:06

Скрипт ссылки-таймера
 
Приветствую.

Подскажите, возможно ли средствами JavaScript создать ссылку/ кнопку, которую бы возможно было нажимать раз в сутки?

Пример,

--я нажал на ссылку
--включился обратный таймер 24 часа
--я зашел через час и вижу таймер 22:59:48
--зашел через сутки- все ок
--снова нажал на ссылку
--включился таймер..

Как я понимаю без куки не обойтись? JavaScript же работает с Cookie или только PHP? Простите, не знаком совершенно с JS отсюда и глупые вопросы.

Спрашиваю, чтобы более корректно описать заказ здесь на форуме в разделе работа/или на том же фрилансере. Возможно, кто-то готов сделать сие? Сколько это будет стоить?

WorM32 05.08.2014 13:20

Таймер — JS, остальное — PHP.

Главное здесь, чтобы действие, которое совершается при нажатии на кнопку, нельзя было сделать напрямую (например, отправка и выполнение запроса на сервере).

condpattern 05.08.2014 13:33

Цитата:

Сообщение от Rise (Сообщение 324358)
WorM32, а как вы идентифицировать пользователя на php собрались?

Как вариант IP, но тут у большинства динамический, вводить отдельно авторизацию не лучший вариант.

Полагаю имелось ввиду добавить какую-нибудь переменную в куки с помощью PHP, например дату нажатия и относительно этой даты плясать. Но я нашел такую штуку: http://learn.javascript.ru/cookie Мб проще с помощью нее?

Например, при клике на нужный нам id можно вносить в куки с помощью JS текущую дату на сервере/ компьютере (полагаю первое без PHP не вариант) и далее относительно нее
--или выводить таймер сколько осталось до прошествия 24 часов
--или саму ссылку.

По идее такое же возможно в JS? Я просто никогда не сталкивался с применением cookie в JS и вообще работает ли JS c ними, интуиция подсказывает, что работает.

condpattern 05.08.2014 13:39

Мне нужно что-то типа этого http://jsfiddle.net/rATW7/ только чтобы было 24 часа и таймер не сбрасывался при обновлении страницы. Вот.
Возможно, кто-то еще поделиться опытом? Больше всего интересует как сделать, чтобы таймер не сбрасывался при обновлении странички.

WorM32 05.08.2014 13:41

Цитата:

Сообщение от Rise (Сообщение 324358)
WorM32, а как вы идентифицировать пользователя на php собрались?

:blink: Cookie/Session

condpattern,
Чтобы не сбрасывался таймер - время начало старта таймера нужно хранить на сервере.

При клике по кнопке должен отправится запрос на сервер, по результату которого, время старта будет сохранено на сервере. Сохранение начало старта на клиенте это ненадежно. При обновлении страницы, клиент должен получить от сервера оставшееся время и запустить обратный отсчет.

condpattern 05.08.2014 14:09

Цитата:

Сообщение от WorM32 (Сообщение 324368)
:blink: Cookie/Session

condpattern,
Чтобы не сбрасывался таймер - время начало старта таймера нужно хранить на сервере.

При клике по кнопке должен отправится запрос на сервер, по результату которого, время старта будет сохранено на сервере. Сохранение начало старта на клиенте это ненадежно. При обновлении страницы, клиент должен получить от сервера оставшееся время и запустить обратный отсчет.

Я понимаю, что как только клиент почистит историю все обнулится, но в моем случае это не принципиально. В приоритете скорее обойтись без сервера и БД.

WorM32 05.08.2014 14:16

condpattern,
Сохраняйте тогда время клика в куки или localStorage. При загрузке страницы берите оттуда, вычитайте из текущего времени и на разницу, если требуется, запускайте таймер.

condpattern 05.08.2014 14:41

Цитата:

Сообщение от WorM32 (Сообщение 324378)
condpattern,
Сохраняйте тогда время клика в куки или localStorage. При загрузке страницы берите оттуда, вычитайте из текущего времени и на разницу, если требуется, запускайте таймер.

Итого мне нужно что-то типа такого:

--при нажатии на ссылку
заносим текущую дату с компа в куки/ local storage в переменную clicker на 24 часа и переходим по ссылке

--при каждой загрузке страницы
Что-то типа onload
смотрим переменную clicker
если она есть, то
считаем сколько она будет жить:
таймер=текущая дата минус дата в переменной clicker
в нужнмо спане отображаем таймер обратного отсчета в зависимости от значения таймер
если нет (else), то
в нашем спане просто отображаем ссылку

Собственно вопрос. Кто это может перевести в язык Javascript и сколько это будет стоить?

condpattern 05.08.2014 17:09

Цитата:

Сообщение от Rise (Сообщение 324414)
condpattern, не чаще 1 раза в сутки и через 24 часа - это разные вещи так то...

Да, вы правы. При том не чаще раза в сутки сделать проще, как мне кажется. Таймер отсчитывающий время до начала суток уже нашел, работает. Осталось дело за малым:

--При заходе на страницу
+Проверяем куки
+Находим переменную lastpick
+Если дата не сегодняшняя удаляем
+Если сегодняшняя ничего не делаем

--Отображение на странице
+Если переменная lastpick объявлена показываем
+Then таймер
+Else ссылку

--При клике по ссылке
+Добавляем в куки переменную lastpick равную текущей дате

Придется все таки вспоминать PHP.

condpattern 05.08.2014 18:37

Цитата:

Сообщение от Rise (Сообщение 324431)
как раз наоборот
В данном случае зачем вам php?

Решил попытаться сделать все на JavaScript. Так как я не знаю даже синтаксиса, то нашел куски которые мне нужны но не могу соединить в единое целое, просьба помочь:

1. Вот код, который проверяет куки и достает переменную name, если она задана или присваивает ей значение undefined:
function getCookie(name) {
  var matches = document.cookie.match(new RegExp(
    "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
  ));
  return matches ? decodeURIComponent(matches[1]) : undefined;


2. Вот код, который выдает ссылку если переменная name undefined или таймер отсчета до конца суток, если переменная нашлась:
if (typeof name != 'undefined') {
document.getElementById('countdownToMidnight').innerHTML='<a href="#">Ссылка</a>';
  }
else {
function ShowTimes() {
      var now = new Date();
      var hrs = 23-now.getHours();
      var mins = 59-now.getMinutes();
      var secs = 59-now.getSeconds();
      var str = '';
      str += hrs+':'+mins+':'+secs;
  document.getElementById('countdownToMidnight').innerHTML = str;
}
}


3. Вот код который записывает переменную name в куки и ставит время хранения для нее столько секунд, сколько осталось до конца суток:
function setCookie( name, value, expires, path, domain, secure ) {
	document.cookie = name + "=" + escape(value) +
		((expires)  ?  "; expires=" + expires.toGMTString():   "") + 
		((path)  ?  "; path=" + path   :   "")   + 
		((domain)  ?  "; domain="   +  domain :   "")   + 
		((secure)  ?  ";   secure"  :   "");
}
setCookie( 'name', date.getDay(), new Date( (new Date()).getTime() + ( 86400 - 3600*date.getHours() - 60*date.getMinutes() - date.getSeconds(); ) ), '/' );


Подскажите, пожалуйста:
1) Как сделать так, чтобы код 1 и 2 исполнялись при загрузке странице? Возможно,
window.onload

А куда его вставлять?
2) Как сделать, чтобы куки записывались при клике на id="countdownToMidnight"? Возможно,
getElementById('countdownToMidnight')

А куда его вставлять?
Спасибо за помощь.


Часовой пояс GMT +3, время: 11:35.