Вход

Просмотр полной версии : Таймер для нескольких id

nekada
20.02.2017, 19:30
Здрасте, подскажите по таймеру...

<body onLoad="refresh();">

{literal}
<script language="JavaScript" type="text/javascript">
<!--
//секунды
var sec=00;
//минуты
var min=02;

function refresh()
{
sec--;
if(sec==-01){sec=59; min=min-1;}
else{min=min;}
if(sec<=9){sec="0" + sec;}
time=(min<=9 ? "0" + min : min) + ":" + sec;
if(document.getElementById){timer_{/literal}{$iAnswerId}{literal}.innerHTML=time;}
inter=setTimeout("refresh()", 1000);
}
//-->
</script>
{/literal}





<span id="timer_{$iAnswerId}">время...</span>
</body>


Если на странице больше 1 span, выполняется только последний, как сделать, что бы работало для всех ?
рони
20.02.2017, 20:14
nekada,
http://javascript.ru/forum/dom-window/47883-perezapusk-odnogo-tajjmera-iz-neskolkikh.html#post316097
nekada
20.02.2017, 22:16
Спасибо, но мне нужно без кнопок, при загрузке страницы или изменение dom...
рони
20.02.2017, 22:19
nekada,
поставьте класс и циклом по классу в 16 строке
nekada
20.02.2017, 22:31
немного не понял...
Вы имеете ввиду : document.querySelectorAll ?
рони
20.02.2017, 22:33
nekada,
<!DOCTYPE html>

<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>

<script>
window.addEventListener('DOMContentLoaded', function() {
//секунды
var sec=7;
//минуты
var min=0;

function refresh()
{
sec--;
if(sec==-01){sec=59; min=min-1;}
if(sec<=9){sec="0" + sec;}
time=(min<=9 ? "0" + min : min) + ":" + sec;
[].forEach.call( document.querySelectorAll('.timer'), function(el) {
el.innerHTML=time
});

(+sec||+min) && setTimeout(refresh, 1000);
}
refresh()
});
</script>
</head>

<body>
<span class="timer"></span>
<span class="timer"></span>
</body>
</html>
nekada
20.02.2017, 22:48
рони,
Рони, вы знаток :) Спасибо, но скажите почему при добавление ного элемента они теперь все перезагружаются ?
nekada
20.02.2017, 23:01
Сделал классы уникальные перестали перезагружаться, но есть одно, но при добавление нового элемента, добавленный не работает, можно как-то привязать после добавления перезагрузку скрипта?

Добавление элемента происходит через ajax, без перезагрузки страницы...
рони
20.02.2017, 23:23
nekada,
не понимаю
nekada
21.02.2017, 00:49
Ну новый элемент добавляется через ajax, а скрипт работает при полной загрузке документа, но при добавление через ajax документ не перезагружается, каким образом запустить это событие для вновь добавленного элемента span...
рони
21.02.2017, 09:28
nekada,
вы неправильно формируите вопрос, пока скрипт работает ему неважно сколько элементов с классом timer на странице и когда они добавлены.
рони
21.02.2017, 10:03
nekada, добавляйте когда хотите, только укажите class и dataset
<!DOCTYPE html>

<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.timer{
background-color: #000080;
color: #FFFFFF;
margin: 5px 2px;
padding: 4px;
}

</style>

<script>
window.addEventListener('DOMContentLoaded', function() {
function refresh()
{
[].forEach.call( document.querySelectorAll('.timer'), function(el) {
var sec = +el.dataset.sec;
if(sec==-1){sec=el.dataset.sec=59; el.dataset.min--;}
var min = +el.dataset.min;
if(sec<=9){sec="0" + sec;}
time=(min<=9 ? "0" + min : min) + ":" + sec;
el.innerHTML=time;
if(+sec||+min) el.dataset.sec--;
else el.classList.remove("timer")
});
setTimeout(refresh, 1000);
}
refresh()
});
</script>
</head>

<body>
<span class="timer" data-min="1" data-sec="7"></span>
<span class="timer" data-min="0" data-sec="11"></span>
</body>
</html>