ООО ЭкоЮнит
FAQSearchMemberlistUsergroupsFilesLog inRegisterГлавная
printer-friendly view
 
AuthorMessage
Sergey Gender:Male


Местный босс - администратор


Joined: 06 Jan 2005
Show/Hide

Я тоже решил приобщиться и вывалить java-скрипт на тему сабжа.
В скрипте происходит обратный посекундный отсчет времени от заданного значения до нуля и по завершении выполняются какие-либо действия, определённые в пользовательской процедуре f_callee. Для показа значения счетчика на странице следует определить блочный элемент типа div или span с идентификатором timer_inp, при необходимости присвоить ему css-стиль или класс, как в примере ниже.

Блок скрипта <script type="text/javascript">.... </script> следует поместить перед тэгом </body> html-страницы, чтобы основная функция вызывалась после прогрузки всей страницы. В принципе, её можно навесить на событие window.onload, но тогда она может затереть ранее назначенные обработчики.
Кроссбраузерное добавление нескольких обработчиков на какое-то событие известно, здесь я его рассматривать не буду.

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Демонстрация обратного отчета времени</title>
<style type="text/css">
<!--
.r {color: red;}
-->
</style>
</head>
<body>
    <div style="text-align:center;padding-top:50px">Осталось 
        <!-- Здесь будем выводить значение счетчика -->
        <span style="font-weight:bold" class="r" id="timer_inp">10</span> 
    секунд</div>

<script type="text/javascript"> 
<!--
/**
* @coded by Sergey aka Porutchik, http://forum.aeroion.ru/cat1/
*/

//Переменные для настройки

//Начальное значение счетчика для обратного отсчета.
var counter = 10;

//Объект - блочный элемент, в который следует выводить значение счетчика.
//При необходимости укажите свой идентификатор элемента.
var obj = document.getElementById('timer_inp');

/**
* В этой функции прописываем какие-либо действия по завершении работы таймера.
*/
function f_callee()
{
    /* Example code! */
    /* Replace this code */
    alert('Stop');
    //window.location.href = 'адрес url для перехода/переадресации';
}

/** Настройки закончились, дальше ковыряйте на свой страх и риск. 
* Я вас предупредил.
**/

/**
* Определяем анонимную функцию для вывода счетчика по таймеру и выполнения какого-то действия 
* и сразу вызываем её
*/
(function (acounter, aobj, af_callee)
{
    var timeoutID = window.setInterval(function ()
    { 
        acounter--;
        if (aobj)
        {
            aobj.innerHTML = acounter;
        }
        if (acounter == 0)
        {
            clearInterval(timeoutID);
            if (af_callee != undefined)
            {
                //Если функция определена, вызываем её
                af_callee();
            }
        } 
    },1000); 
})(counter, obj, f_callee);
//-->
</script>

</body>
</html>

_________________
Профессионал - это тот же дилетант, только знающий где ошибется. Генератор db_update.php для phpBB2 с некоторыми удобствами.
Как ставить моды. Что такое [SQL] и с чем его едят | Как правильно задавать вопросы и получать адекватные ответы | Правила форума
Бесплатная техподдержка только на форуме! Не надо стучаться в аську, скайп, слать емайлы, пытаться писать в приват. Спасибо за понимание. Please do not PM, ICQ, Skype or email me for support help - you won't get any reply. If you have a question or issue, post it in the appropriate forum/topic. Thanks!
Back to topOffline View user's profile Visit poster's website Skype Name
Display posts from previous:   

Summary Rating For >> Скрипт для обратного отсчета времени на JavaScript
Average Rating: 3.00 :: Min Rating: 1 :: Max Rating: 5 :: Number of Ratings: 2
Choose Rating: 1   2   3   4   5  


Similar Topics
Topic Author Forum Replies Last Post
No new posts Изменить функцию отображения времени
Здравствуйте! Согласно установленному на форуме по умолчанию формату отображения времени, высвечивается менее минуты назад, 10 минут назад, 59 минут назад. Но если прошёл час, то показывается уже не сколько прошло, а
Ursego Поддержка и моды для phpBB3 1 Tue 01 Apr, 2014 07:20 View latest post
Sergey
No new posts Скрипт для использования Data:URL. Script for use Data:URL.
Скрипт для помещения изображений внутрь css файла. Повышает SEO сайта.
Название: dataURL_css Автор: vlad77 Описание: Этот скрипт помещает картинки внутрь css файла. Тем самым уменьшает количество DNS запросов при открытии страницы. Увеличивая SEO сайта. Объем передаваемых данных
vlad77 Прочие технические вопросы (php, javascript, perl и другое) 0 Wed 14 Nov, 2018 20:07 View latest post
vlad77
No new posts Скрипт для подписывания пользователей на темы
Скрипт производит подписывание пользователей на темы, в которых они участвовали. Такая операция может быть полезна, если пользователь при ответе или создании темы не установил флажок Сообщать мне о получении ответа.
Sergey Поддержка и моды для phpBB2 4 Sat 05 Dec, 2009 12:19 View latest post
Sergey
No new posts Скрипт вывода последних комментариев в фотоальбоме Photo Album v2 for phpBB2
Написал я простенький скрипт , который должен выводить последние комментарии в фотоальбоме Photo Album v2 for phpBB2 Author: Smartor , но никак не могу сделать пагинацию - вроде и номер страницы методом GET скрипт
Dedof Поддержка и моды для phpBB2 4 Tue 17 Feb, 2009 23:58 View latest post
Dedof
This topic is locked: you cannot edit posts or make replies. Настройка формата времени и даты.
Привет! Я опять обращаюсь за помощью! У меня не работает формат даты и времени. DMd, YG:i - я задаю 30 Авг 2005 03:40 pm - он выводит. Почему?
romlex Поддержка и моды для phpBB2 2 Wed 31 Aug, 2005 11:42 View latest post
romlex






All times are UTC + 3 hours
Users browsing this topic:
Registered Users: None

Jump to:   
printer-friendly view
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
You cannot attach files in this forum
You can download files in this forum
/a
Username:

Password:

Log me on automatically each visit
  Яндекс.Метрика
CrackerTracker © 2004 - 2018 CBACK.de