Как создать Часы JQuery / Таймер
У меня есть простое приложение теста, и я хочу, отображают хороший таймер / часы в верхней части страницы, какие шоу пользователь, сколько времени они шли для. (Если я мог бы так или иначе показать им таймер в течение Общего Времени Теста и также второго в течение Этого Времени для вопросов, которое будет еще более прохладно, но я должен смочь выяснить, как сделать меня это, после того как у меня есть одна работа таймера.
Мой вопрос:
Что хороший, простой способ состоит в том, чтобы показать простому таймеру / часы с помощью JQuery? (прямой JS также в порядке), я знаю, как проверить время, но как я получаю секунды постепенного увеличения?
Мои собственные поиски продолжают вести меня к плагинам JQuery (я хочу прокрутить свое собственное), и также "таймеры события", которые не являются тем, что я ищу...
2 ответа
Вам нужна функция setInterval , которая запускает функцию каждые x миллисекунд.
Например:
var start = new Date;
setInterval(function() {
$('.Timer').text((new Date - start) / 1000 + " Seconds");
}, 1000);
setInterval, предложенный SLaks, был именно тем, что мне нужно для создания моего таймера. (Спасибо, приятель!)
Используя setInterval и этот замечательный пост в блоге , я создал следующую функцию для отображения таймера внутри моего div "box_header". Надеюсь, это поможет кому-нибудь еще с похожими требованиями!
function get_elapsed_time_string(total_seconds) {
function pretty_time_string(num) {
return ( num < 10 ? "0" : "" ) + num;
}
var hours = Math.floor(total_seconds / 3600);
total_seconds = total_seconds % 3600;
var minutes = Math.floor(total_seconds / 60);
total_seconds = total_seconds % 60;
var seconds = Math.floor(total_seconds);
// Pad the minutes and seconds with leading zeros, if required
hours = pretty_time_string(hours);
minutes = pretty_time_string(minutes);
seconds = pretty_time_string(seconds);
// Compose the string for display
var currentTimeString = hours + ":" + minutes + ":" + seconds;
return currentTimeString;
}
var elapsed_seconds = 0;
setInterval(function() {
elapsed_seconds = elapsed_seconds + 1;
$('#box_header').text(get_elapsed_time_string(elapsed_seconds));
}, 1000);