Таймер для нескольких id
Здрасте, подскажите по таймеру...
<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, выполняется только последний, как сделать, что бы работало для всех ? |
|
Спасибо, но мне нужно без кнопок, при загрузке страницы или изменение dom...
|
nekada,
поставьте класс и циклом по классу в 16 строке |
немного не понял...
Вы имеете ввиду : document.querySelectorAll ? |
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>
|
рони,
Рони, вы знаток :) Спасибо, но скажите почему при добавление ного элемента они теперь все перезагружаются ? |
Сделал классы уникальные перестали перезагружаться, но есть одно, но при добавление нового элемента, добавленный не работает, можно как-то привязать после добавления перезагрузку скрипта?
Добавление элемента происходит через ajax, без перезагрузки страницы... |
nekada,
не понимаю |
Ну новый элемент добавляется через ajax, а скрипт работает при полной загрузке документа, но при добавление через ajax документ не перезагружается, каким образом запустить это событие для вновь добавленного элемента span...
|
nekada,
вы неправильно формируите вопрос, пока скрипт работает ему неважно сколько элементов с классом timer на странице и когда они добавлены. |
timer of dataset
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>
|
| Часовой пояс GMT +3, время: 15:11. |