БлогNot. Javascript: смена фона страницы в реальном времени

Javascript: смена фона страницы в реальном времени

В этой старой заметке всё написано хорошо, только не предполагается возможность смены фона чаще, чем раз в сутки по календарю. Всё можно сделать намного проще, JQuery для этой небольшой задачи не нужен.

1. Назначить идентификатор тегу <body>, например:

<body id="back1">

2. Включить в тело страницы скрипт, управляющий сменой фона в зависимости от времени, например, такой:

<script type="text/javascript">
function foo() {
 var banner= Array('1.jpg', '2.jpg');
 var date = new Date();
 var sec=date.getSeconds();
 document.getElementById('back1').style.backgroundImage = 'url("' + banner[sec%2] + '")';
 setTimeout ("foo()",1000);
}
foo();
</script>

Здесь графические файлы, перечисленные в массиве banner, "лежат" в той же папке, что и файл со скриптом, а фон меняется каждую секунду - первый файл выводится, когда значение секунд чётно (sec%2 делается равно 0), второй - когда оно нечётно (соответственно, sec%2==1).

Аналогично можно получать, например, минуты из объекта date и вызывать функцию с таймаутом 60000 вместо 1000.

Аналогично можно менять фон по некоторому внешнему событию, такому, как нажатие кнопки. Непонятно только, зачем это нужно :)

Можно сделать ещё вот так, без необходимости назначать id на тег <body>:

<script type="text/javascript">
 var imgBg=Array('1.jpg','2.jpg'); //список файлов с фонами
 showImg = function() {
  var index=Math.floor(Math.random()*imgBg.length); //номер случайного фона
  document.getElementsByTagName('body')[0].style.backgroundImage='url('+imgBg[index]+')';
  setTimeout(showImg,1000); //повтор через секунду
 }
 window.onload=showImg; //назначить обработчик события
</script>

03.07.2013, 00:40 [17917 просмотров]


теги: javascript графика время

показать комментарии (1)