Отправляет email-рассылки с помощью сервиса Sendsay

Программирование на JavaScript

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Заметки Дизайнера" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Март 2005   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
ImHoster.net

Статистика

0 подписчиков
-4 за неделю
←   Все выпуски   →

Программирование на JavaScript Выпуск № 34


Информационный Канал Subscribe.Ru

Программирование на JavaScript
Выпуск № 34
Cайт : SoftMaker.com.ru
Архив рассылки : SoftMaker.com.ru
Количество подписчиков : 13265
В этом выпуске
От автора

Здравствуйте уважаемые подписчики !

Как всегда, рад приветствовть вас на страницах этой рассылки.
Напоминаю, что, как обычно, вы можете отправить свои пожелания (замечания, предложения, сообщения об ошибках) по поводу рассылки и сайта по этому адресу. Если вы хотите создать и вести какой либо раздел в этой рассылке - также пишите мне.

И, как всегда, вы можете задать свои вопросы по программированию на сайте в форуме. Или обсудить их в дискуссионном листе Скрипты для сайта.

С уважением, Вахтуров Виктор.
Java Script solutions

Сегодня представляю вам 2 скрипта, которые могут служить для одной и той же цели - для создания кратковременной "заставки" на странице web-сайта, с которой осуществляется редирект (перенаправление) на другую страницу. За примерами идти далеко не надо. Наверно, все не раз пользовались форумами, либо добавляли записи в гостевые книги. Нередко после добавления записи (или "поста" в форуме), в браузер загружается страница с сообщением об успешно выполненном действии и через некоторое время с нее осуществляется редирект куда то еще (в ту же тему форума/обратно в гостевую книгу).

Приведенные ниже примеры помогут несколько "оживить" такую страницу. Они также дают пользователю информацию о том, сколько осталось времени до перехода, что в общем, полезно (пользователь не будет долго ждать, если произошли какие то ошибки и страница "не хочет" перезагружаться - он перезагрузит ее вручную).

Несколько модифицировав скрипты, их можно использовать и для других целей.

Индикатор прогресса и редирект. Вариант 1.

Данный скрипт эмулирует "классический" элемент управления Windows "Progress Control". Значение индикатора равномерно увеличивается (используется таймер) от минимального до максимального. После достижения максимального значения, осуществляется редирект на указанную страницу. Данный скрипт смотрится достаточно эффектно.

Ниже я привел код скрипта, внедренный в html-документ (достаточно скопировать все содержимое следующего блока в новый файл, чтобы испытать скрипт на работоспособность).

Код: 

<html>
<head>

<style>

html, body
{
   position           :   absolute;
   margin             :   0px;
   padding            :   0px;
   width              :   100%;
   height             :   100%;
   overflow           :   hidden;
   color              :   black;
   background-color   :   #3A6EA5;
   font-family        :   "Courier New", Courier;
}

table.c
{
   position           :   relative;
   width              :   100%;
   height             :   100%;
   border             :   none;
   font-size          :   10pt;
}

div.container
{
   width              :   320px;
   padding            :   32px;

   border-top         :   1px solid buttonhighlight;
   border-left        :   1px solid buttonhighlight;
   border-right       :   1px solid buttonshadow;
   border-bottom      :   1px solid buttonshadow;

   background-color   :   buttonface;
}

table.progress_ctrl
{
   height             :   24px;

   border-top         :   1px solid buttonshadow;
   border-left        :   1px solid buttonshadow;
   border-right       :   1px solid buttonhighlight;
   border-bottom      :   1px solid buttonhighlight;

   background-color   :   window;
}

table.progress_ctrl td.ctrl_indicator
{
   background-color   :   highlight;
}

</style>

<script language="JavaScript">

<!--

// Code by Victor V. Vakchturov (http://softmaker.com.ru)

var nTimeout = 5000;
var nProgressLen = 250;

var d = new Date();
var objElementC = null;
var objElementS = null;
var nTimerID = null;

function ChangeProgress()
{
  var dd = new Date();
  var millisec = ((((dd.getMinutes() - d.getMinutes()) * 3600) +
                    (dd.getSeconds() - d.getSeconds())) * 1000) +
                    (dd.getMilliseconds() - d.getMilliseconds());

  if(millisec > nTimeout)
  {
     millisec = nTimeout;
     window.clearInterval(nTimerID);
     top.location = "http://softmaker.com.ru";
  }
 
  if(objElementC != null)
     objElementC.width = Math.round(millisec /
                                    (nTimeout / nProgressLen));

  if(objElementS != null)
     objElementS.innerText =
       Math.round((nTimeout - millisec) / 1000 + 0.4);
}

