| |
|
|
| | Здравствуйте Уважаемое сообщество.
Ни поможете собрать код для таймера обратного отсчёта
За основу использую статью http://rgbcolors.ru/prostoj-tajmer-na-javascript/
Где ошибка в коде ни подскажете
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
</head>
<script>
function simple_timer(sec, block, direction) {
var time = sec;
direction = direction || false;
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;
block.innerHTML = hour+':'+minutes+':'+seconds;
if ( direction ) {
sec++;
setTimeout(function(){ simple_timer(sec, block, direction); }, 1000);
} else {
sec--;
if ( sec > 0 ) {
setTimeout(function(){ simple_timer(sec, block, direction); }, 1000);
} else {
alert('Время вышло!');
}
}
</script>
<body>
<div id="sample_countdown">00:05:00</div>
<input type="button" value="Начать отсчёт" onclick="start_countdown()" />
</body>
</html>
|
В чём ошибка в коде для всей страницы html | |
| |
|
|
| |
|
|
| |
для: pautina
(12.01.2015 в 19:42)
| | | Во-первых - корректное написание !DOCTYPE html.
Во-вторых - не закрыто тело функции - нет фигурной скобки, должно быть:
//.....
if ( sec > 0 ) {
setTimeout(function(){ simple_timer(sec, block, direction); }, 1000);
} else {
alert('Время вышло!');
}
}
} //эта скобка отсутствует
|
В третьих - щелчок по кнопке вызывает функцию start_countdown, причем без аргументов, а функция вами показанная называется simple_timer и имеет аргументы.
Если вызываемая функция есть, но не представлена, то это странное действие с вашей стороны, задавая вопрос выставлять половину беды. | |
| |
|
|
| |
|
|
| |
для: confirm
(12.01.2015 в 23:54)
| | | Спасибо, изменил код
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
</head>
<script>
function start_timer() {
var block = document.getElementById('sample_timer');
simple_timer(0, block, true); }
function start_countdown() {
var block = document.getElementById('sample_countdown');
simple_timer(120, block); }
function simple_timer(sec, block, direction) {
var time = sec; direction = direction || false;
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; block.innerHTML = hour+':'+minutes+':'+seconds; if ( direction ) { sec++; setTimeout(function(){ simple_timer(sec, block, direction); }, 1000); } else { sec--; if ( sec > 0 ) { setTimeout(function(){ simple_timer(sec, block, direction); }, 1000); } else { alert('Время вышло!'); } } }
</script>
<body>
<div class="timer_sample">
<div id="sample_countdown">00:02:00</div>
<input type="button" value="Начать отсчёт" onclick="start_countdown()" />
</div>
<!-- .entry-content -->
</body>
</html>
|
А каким образом можно изменить код скрипта, чтоб можно было видеть милисекунды | |
| |
|
|
| |
|
|
| |
для: pautina
(13.01.2015 в 13:07)
| | | А зачем они вам, чтобы у пользователя перед глазами мелькало непонятное?
onclick="start_countdown()" и function start_timer() - это как понять?
Писать конструкции тела условия, функции в одну строку как у вас, это 99% допустить ошибку.
Форматируйте код так, чтобы его легко было читать, а уж отладив его можно и сюда - сжать его в одну строку, выбросив все лишнее.
//code
else {
expression;
expression;
expression //последнее выражение конструкции можно не закрывать точкой с запятой, это сокращает размер загружаемый пользователю
}
|
| |
| |
|
|
| |
|
|
| |
для: confirm
(13.01.2015 в 13:19)
| | | Да спасибо, милисекунды не нужны, скажите а есть способ изменить расстояние между минутами и секундами (ну разделитель)
letter-spacing:0px; word-spacing:0px; white-space:0px;
расстояние между символами сработало, но мне бы не просто между символами а между мини и сек | |
| |
|
|
| |
|
|
| |
для: pautina
(13.01.2015 в 14:31)
| | | А вы что минуты, секунды и их разделитель : в одну строку записываете?
Минуты, это один html-элемент, который для JS-сценария является объектом А, а секунды, это другой html-элемент и для сценария объект B. А задать стили этим элементам, это через CSS. | |
| |
|
|
| |
|
|
| |
для: confirm
(13.01.2015 в 14:35)
| | | Как мне описать стилями объект для минут или секунд?
В данном случае пока в 1 строку всё записано
Вот 3 переменных часы, минуты, секунды
var hour = parseInt(time / 3600);
var minutes = parseInt(time / 60);
var seconds = time;
|
Каким образом мне описать стили для них? | |
| |
|
|
| |
|
|
| |
для: pautina
(13.01.2015 в 15:07)
| | | Стили для переменных JS описать нельзя, не могут они иметь стилей, а вот значения часов и минут могут находится каждое в своем html элементе, стили которым можно прописать какие душа пожелает. | |
| |
|
|
| |
|
|
| |
для: confirm
(13.01.2015 в 20:30)
| | | Как это
а вот значения часов и минут могут находится каждое в своем html элементе
Какой участок кода использовать для того чтоб задать стили для часов или минут | |
| |
|
|
| |
|
|
| |
для: pautina
(14.01.2015 в 18:44)
| | | Никакой, а вот это
<div id="sample_countdown">00:05:00</div>
|
и сделать, например, так:
<div id="sample_countdown"><span>00</span>:<span>05</span>:<span>00</span></div>
|
и устанавливайте стили элементам span какие надо.
Сам скрипт должен получать данные в этом сдлучае конечно не из строки 00:05:00, а из этих элементов. Хотя, разумнее все, что вы где-то нашли выбросить в помойку, ибо в JavaScript есть объект работающий с датой/временем - Date().
Скрипт таймера не важно какого отсчета, должен хранить в переменной, а не в какой-то строке, метку стартового времени, которая через 1 секунду уменьшается на единицу (для таймера с обратным отсчетом). Значение этой измененной метки передается в объект Date, и получаем время по этой метке: часы, минуты, секунды. А не вcякие parseInt из всякой ерунды. Полученные значения помещаются в массив, и сравниваются на достижение нуля, если нет, то методом join() объединяем этот массив в строку показанную выше - <span>ХХ</span>:<span>ХХ</span>:<span>ХХ</span>, помещая ее в элемент sample_countdown. | |
| |
|
|
| |
|
|
| |
для: confirm
(14.01.2015 в 19:24)
| | | Насчёт скрипта, да на помойку согласен, здесь наверняка много неправильных моментов. Но тем не менее скрипт работает
<div id="sample_countdown"><span>00</span>:<span>05</span>:<span>00</span></div>
|
Если посоветуете другой участок кода, был бы только рад?
Но для данного обратного отсчёта времени, в интернете только этот скрипт получилось найти,
В основном всё что по таймерам есть, это стандартные таймеры (где, день, час, мин, сек, и нет запуска по кнопке)
А можно ли сделать чтобы в нашем скрипте, стили можно было менять, после активации отсчёта, т.е. после нажатия.
А то сейчас принажатии на кнопку, работает функция, и все стили сбразываются, а нужное смещение символов цифр справедливо только без активации, пока не нажата кнопка | |
| |
|
|
| |
|
|
| |
для: pautina
(14.01.2015 в 21:54)
| | | Не правда, скриптов таймеров сколь угодно.
И я не говорил, что этот хлам не работает. Семечки ведь из пакета в пакет можно по одной переложить, а можно сразу пересыпать весь пакет во второй. В обеих случаях задача будет выполнена, просто во втором случае гораздо рациональнее. | |
| |
|
|
