Задать вопрос
@sv2204
javascript

Как правильно сделать передать скрипту данные и атрибута data?

Есть скрип таймера обратного отчета, работает нормально если задаеш вручную время, как правильно сформировать код в скрипте что бы он время забирал у блока с атрибутом data и выводил таймер в этот же блок
вод код таймера:
<!doctype html>
<html>
<head>
<title>PHP Countdown Timer</title>
<style>
.green{color:green;}
 
h1{
font-size:3em;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
}
 
</style>

</head>
<body>
<div id="tm1" data="02/19/2016 10:1"></div>
<div id="tm1" data="02/20/2016 10:1"></div>

<script>


    CountDownTimer('02/31/2016 15:32', 'tm1');

    function CountDownTimer(dt, id)
    {
        var end = new Date(dt);

        var _second = 1000;
        var _minute = _second * 60;
        var _hour = _minute * 60;
        var _day = _hour * 24;
        var timer;

        function showRemaining() {
            var now = new Date();
            var distance = end - now;
            if (distance < 0) {

                clearInterval(timer);
                document.getElementById(id).innerHTML = 'EXPIRED!';

                return;
            }
            var days = Math.floor(distance / _day);
            var hours = Math.floor((distance % _day) / _hour);
            var minutes = Math.floor((distance % _hour) / _minute);
            var seconds = Math.floor((distance % _minute) / _second);

            document.getElementById(id).innerHTML = days + 'days ';
            document.getElementById(id).innerHTML += hours + 'hrs ';
            document.getElementById(id).innerHTML += minutes + 'mins ';
            document.getElementById(id).innerHTML += seconds + 'secs';
        }

        timer = setInterval(showRemaining, 1000);
    }

</script>

</body>
</html>
  • Вопрос задан
  • 165 просмотров
Комментировать
Подписаться 1 Оценить Комментировать
Решения вопроса 1
babulja
@babulja
Ну, собственно, вот так:

<div id="timer">
	<div id="tm1" data="02/19/2016 10:1"></div>
	<div id="tm2" data="02/14/2016 20:1"></div>
	<div id="tm3" data="02/12/2016 01:1"></div>
</div>


var elems = document.getElementById('timer').childNodes,
	id_tm = '',
	tm = '';

[].forEach.call(elems, function(elem) {
	if( elem.tagName == 'DIV'){
		id_tm = elem.getAttribute('id');
		tm = elem.getAttribute('data');
		CountDownTimer(tm, id_tm);
	}
});

function CountDownTimer(dt, id)
{
    var end = new Date(dt);

    var _second = 1000;
    var _minute = _second * 60;
    var _hour = _minute * 60;
    var _day = _hour * 24;
    var timer;

    function showRemaining() {
        var now = new Date();
        var distance = end - now;
        if (distance < 0) {

            clearInterval(timer);
            document.getElementById(id).innerHTML = 'EXPIRED!';

            return;
        }
        var days = Math.floor(distance / _day);
        var hours = Math.floor((distance % _day) / _hour);
        var minutes = Math.floor((distance % _hour) / _minute);
        var seconds = Math.floor((distance % _minute) / _second);

        document.getElementById(id).innerHTML = days + 'days ';
        document.getElementById(id).innerHTML += hours + 'hrs ';
        document.getElementById(id).innerHTML += minutes + 'mins ';
        document.getElementById(id).innerHTML += seconds + 'secs';
    }

    timer = setInterval(showRemaining, 1000);
}
Ответ написан
8 комментариев
8 комментариев
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Frontend-разработчик JavaScript
div. • Ставрополь
от 40 000 до 90 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработать и доработать функицонал: Ruby on Rails
28 нояб. 2024, в 09:53
100000 руб./за проект
Отрисовка сервиса соискателей с многоролевой моделью
28 нояб. 2024, в 09:46
800 руб./в час
MODX: выбор нескольких элементов для TV полей с вводом текста в поле
28 нояб. 2024, в 09:05
2000 руб./за проект
Ещё заказы