Бегущая строка JavaScript. Часть 2.

В прошлый раз мы сделали красивую бегущую строку, но она умеет отображать толко одно сообщение. [бегущее сообщение JavaScript]. В этот раз мы сделаем так, что в случайном порядке будут выводиться несколько разных фраз. В итоге мы получим почти тоже самое что и на [главной странице] сайта KroBel.narod.ru. Напоминаю, у нас есть следующий код:

<SPAN ID=”runstr” STYLE="text-align:left;"></SPAN>
<NOSCRIPT>
<MARQUEE STYLE="width:150px">Добро пожаловать на KroBel.narod.ru</MARQUEE>
</NOSCRIPT>

<script language="javascript" type="text/javascript">
  <!--
  pos = 0;//Обнулили позицию символа, что бы начать с первого.

  var newtext, newint, ident; //строка символов, время задержки, переменная задержки.
  var msg = "Добро пожаловать на KroBel.narod.ru"; // Записали сообщение в переменную msg
  var layer = document.getElementById("runstr"); // Опеределили слой, где бегущая строка

  function ScrollMessage() {
    newtext = msg.substring(0, pos); //Кусок текста от 0 до pos записали в переменную

    layer.innerHTML=newtext; //Вводим текст в слой.
    pos++; //Добавляем позицию.

    if (pos > msg.length) { //Если позиция pos больше длины сообщения
      pos = 0; //Позицию обнуляем
      ident = setTimeout ("ScrollMessage()", 3000); //Перед тем как начать старое висит 3 секнды.
    }
    else
    {
      newint = Math.round(120) //Случайный промежуток времени 1000 = 1 сек.
      ident = setTimeout ("ScrollMessage()", newint + 120); // Задержка перед появлением следующего символа
    }

  }//Конец функции

  ScrollMessage(); // Первый вызов функции

  //-->
</script>
Листинг 1

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

1. Определить массив с сообщениями:

arrWords = new Array();

arrWords[0]="Кто любит орешки? Я люблю...";
arrWords[1]="Ля-ля-ля... Признаю только живую музыку..."
arrWords[2]="Хочешь увидеть что я ещё скажу?"
arrWords[3]="Вакансии: Орехокол. Стаж не более 100 раз..."
arrWords[4]="Как... Ты ещё не видел Ледниковый Период?"
arrWords[5]="Работаем днём и ночью, без обеда и выходных..."
//Определили массив с сообщениями.

arrWords_size = arrWords.length;//Размер массива
Листинг 2

2. Первое сообщение случайно выбрать из массива:

var iarr = Math.floor(Math.random()*arrWords_size);//Для выбора случайного сообщения
var msg = arrWords[iarr]; //Записали сообщение из массива в переменную msg
Листинг 3

3. Когда полностю вывели сообщение, выбираем новую строчку для вывода. На самом деле точно так же как и выбирали первую:

iarr = Math.floor(Math.random()*arrWords_size);//Для выбора случайного сообщения
msg = arrWords[iarr]; //Записали сообщение из массива в переменную msg
Листинг 3

В итоге мы получаем вот такой код:

<SPAN ID=”runstr” STYLE="text-align:left;"></SPAN>
<NOSCRIPT>
<MARQUEE STYLE="width:150px">Добро пожаловать на KroBel.narod.ru</MARQUEE>
</NOSCRIPT>

<script language="javascript" type="text/javascript">
  <!--
  arrWords = new Array();

  arrWords[0]="Кто любит орешки? Я люблю...";
  arrWords[1]="Ля-ля-ля... Признаю только живую музыку..."
  arrWords[2]="Хочешь увидеть что я ещё скажу?"
  arrWords[3]="Вакансии: Орехокол. Стаж не более 100 раз..."
  arrWords[4]="Как... Ты ещё не видел Ледниковый Период?"
  arrWords[5]="Работаем днём и ночью, без обеда и выходных..."
  //Определили массив с сообщениями.

  arrWords_size = arrWords.length;//Размер массива
  pos = 0;//Обнулили позицию символа, что бы начать с первого.

  var newtext, newint, ident; //строка символов, время задержки, переменная задержки.
  var iarr = Math.floor(Math.random()*arrWords_size);//Для выбора случайного сообщения
  var msg = arrWords[iarr]; //Записали сообщение из массива в переменную msg
  var layer = document.getElementById("runstr"); // Опеределили слой, где бегущая строка

  function ScrollMessage() {
    newtext = msg.substring(0, pos); //Кусок текста от 0 до pos записали в переменную

    layer.innerHTML=newtext; //Вводим текст в слой.
    pos++; //Добавляем позицию.

    if (pos > msg.length) { //Если позиция pos больше длины сообщения
      pos = 0; //Позицию обнуляем
      iarr = Math.floor(Math.random()*arrWords_size);//Для выбора случайного сообщения
      msg = arrWords[iarr]; //Записали новое сообщение из массива
      ident = setTimeout ("ScrollMessage()", 3000); //Перед тем как начать старое висит 3 секнды.
    }
    else
    {
      newint = Math.random()*120 //Случайный промежуток времени 1000 = 1 сек.
      ident = setTimeout ("ScrollMessage()", newint + 120); // Задержка перед появлением следующего символа
    }

  }//Конец функции

  ScrollMessage(); // Первый вызов функции

  //-->
</script>
Листинг 4

Вставив код листига в страницу, мы увидим:

Внимание! Если не понятны операторы - вернись назад. [бегущее сообщение JavaScript]. Пожалуй единственный новый оператор:

Оператор Назначение
Math.floor(знач.) Округляет знач. до ближайшего меньшего целого.

Особенности:

  • Мы использовали массив из 6 элементов, но их может быть произвольное количество от 1 до разумных пределов. Помни, что чем больше элементов массива (сообщений, фраз) тем реже каждая из них будет показываться. (Хотя и это не факт, т.к. числа выбираются случайные и из 10 раз может выпасть 8 раз "2", а потом "1", "5").
  • Забавные ситуации получаются, когда мы хотим использовать в сообщении кавычки и другие спец символы. Например, кавычки обозначаются так: &quot; для JavaScript это тоже текст, так что сначала выведется &, потом &q и т.д. а когда выведется &qout; браузер заменит эту комбинацию на " - привычные кавычки. Тоже самое касается всего HTML вообще! Т.е. ссылки здесь прописать не удастся, но и эту преграду мы попытаемся обойти в следующий раз! До встреч...
Используются технологии uCoz