Javascript-форум - Несколько скриптов на одной странице

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Несколько скриптов на одной странице (https://javascript.ru/forum/misc/57059-neskolko-skriptov-na-odnojj-stranice.html)

Несколько скриптов на одной странице

Привет ребята! Подскажите пожалуйста как можно реализовать дубли этого скрипта, на одной странице. Нашел у вас на форуме замечательный скрипт счётчика. И не могу разобраться, как можно сделать много счётчиков на одной странице. Уже пробовал менять getElementById. Не выходит, запускается только один счётчик. Вот скрипт:

<!DOCTYPE HTML>
<html>
  <head>
  <meta charset="utf-8">
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  </head>
  <body>
<div id="title">Start</div>
<a id="waiting" href="http://ya.ru/" target="_blank" data-load="1">Click</a>

<script>
function eHide(sec, checkLocalStorage) {
  if (checkLocalStorage && localStorage.getItem('eHideSec')) {
    var savedSec = localStorage.getItem('eHideSec');
    if (savedSec > 0) sec = savedSec;
  }
  var time = sec;
  var hour = parseInt(time / 3600);
  if (hour < 1) hour = 0;
  time = parseInt(time - hour * 3600);
  if (hour < 10) hour = '0' + hour;
  var minutes = parseInt(time / 60);
  if (minutes < 1) minutes = 0;
  time = parseInt(time - minutes * 60);
  if (minutes < 10) minutes = '0' + minutes;
  var seconds = time;
  if (seconds < 10) seconds = '0' + seconds;

  document.getElementById("title").innerHTML = 'Wait ' + hour + ':' + minutes + ':' + seconds;
  localStorage.setItem('eHideSec', sec);
  sec--;

  if (sec >= 0) {
    window.setTimeout(function () {
      eHide(sec);
    }, 1000);
    enabled = false;
  } else {
    document.getElementById("title").innerHTML = 'The End!';
	$("#waiting").attr("data-load", '1');
  }
}

if (localStorage.getItem('eHideSec') && localStorage.getItem('eHideSec') > 0) {
  $("#waiting").attr("data-load", '0');
  eHide(15, true);
}

$("#waiting").on("click", function () {
  if ($(this).attr("data-load") == 1) {
    $(this).attr("data-load", '0');
    eHide(15, true);
  } else {
      alert('forbidden')
      return false;
    }
});
</script>

  </body>
</html>

Заранее спасибо!

Надо скопировать этот скрипт. И поменять в нём все значения основных переменных. Если таймера всего 2, тогда это имеет смысл.

Если таймеров неограниченное множество, тогда надо призадуматься.
Теоретически можно это сделать. Но лучше просто скопировать скрипт, и добавить во все переменные например цыфру 1.
Ну и в ключ локального хранилища тоже.

<html>
  <head>
  <meta charset="utf-8">
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  </head>
  <body>
<div id="title">Start</div>
<div id="title1">Start</div>
<a id="waiting" href="http://ya.ru/" target="_blank" data-load="1">Click</a>
 
<script>
function eHide(sec, checkLocalStorage) {
  if (checkLocalStorage && localStorage.getItem('eHideSec')) {
    var savedSec = localStorage.getItem('eHideSec');
    if (savedSec > 0) sec = savedSec;
  }
  var time = sec;
  var hour = parseInt(time / 3600);
  if (hour < 1) hour = 0;
  time = parseInt(time - hour * 3600);
  if (hour < 10) hour = '0' + hour;
  var minutes = parseInt(time / 60);
  if (minutes < 1) minutes = 0;
  time = parseInt(time - minutes * 60);
  if (minutes < 10) minutes = '0' + minutes;
  var seconds = time;
  if (seconds < 10) seconds = '0' + seconds;
 
  document.getElementById("title").innerHTML = 'Wait ' + hour + ':' + minutes + ':' + seconds;
  localStorage.setItem('eHideSec', sec);
  sec--;
 
  if (sec >= 0) {
    window.setTimeout(function () {
      eHide(sec);
    }, 1000);
    enabled = false;
  } else {
    document.getElementById("title").innerHTML = 'The End!';
    $("#waiting").attr("data-load", '1');
  }
}
 
if (localStorage.getItem('eHideSec') && localStorage.getItem('eHideSec') > 0) {
  $("#waiting").attr("data-load", '0');
  eHide(15, true);
}
 
$("#waiting").on("click", function () {
  if ($(this).attr("data-load") == 1) {
    $(this).attr("data-load", '0');
    eHide(15, true);
  } else {
      alert('forbidden')
      return false;
    }
});
</script><script>
function eHide1(sec1, checkLocalStorage1) {
  if (checkLocalStorage1 && localStorage.getItem('eHideSec1')) {
    var savedSec1 = localStorage.getItem('eHideSec1');
    if (savedSec1 > 0) sec1 = savedSec1;
  }
  var time = sec1;
  var hour = parseInt(time / 3600);
  if (hour < 1) hour = 0;
  time = parseInt(time - hour * 3600);
  if (hour < 10) hour = '0' + hour;
  var minutes = parseInt(time / 60);
  if (minutes < 1) minutes = 0;
  time = parseInt(time - minutes * 60);
  if (minutes < 10) minutes = '0' + minutes;
  var seconds = time;
  if (seconds < 10) seconds = '0' + seconds;
 
  document.getElementById("title1").innerHTML = 'Wait ' + hour + ':' + minutes + ':' + seconds;
  localStorage.setItem('eHideSec', sec1);
  sec1--;
 
  if (sec1 >= 0) {
    window.setTimeout(function () {
      eHide1(sec1);
    }, 1000);
    enabled = false;
  } else {
    document.getElementById("title1").innerHTML = 'The End!';
    $("#waiting").attr("data-load", '1');
  }
}
 
if (localStorage.getItem('eHideSec') && localStorage.getItem('eHideSec') > 0) {
  $("#waiting").attr("data-load", '0');
  eHide1(15, true);
}
 
$("#waiting").on("click", function () {
  if ($(this).attr("data-load") == 1) {
    $(this).attr("data-load", '0');
    eHide1(15, true);
  } else {
      alert('forbidden')
      return false;
    }
});
</script>
 
  </body>
</html>

Спасибо большое! Всё получилось. Да, по задумке надо много счётчиков, но теперь хоть понимаю как их наделать. Ещё раз спасибо!

Цитата:

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

Если счётчиков много есть такое решение(кривое как...****):
Сделать генератор счётчиков, который будет вставлять их в html. И все глобальные переменные id ключи и название самой функции менять.
Как-то так.

<div id="timers"></div>

var i = 1;
function addTimer(){
var eHide = "eHide";
var sec = "sec";
var checkLocalStorage = "checkLocalStorage";
var eHideSec = "eHideSec";
var title = "title";
document.getElementById("timers").innerHTML += '<script>function' + eHide + i +'(' +sec + i + ',' + checkLocalStorage +i +') {  if ('+checkLocalStorage +i +'&& localStorage.getItem("'+eHideSec + i+'")) {var savedSec = localStorage.getItem("'+eHideSec + i+'");if (savedSec > 0) '+sec + i+' = savedSec;}var time = '+sec + i+';var hour = parseInt(time / 3600);if (hour < 1) hour = 0;time = parseInt(time - hour * 3600);if (hour < 10) hour = "0" + hour;var minutes = parseInt(time / 60);if (minutes < 1) minutes = 0;time = parseInt(time - minutes * 60);if (minutes < 10) minutes = "0" + minutes;var seconds = time;if (seconds < 10) seconds = "0" + seconds;document.getElementById("'+title+i +'").innerHTML = "Wait " + hour + ":" + minutes + ":" + seconds;localStorage.setItem("'+eHideSec + i+'", '+sec + i+');'+sec + i+'--;if ('+sec + i+' >= 0) {window.setTimeout(function () {' + eHide +i + '('+sec + i+');}, 1000);enabled = false;} else {document.getElementById("'+title+i +'").innerHTML = "The End!";$("#waiting").attr("data-load", "1");}}if (localStorage.getItem("'+title+i +'") && localStorage.getItem("'+eHideSec + i+'") > 0) {$("#waiting").attr("data-load", "0");' + eHide +i + '(15, true);}$("#waiting").on("click", function () {if ($(this).attr("data-load") == 1) {$(this).attr("data-load", "0");' + eHide +i + '(15, true);} else {alert("forbidden")return false;}});</script>';
i++;
}

Только когда сделал понял что не нужно было выделять все эти переменные, можно было обойтись только i.
Главное не забудь что всё это должно быть одной строчкой, вроде как. Иначе js не прочтёт. Не знаю почему так. Но кавычки js не умеет соединять через строки.

Да вы что господа опухли? Сделайте обычную функцию или объект с этой рассыпухи и будет вам 100500 счетчиков. Чтобы для каждого был свой кармашек в бд - используйте либо имя счетчика как namespace, либо явно передавайте в опциях.

И вообще какой-то бред:

Цитата:

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

if (minutes < 10) minutes = '0' + minutes;

нафига это надо? Нет что ли нормальных методов форматирования целых?

Цитата:

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

Я просто безумен. Мне немного знаний и мозга не хватает. То есть сделать все переменные локальными и что бы они с одинаковыми именами там работали независимо, мне мозг позволяет. Но как сделать сами функции независимыми. Непонятно для меня.

Цитата:

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

нафига это надо? Нет что ли нормальных методов форматирования целых?

Если вспомнишь мой кусок кода с болтающейся кнопкой старт, то даже там это было сделано приличней. Но я подумал что в этом есть, наверное, какой-то высший смысл.

Цитата:

Сообщение от Leon-on12

Но как сделать сами функции независимыми

Накопировать и все. Не тексты, не вручную, а коды, скриптом.

Чёт этот вариант у меня не хочет работать. Если можно мне ещё подсказать на счёт первого варианта. Вот если счётчик один, то при обновлении страницы, таймер не сбивается, а если два или больше, при обновлении сбивается. В чём там может быть проблема? Просто мне он подошел потому что таймер не сбивается. Или может есть подсказка как вот такой доделать, чтоб время не сбивалось.

<input id="Bit2" value="Knopka" onclick="Bit2()">

var W;
function Bit2 ()
{
var o = document.getElementById ('Bit2');
o.disabled = 1; o.value = 'Ждать 1m.';
W = window.open ('1.html', 'hero');
myTimer ();

function myTimer ()
   {
   var w = o.value.split ('Ждать ') [1],
       t = 60 * parseInt (w) - 1 + ((w.indexOf ('m. ') != -1) ? parseInt (w.split ('m. ') [1]) : 0),
       m = Math.floor (t / 60);
       s = t % 60;
   if (t) {o.value = 'Ждать ' + m + 'm.' + (s ? (' ' + s + 's.') : ''); setTimeout (myTimer, 1000)}
   else {o.value = 'Start'; o.disabled = 0; if (!W.closed) W.close ()}
   }
}

Цитата:

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

Накопировать и все. Не тексты, не вручную, а коды, скриптом.

Так разве второй мой код не делает то самое копирование кода кодом?

Цитата:

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

а если два или больше, при обновлении сбивается

Странно. Во втором примере у меня не сбивается. В том таймере используется localStorage. Почитай что это такое. Полезная вещь, и совсем не сложная. Скореее всего происходит конфликт функций. Они борются за один и тот же локалсторедж.
Так что дело в нём. Смотри внимательно на ключ localStorage