function StartProgress()
{
  objElementC = document.getElementById('ctrl_indicator');
  objElementS = document.getElementById('progress_time');

  nTimerID = window.setInterval("ChangeProgress()", 20);
}

// -->
</script>

</head>

<body onselectstart="return false">

<table class="c">
<tr>
  <td align="center">
     <div class="container">
        Переход на другую страницу<br><br>
        через <span id="progress_time">5</span> секунды<br><br>

        <table width="250" cellspacing="0" class="progress_ctrl">
           <tr>
              <td class="ctrl_indicator" width="1"
                  id="ctrl_indicator"></td>
              <td width="*"></td>
           </tr>
        </table>

        <br>Нажмите <a href="http://softmaker.com.ru">сюда</a>,
            если браузер<br>не переходит автоматически.<br>
     </div>
  </td>
</tr>
</table>

<script>
<!--
   StartProgress();
// -->
</script>

</body>
</html>

Как видно, достаточно много в коде веб-странгицы занимает информация о стилях. Сам JavaScript код достаточно прост и понятен. Он состоит всего из 2-х функций:

Функция StartProgress.

Выполняет инициализацию переменных objElementC (объект элемента, представляющего "индикатор" прогресса - это ячейка таблицы, значение свойства class которой равно "progress_ctrl") и objElementS (это объект span с id="progress_time" - в него выводится время в секундах, оставшееся до перехода). Также здесь выполняется инициализация таймера, обработчиком событий которого является функция ChangeProgress.


Рассмотрим вторую функцию скрипта.

Функция ChangeProgress.

Здесь производится основная работа по "смещению" индикатора прогресса. А именно - увеличение свойства width первой ячейки таблицы, эмулирующей элемент управления (id объекта ячейки равен ctrl_indicator). Здесь также проверяется время (количество миллисекунд), прошедшее с момента запуска скрипта. И, если оно больше значения, задаваемого переменной nTimeout ,то происходит редирект на указанную в скрипте страницу (сейчас там уrазан адрес сайта рассылки).

Конфигурирование скрипта сводится к установки значений переменных: nTimeout (количество миллисекунд, через которое произойдет редирект) и nProgressLen ("длина" таблицы, эмулирующей прогресс (в пикселах) - она задается также атрибутом width таблицы (таблица с атрибутом class=progress_ctrl)).

Советую попробовать данный скрипт в работе - выглядит достаточно эффектно (я написал его для страницы редиректа с сайта на бесплатном хостинге на новый сайт, который сейчас и является сайтом рассылки).

--- * ---

Индикатор прогресса и редирект. Вариант 2.

Этот скрипт создает изображение, не очень похожее на стандартный "прогресс", однако выглядит это, пожалуй, даже более интересно чем в предыдущем случае. Фактически это пример нехитрой анимации, создающий область с градиентной заливкой, разбитую на блоки, с циклически изменяющимися параметрами градиента. Этот скрипт я писал достаточно давно и использовал его в качестве "заставки" во время ожидания пользователя при подготовке статистических данных. В общем, это была такая же страница-редиректор, как и в предыдущем примере.

Теперь, как обычно, код. Скрипт уже внедрен в HTML документ.

Код: 

<html>
<head>

<style>

body
{
   position         :   absolute;
   margin           :   0px;
   padding          :   0px;
   width            :   100%;
   height           :   100%;
   overflow         :   hidden;
   color            :   black;
   background-color :   white;
   font-family      :   "Courier New", Courier;
}

table.c
{
   position         :   relative;
   width            :   100%;
   height           :   100%;
   border           :   none;
   font-size        :   10pt;
}

#progr_tbl
{
   height           :   12px;
   border           :   none;
}

#progr_tbl td
{
   width            :   20px;
}

</style>

<script language="JavaScript">

<!--

// code by Vicktor V. Vackhturov

function ChangeProgress()
{
   var lastcolor = document.getElementById('clr_td_8').bgColor;

   for(i = 8; i > 0; i--)
      document.getElementById('clr_td_' +
     i.toString(10)).bgColor =
     document.getElementById('clr_td_' +
        (i - 1).toString(10)).bgColor;

   document.getElementById('clr_td_0').bgColor = lastcolor;
}

function GenerateAndStartProgress()
{
   var d = document;
   
   d.write('<table id="progr_tbl" cellpadding="0" ' +
           'cellspacing="2"><tr>');
   
   for(i = 0; i < 9; i++)
   {
      j = (i > 4) ? 9 - i : i;

      d.write('<td bgcolor="#' + 
               (159 - j * (42 - j * 4)).toString(16) +
               (197 - j * (37 - j * 2)).toString(16) +
               (237 - j * 25).toString(16) +
            '" id="clr_td_' + i.toString(10) + '"></td>');
   }

   d.write('</tr></table>');

   window.setInterval("ChangeProgress()", 40);
}

