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 просмотров]