Как периодически менять фоновое изображение для всего сайта? - PullRequest
Новая
       30

Как периодически менять фоновое изображение для всего сайта?

0 голосов
/ 15 июня 2009

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

В настоящее время у меня есть фоновые изображения, которые меняются каждые 30 минут с помощью этого javascript: (отсюда: http://www.blogfodder.co.uk/post/2008/01/JavaScript-CSS-Random-Background-Image.aspx)

Проблема, однако, заключается в том, что каждая ссылка рандомизирует фон на каждой новой странице. 

function ChangeCSSBgImg() {
    if (!document.getElementById) return false;

    var MyElement = "bgimg" 
    var ImgPath = "../i/" 

    if (!document.getElementById(MyElement)) return false;

    var random_images = new Array ();
    random_images[0] = "bg1.jpg"; // these are the background images
    random_images[1] = "bg2.jpg"; 
    random_images[2] = "bg3.jpg"; 
    random_images[3] = "bg4.jpg"; 
    random_images[4] = "bg5.jpg"; 

    var $header = document.getElementById(MyElement);
    var $backgroundurl = $header.style.backgroundImage;
    var ImgURL = "url(" + ImgPath + random_images[rand(random_images.length)] + ")";

    if ($backgroundurl != ImgURL) {
        $header.style.backgroundImage = ImgURL; 
    }

    movement = setTimeout("ChangeCSSBgImg()",108000000); 
}


/* random number generator */
function rand(n) {
    return ( Math.floor ( Math.random ( ) * n ) );
}

/* Custom onload function */
function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            oldonload();
            func();
        }
    }
}
/* trigger onload */
addLoadEvent(ChangeCSSBgImg);

Ответы [ 7 ]

2 голосов
/ 15 июня 2009

Можете ли вы хешировать текущее время, чтобы выбрать изображение? например упрощенно было бы иметь шесть изображений, а затем выбрать изображение на основе второй-последней цифры в текущем времени, например

  • 10: 08 - выбрать изображение # 0
  • 10: 15 - выбрать изображение # 1
  • 10: 20 - выбрать изображение # 2
  • 10: 51 - выбрать изображение # 5
1 голос
/ 10 августа 2012

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

Используйте JavaScript, чтобы установить правильный класс на основе времени (час, минута или что-то еще). Затем установите изображение с помощью CSS: .background-0 { background-image: ... }

Пример:

  • <div class="background-0"></div> (минуты 00-09)
  • <div class="background-1"></div> (минуты 10-19)
  • <div class="background-2"></div> (минут 20-29)
  • <div class="background-3"></div> (минут 30-39)
  • <div class="background-4"></div> (минут 40-49)
  • <div class="background-5"></div> (минут 50-59)
1 голос
/ 15 июня 2009

Я рекомендую вам не хранить для этого никакой информации - она ​​должна работать с априорной информацией, такой как системное время, предложенное Джеффри Кемпом. Это сделает его намного более стабильным и будет работать с большим количеством пользовательских агентов.

Получение, например, метки времени Unix, позволит вам менять фон в секунду.

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

Простым способом было бы использование setInterval, который перебирает массив изображений каждые 30 минут и сбрасывает после выбора последнего изображения.

0 голосов
/ 02 августа 2013 
< script type = "text/javascript" > var now = new Date () ;
var hours = now. getHours() ;
//Keep in code - Written by Computerhope.com
//Place this script in your HTML heading section
document. write( 'It' s now: ', hours, ' < br >< br > ');
document.bgColor="#CC9900";
//18-19 night

if (hours > 17 && hours < 20){
    document.write (' < body style = "background-color: orange" > ');
}
//20-21 night
else if (hours > 19 && hours < 22){
    document.write (' < body style = "background-color: orangered" > ');
}
//22-4 night
else if (hours > 21 || hours < 5){
    document.write (' < body style = "background-color: #C0C0C0;" > ');
}
//9-17 day
else if (hours > 8 && hours < 18){
    document.write (' < body style = "background-color: #616D7E" > ');
}
//7-8 day
else if (hours > 6 && hours < 9){
    document.write (' < body style = "background-color: skyblue" > ');
}
//5-6 day
else if (hours > 4 && hours < 7){
    document.write (' < body style = "background-color: steelblue" > ');
}
else {
    document.write (' < body style = "background-color: white" > ');
}
</script>
0 голосов
/ 28 ноября 2012

Используя Javascript, вы можете сделать что-то вроде этого. 

function changeBg()
    document.body.style.backgroundImage = 'url(bg/'+ new Date().getHours() +'.gif)';
}
    window.setInterval(changeBg, 1000);

Оберните это в файл Javascript и свяжите его с каждой страницей вашего сайта.

Этот скрипт изменит фон сайта в зависимости от времени (например, 0-23 часа)

Здесь изображения хранятся в каталоге bg с именами в диапазоне от 0 до 23. Здесь нет случайности, так как изображения будут выбираться в зависимости от часа дня. Вы можете немного изменить скрипт для своих нужд.

0 голосов
/ 15 июня 2009

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

0 голосов
/ 15 июня 2009

Что бы я сделал, это либо программно сгенерировал CSS на веб-сервере (т.е. скрипт с выводом CSS), либо динамически изменил ссылку на таблицу стилей при создании веб-страниц.

...