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