Бегущий текст в строке состояния браузера
Решим одну очень распространенную задачу - отображение бегущего текста в строке состояния браузера (рис. 2.11).
Рис. 2.11. Бегущий текст в строке состояния браузера
Строка состояния обычно используется браузерами для отображения различной информации, например, информации о выполнении текущей операции. Для того чтобы записать что-нибудь в строку состояния, необходимо изменить содержимое свойства status объекта window окна браузера.
Эту задачу можно решить, например, так:
window.status = “Новая строка”;
Для создания эффекта бегущей строки операцию обновления свойства status необходимо выполнять периодически, отображая текст с изменяющимся сдвигом. Однако не стоит делать это в цикле, так как в результате нормальная работа браузера будет нарушена.
В нашем сценарии (листинг 2.5) мы применим способ выполнения периодических процедур, основанный на использовании метода setTimeout, определенного для объекта window. Напомним, что этот метод позволяет организовать отложенное во времени выполнение команды, заданной первым параметром. Время, через которое команда будет запущена, указывается методу setTimeout вторым параметром.
Листинг 2.5. Файл chapter2/StatusScroll/StatusScroll.html
<HTML>
<HEAD>
<TITLE>Авторский компакт-диск</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
var szMsg = "You are welcome to our Web site http://www.glasnet.ru/~frolov";
var nSpace = 100;
var nIteration = 0;
function sscroll()
{
var cmd = "sscroll()";
var szOut = "";
var szText = "";
for (i=0 ; i < nSpace ; i++)
{
szText += " ";
}
szText += szMsg;
szOut =
szText.substring(nIteration, nSpace + nIteration);
window.status = szOut;
nIteration++;
if(nIteration > nSpace + szMsg.length)
{
nIteration = 0;
}
timer = window.setTimeout(cmd, 50);
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=white>
<H1>Новый выпуск авторского CD</H1>
<SCRIPT LANGUAGE="JavaScript">
<!--
sscroll();
// -->
</SCRIPT>
<P>Первый выпуск нашего компакт-диска
уже появился в продаже. Информацию об этом, а также
следующем выпуске вы найдете на нашем сервере Web,
адрес которого отображается в окне состояния браузера
</BODY>
</HTML>
В области заголовка документа мы определили глобальные переменные szMsg, nSpace и nIteration, а также функцию sscroll.
Переменная szMsg инициализируется текстовым сообщением, которое будет непрерывно перемещаться в строке состояния браузера. Значение, записанное в переменную nSpace, определяет количество пробелов, которое будет добавлено к строке сообщения слева перед началом операции сдвига. И, наконец, переменная nIteration служит счетчиком сдвигов для функции sscroll.
Функция sscroll вызывается первый раз в теле документа:
<BODY BGCOLOR=white>
<H1>Новый выпуск авторского CD</H1>
<SCRIPT LANGUAGE="JavaScript">
<!--
sscroll();
// -->
</SCRIPT>
. . .
</BODY>
В дальнейшем функция sscroll организует при помощи метода setTimeout свой собственный вызов, отложенный во времени на 50 миллисекунд, и завершает работу. Однако через указанное время наша функция будет вызвана вновь, и это будет продолжаться до тех пор, пока документ HTML, содержащий сценарий, остается загруженным в окно браузера.
Упрощенно структура функции sscroll показана ниже:
function sscroll()
{
var cmd = "sscroll()";
. . .
// Отображение сообщения в строке состояния браузера
. . .
// Сдвиг сообщения влево на одну позицию
. . .
timer = window.setTimeout(cmd, 50);
}
После отображения сообщения в строке состояния и сдвига этого сообщения влево на одну позицию функция sscroll вызывает метод setTimeout, передавая ему через первый параметр переменную с командой, подлежащей выполнению, а через второй - время задержки, по прошествии которого данную команду нужно будет выполнить.
В качестве выполняемой команды мы указываем методу setTimeout вызов функции sscroll. Таким образом в нашем сценарии эта функция вызывается периодически.
В функции sscroll мы определили три локальные переменные. Переменная cmd хранит команду вызова функции sscroll. В переменной szOut мы подготавливаем текст, отображаемый в строке состояния браузера при каждом вызове функции sscroll.
Текстовая переменная szText используется как рабочая. В ней формируется сообщение для вывода. Вначале в переменную szText записывается nSpace пробелов, а затем добавляется строка szMsg:
for (i=0 ; i < nSpace ; i++)
{
szText += " ";
}
szText += szMsg;
Для того чтобы при каждом вызове функции sscroll наше сообщение отображалось со сдвигом на одну позицию, мы извлекаем из переменной szText подстроку. Извлечение подстроки выполняется с помощью метода substring, определенного во встроенном классе текстовых строк String. Полученная подстрока записывается в свойство status объекта window и таким образом отображается в строке состояния:
szOut = szText.substring(nIteration, nSpace + nIteration);
window.status = szOut;
Первый параметр метода substring определяет начальную позицию подстроки внутри строки, а второй - конечную.
После отображения сообщения функция sscroll увеличивает значение глобального счетчика nIteration на единицу:
nIteration++;
Когда в результате сдвига сообщение полностью уходит из строки состояния, счетчик nIteration снова устанавливается в нулевое значение:
if(nIteration > nSpace + szMsg.length)
{
nIteration = 0;
}
Обратите внимание, что общая длина сдвигаемой строки здесь вычисляется как сумма значения nSpace (количество начальных пробелов) и длины сообщения szMsg. Последняя определяется с помощью метода length, определенного во встроенном классе String.