// -->
</script>

</head>

<body onselectstart="return false">

   <table class="c">
   <tr>
      <td>
      <center>
         Переход на другую страницу<br><br>
            <script>
               GenerateAndStartProgress();
            </script>
         <br>Нажмите <a href="http://softmaker.com.ru">сюда</a>,
             если браузер<br>не переходит автоматически.<br>
      </center>
      </td>
   </tr>
   </table>

</body>
</html>

Из данного скрипта я убрал механизм редиректа (он абсолютно такой же как и в прошлом скрипте). Это сократило код. Думаю, при желании всякий сможет легко добавить его обратно. Данный пример также достаточно прост. Он таже состоит из 2-х функций:

Функция GenerateAndStartProgress.

Функция генерирует в документе (при помощи метода write объекта document) таблицу. В ней генерируется 9 ячеек с разным цветом фона (цветовые составляющие изменяется циклично, что позволяет создать эффект градиентной закраски):

Код: 

      d.write('<td bgcolor="#' + 
               (159 - j * (42 - j * 4)).toString(16) +
               (197 - j * (37 - j * 2)).toString(16) +
               (237 - j * 25).toString(16) +
            '" id="clr_td_' + i.toString(10) + '"></td>');

Далее инициализируется таймер, обработчиком событий которого является функция ChangeProgress.

Принцип работы функции ChangeProgress также прост. Но все таки поясню.

Функция ChangeProgress.

В функции производится "запоминание" значения цвета фона последней ячейки таблицы в переменной lastcolor. Затем в цикле производится переприсваивание значений цвета фона ячеек со "сдвигом" на одну ячейку. То есть цвет фона ячейки n+1 становится равен цвету фона ячейки n. Затем сохраненное в переменной lastcolor значение присваивается значению цвета фона первой ячейки.

Таким образом создается эффект движения градиента.

Данный скрипт также производит красивый эффект. Можете убедиться в этом сами.

А на сегодня - все.

Автор выпуска: Вахтуров Виктор.
Книги и справочники по JavaScript
JavaScript в Web-дизайне
JavaScript в Web-дизайне

Автор: Владимир Дронов

Книга посвящена языку сценариев JavaScript и его использованию в Web-дизайне. Дан вводный курс по языку HTML. Рассматривается работа JavaScript-сценариев в составе Web-страниц: общие принципы написания сценариев; управление элементами страниц на основеобъектной модели документа (DOM); организация взаимодействия с пользователем на основе событий; ввод-вывод при помощи Web-форм, диалоговых HTML-окон, Буфера обмена и технологии drag-n-drop; работа с базами данных; применение мультимедийных эффектов. Изложение сопровождается большим количеством примеров HTML-страниц с использованием JavaScript-сценариев. В приложениях к книге содержатся справочные сведения о HTML, CSS и DOM.

Страница книги на Озоне
JavaScript. Справочник (+ CD-ROM)
JavaScript. Справочник (+ CD-ROM)

Автор: Аллен Вайк

Книга JavaScript. Справочник представляет собой исключительно полный справочник по объектам, методам, атрибутам, высокоуровневым функциям языка написания сценариев JavaScript версий от 1.1 и старше, причем как для клиентской, так и для серверной сторон. Приводятся все особенности различных реализаций JavaScript (в том числе и небезызвестная реализация JScript от компании Microsoft). Удобство использования, быстрота нахождения требуемой информации, изобилие исчерпывающих примеров, адекватность, точностьи полнота - вот лишь немногие достоинства этого поистине бесценного справочного пособия.

Коды всех примеров, рассмотренных в книге, проверены на практике как авторами оригинального издания, так и командой по подготовке русскоязычной редакции книги.

Книга будет полезной (впрочем, даже и незаменимой) как для начинающих разработчиков Web-приложений, так и для профессионалов, опыт работы которых восходит к тем временам, когда Web был еще неизвестен, а Internet был доступен исключительнодля посвященных.

Страница книги на Озоне
Всего доброго. До встречи в следующем номере.
Любой из материалов, опубликованных в этой рассылке, не может быть воспроизведен в какой бы то ни было форме и какими бы то ни было средствами без письменного разрешения владельцев авторских прав.
http://subscribe.ru/
http://subscribe.ru/feedback/		 Подписан адрес:
Код этой рассылки: comp.soft.prog.javascript		 Отписаться
В избранное