0

Здравствуйте, уважаемые форумчане и программисты (веб)! Беспокоит такой вопрос, а сам никак немогу дойти.

Вообщем нужно сделать страницу ожидания, самую простую с выводом текста "Подождите идет перенаправление...". Если бы все так просто. Я хочу чтобы эти точки "..." при их отсуствии добавлялись, а при достижении количества 3 ("...") начинались заново добавляться. Пробывал своими мозгами решить, так ведь не получается, не доходит=) Использовал setTimeout(), и if, т.е. Сделал 3 функции, а перед ними паставил d=0; Вообщем код такой:

<scrpt>

d=0;          //это глобальная переменная чтобы могла влезть в функции

function funct1(){
d++;
document.write("Wait");
setTimeout('funct2()',1000);
}

function funct2(){
d++;
document.write("Wait.");
setTimeout('funct3',1000);
}

function funct3(){
d++;
document.write("Wait..");
setTimeout('funct4',1000);
}

function funct4(){
d++;
document.write("Wait...");

if(d==4){
d=0;
setTimeout('funct1()',500);
}

funct1();
</scrpt>

Заранее СПАСИБО Ребята! Знаю что поможете! Хорошего дня и настроения! =)

4 ответа 4

3

или так:

(function () {
    var m = document.getElementById("message"),
        s = m.innerHTML,
        i = 0;
    setInterval(function () {
        m.innerHTML = s + Array(i++ % 5).join('.');
    }, 500);
})();
2
  • Классно с Array().join('.')! И удачно innerHtml.
    – Sergiks
    28 фев 2014 в 6:04
  • Спасибо, но я еще не полностью разбираюсь в ЙС, поэтому мне надо простой пример=)
    – stas_php
    1 мар 2014 в 7:55
0

document.write() не надо использовать, используйте innerText для какого-нить элемента на странице сделайте одну функцию, которая будет проверять переменную (например dots) на длину, если >3 то превращать ее значение в '.', иначе dots+='.'; в конце функции делайте dotsTimeout=setTimeout(funct,1000); когда надо перестать, просто вызовите clearTimeout(dotsTimeout)

(function() {
    var dots='.',dotsTimeout,
        out=getElementById('message');
    function showDots()
    {                 
      //тут тело функции, сделанное как я описал выше.
      out.textContent='Wait'+dots;
      dotsTimeout=setTimeout(showDots,1000);
    };

})();
5
  • 1
    а ещё это можно сделать на css :)
    – zb'
    26 фев 2014 в 22:04
  • Спасибо! Не могу лайкнуть репутация непозволяет)) Спасибо!
    – stas_php
    27 фев 2014 в 14:20
  • @eicto хромиум 32 не умеет в такие свойства
    – etki
    27 фев 2014 в 19:57
  • innerText не работает в FF.
    – Sergiks
    27 фев 2014 в 20:48
  • @Fike наверное у него всё ещё -webkit-
    – zb'
    27 фев 2014 в 23:31
0

Я бы так сделал. Запоминал исходное сообщение. И к нему каждый раз приписывал подстроку от "..." длины 0, 1, 2 или 3 символа. А эти числа - остаток от деления на 4 инкрементируемого счетчика i.

IE любит innerText, а FF и другие предпочитают W3C-стандартный textContent (не поддерживаемый IE<9).

var tri = {
    speed: 800  // длительность одного "кадра" в 1/1000с
    ,d:document.getElementById( 'message')
    ,t:null
    ,i:0
    ,init: function(){
        this.t = this.d.innerText || this.d.textContent;
        setInterval( this.go, this.speed);
    }
    ,go:function(){
        var upd = tri.t + "...".substr( 0, ++tri.i % 4);
        tri.d.innerText ? tri.d.innerText( upd) : tri.d.textContent = upd;
    }
};
tri.init();
2
  • this.t = this.d.innerText || this.d.textContent; Можно просто innerHTML - он универсальный. (только если кроме текста там ничего нет)
    – FlamesoFF
    28 фев 2014 в 7:09
  • Я уже это заметил в ответе @Yura Ivanov.
    – Sergiks
    28 фев 2014 в 7:44
0

Можно чуть проще: http://jsfiddle.net/R6JFW/1/

3
  • Это какой-то костыль вы предложили, а не решение. Изменил в div'е фразу с "wait" на "Ямщик, не гони", а она опять сбрасывается на "wait". Что, в двух местах надо идентичный текст менять?
    – Sergiks
    28 фев 2014 в 8:56
  • @sergiks спасибо, кэп.
    – FlamesoFF
    28 фев 2014 в 9:30
  • СПАСИБО!!! НУ ТУТ БОЛЕЕ простое решение, хотя с библиотеками пока что не познакомился, но вижу работает! Спасибо!
    – stas_php
    1 мар 2014 в 7:59

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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