Программная часть
Вот мы и добрались до программирования. И, сначала, разберемся с некоторыми моментами.
Начнем с генерации неповторяющихся баннеров. Для выбора произвольного баннера, нам необходимо сгенерировать случайное число в диапазоне от нуля до числа баннеров минус один. Это несложно и делается следующим фрагментом кода:
n = Math.floor(Math.random()*(banners.length/3));
Но, как я уже упоминал раньше, мы договорились, что одновременно на страничке будут показываться четыре баннера. И, следовательно, после каждой генерации случайного числа нам необходимо проверить, что данный баннер не совпадает с 3-мя другими. К тому же нам нужно где-то хранить уже сгенерированные числа. Для решения этих задач, мы организуем еще один массив - случайных чисел и при каждой генерации нового числа будем сопоставлять его с найденными ранее. Полный код, который решает эти проблемы, приведен ниже:
var i, j; var flag; // Флажок, используемый для проверки совпадения var banners_show = 4; // Число показываемых на страничке баннеров
var rand = new Array(banners_show-1);
for (i=0; i<banners_show; i++) { do { flag=0; n = Math.floor(Math.random()*(banners.length/3)); for (j=0; j<i; j++) { if (n == rand[j]) { flag=1; } } } while (flag); rand[i] = n; }
Ввиду того, что баннеры будут генерироваться на лету, в процессе загрузки страницы, вышеприведенный фрагмент кода необходимо разместить вне функции. В момент, когда броузер перейдет к отрисовке странички, мы уже будем иметь готовый массив случайных чисел.
Для отрисовки баннеров, мы напишем простую функцию, и будем передавать ей в качестве параметра порядковый номер баннера на страничке. Используя этот номер, мы читаем из массива rand[] случайное число для конкретного баннера и уже используя его, находим все необходимые для отрисовки данные:
function Show_Banner(number) {
n=rand[number-1];
document.write('<a href="' + banners[n*3+2] + '"><img src="banners/' + banners[n*3] + '"' + 'border=0 width=' + banner_width + ' height=' + banner_height + ' alt="' + banners[n*3+1] + '"></a>');
}
Вот, практически и все, наша локальная баннерная система готова. Осталось только четыре раза вызвать функцию Show_Banner() из подходящей части странички. Нужно, только не забыть, что код JavaScript отделяется от html тегами <script></script>:
<script> <!-- Show_Banner(1); //--> </script>
.......
<script> <!-- Show_Banner(4); //--> </script>
Для проверки работоспособности локальной баннерной системы, несколько раз нажмите в броузере кнопку Reload и убедитесь, что каждый раз генерируются разные и не совпадающие друг с другом баннеры.
Архив с примером скрипта, рассмотренного в данной статье, можно взять отсюда.
Назад | Содержание | Вперед
