0

Допустим у меня есть какое то число на странице, и я хочу, чтобы оно каждую секунду оно уменьшалось на 1 и, когда будет 0, обновить станицу. (Стандартный счетчик с выводом на экран в определенном месте) Число присваивается на любую переменную. (Возможно это просто для вас, но я с JS не знаком, поэтому прошу вашей помощи) Число я выведу с помощью РНР

2 ответа 2

1
<script type="text/javascript">

    onload = function(){
         // инициализируем интервал
         setInterval(function(){
               // функция будет вызываться каждую секунду
               // выбираем наш "счетчик" див
               var counter = document.getElementById("counter");
               // получаем целочисленное значение его HTML'я
               var counterValue = parseInt(counter.innerHTML);
               if(counterValue) {
                   // если оно не 0 ( т.е. не является false )
                   --counterValue;
                   // уменьшаем на единицу
                   counter.innerHTML = counterValue;
                   // записываем в элемент
               }
               else {
                   // в противном случае
                   document.location.href = ''; // перезагружаем страницу
               }
         }, 1000);
    }

</script>

<div id="counter">100</div>
<!-- тут естественно можешь выводить любое int(>0) значение -->
0

К примеру начальное значение счетчика было выведено средствами пхп вот так:

<div id="counter"><?php echo $init_count; ?></div>

Тогда в javascript:

var Counter = (function(){

    var
        private = {
            start : 0,
            timer : 0,
            interval : 1000,
            value : 0,

            // значения, которые можно изменить в клиентском коде:
            elemId : 'counter', // значение по умолчанию
            destination : 'http://yandex.ru', // значение по умолчанию
        },

        public = {

            init : function(options){
                if ( options.hasOwnProperty('destination') ) {
                   private.destination = options.destination;
                }
                if ( options.hasOwnProperty('elemId') ) {
                    private.elemId = options.elemId;
                }

                private.elem = document.getElementById(private.elemId);

                // начальное значение
                if ( options.hasOwnProperty('start') ) {
                    private.start = options.start;
                    private.elem.innerHTML = private.start;
                } else {
                    private.start = Number(private.elem.innerHTML)
                }

                // текущее значение равно начальному
                private.value = private.start;

                return public;
            },

            go : function() {
                private.timer = window.setInterval(function(){
                    if ( private.value ) {
                        public.countDown();
                    } else {
                        public.action();
                    }
                }, private.interval)
                return public;
            },

            countDown : function(){
                private.elem.innerHTML = --private.value;
            },

            action : function(){
                document.location.href = private.destination;
            }
        };

    return public;

})();

// Обработчик написан, его можно вынести в отдельный файл
// а ниже показано как его вызывать, использовать

Counter.init({
    elemId       : 'counter',
    destination  : 'http://google.com'
}).go();
10
  • 1
    зачем такие сложности ( private, public... )? 1. Это не только будет добавлять тормозов, но и память ест... 2. По стандарту такие слова являются зарезервированными 3. Универсальность кода -> 0
    – timka_s
    27 ноя 2011 в 11:19
  • @timka_s - солидарен на 100%... @Innuendo108 - вы о kiss слышали? Причем по поводу памяти добавлю - ест на пустом месте...
    – user3545
    27 ноя 2011 в 11:23
  • Тормозов не добавляет, запустите в профиле в firebug'e. Это называется JavaScript Module Pattern, только в оригинальной версии все методы не разделены на публичные и приватные. а разделение делает его удобнее. я привык практически любую задачу писать в виде модуля, это добавляет расширяемости. (хотя конечно вряд ли простой счетчик в что-нибудь разрастётся, но всё же) Зарезервированные слова - да, ну это не мешает мне сделать такие переменные. @AlexWindHope, слышал. Если все свои задачи писать в виде модулей, то их можно повторно использовать где угодно. Про DRY слышали? =) 27 ноя 2011 в 11:54
  • @timka_s, @AlexWindHope, хорошо, допустим счетчик и простая задача, не нужно вам её расширять. Но к примеру, позже вам понадобится вставить подобный счетчик в другую страницу, с другими элементами и с другой логикой действия. А потом ещё раз и в другую. Вам придётся изменять код, что часто - практически равноценно переписыванию кода. В моём же случае, один комментарий к модулю, который указывает какие методы он поддерживает, и модуль в отдельном файле. Чтобы встроить его в новую страницу - чуть изменить клиентский код (вызов). Всю логику счетчика можно вынести в вызов, и будет всё гибко зато. 27 ноя 2011 в 11:59
  • Мне прийдется лишь изменить ID элемента. Даже если бы пришлось переписать - 10 строчек не панацея, я ничего не имею против модулей, но однозначно что то что написали вы крайне излишне и не несет практического смысла по определению. Ничего гибкого не заметил, по-моему очень даже наоборот. То что вы привыкли не означает что это хорошо, по поводу зарезервированных слов - не столь принципиально но по хорошему хотя-бы в кавычки взять было бы неплохо. Как по мне то никакой гибкости нет и пользы от такого усложнения я уж точно не вижу, вред да, а вот пользы - не заметил...
    – user3545
    27 ноя 2011 в 12:04

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.