Как мне поворачивать изображение в 12 часов ночи каждый день?

Question

Мне нужно поворачивать изображение в 12 часов ночи каждый день из группы из 5-10 изображений. Как я могу сделать это с помощью JavaScript, JQuery или даже PHP?

Answer 1

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

var images = new Array("image1.gif", "image2.jpg", "sky.jpg", "city.png");
var dateDiff = new Date() - new Date(2008,01,01);
var imageIndex = Math.Round(dateDiff/1000/60/60/24) % images.length;
document.GetElementById('imageId').setAttribute('src', images[imageIndex]);

Имейте в виду, что любое клиентское решение будет использовать дату и время клиента, поэтому, если ваше определение полуночи означает в вашем часовом поясе, вам нужно будет сделать нечто подобное на вашем сервере в PHP.

Answer 2

Редактировать: я совершенно неправильно понял этот вопрос как " без с использованием JavaScript / PHP". Так что не обращайте внимания на этот ответ. Я не удаляю его, просто на случай, если кто-нибудь сошел с ума, чтобы захотеть использовать этот метод.

Выполнение этого без Javascript, PHP или любого другого языка сценариев может быть затруднено. Ну, на самом деле, это было бы очень надуманным, поскольку это было бы тривиально даже для самого простого JS / PHP.

В любом случае, чтобы действительно ответить на ваш вопрос, я могу думать только о том, чтобы сделать это с помощью обычного HTML, - это настроить скрипт оболочки для запуска в полночь. Этот скрипт просто переименует ваши файлы. Сделайте это с помощью cron (в linux) или планировщика заданий Windows с помощью скрипта, подобного следующему: (следует хитрый псевдокод, конвертируйте в то, что вам удобно) .

let number_of_files = 5

rename current.jpg to number_of_files.jpg

for (x = 2 to number_of_files)
    rename x.jpg to (x-1).jpg

rename 1.jpg to current.jpg

В вашем HTML, просто сделайте это:

<img src="path/to/current.jpg" />

И каждый день current.jpg должен меняться на что-то новое. Если вы используете какой-либо элемент управления кэшем, обязательно измените его, чтобы он не кэшировался дольше нескольких часов.

Answer 3

Это даже не должно быть в cron:

<?php
// starting date for rotation
$startDate = '2008-09-15';
// array of image filenames
$images = array('file1.jpg','file2.jpg',...);

$stamp = strtotime($startDate);
$days = (time() - $stamp) / (60*60*24);
$imageFilename = $images[$days % count($images)]
?>

<img src="<?php echo $imageFilename; ?>"/>

Answer 4

Я бы сделал это при первом доступе после полуночи.

Answer 5

Может быть, я не понимаю вопроса.
Если вы просто хотите изменить изображение, напишите пакетный файл / задание cron и выполняйте его каждый день.
Если вы хотите отобразить определенное изображение в понедельник, а другое во вторник, сделайте что-то вроде этого:

<?php
switch(date('w'))
 {
  case '1':
   //Monday
   break;
  case '2':
   //Tuesday:
   break;
...
}
?>

Answer 6

Как повернуть изображения, было описано несколькими способами. Как определить , когда для запуска поворота, зависит от того, что вы делаете (уточните, и люди могут дать лучший ответ).

Опции включают в себя:

1. Запустить вращение при «первом доступе после полуночи». Предполагается какое-то инициирующее событие (например, доступ пользователя)
2. Использование возможностей планирования ОС для запуска поворота (cron в * nix, at / task scheduler в Windows)
3. Введите код, чтобы проверить время и повернуть

В варианте 3 существует риск того, что плохо закодированное решение может быть чрезмерно ресурсоемким.

Answer 7

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

function getImageOfTheDay() {
    $myDir = "path/to/images/";

    // get a unique value for the day/year.
    // 15th Jan 2008 -> 10152008. 3 Feb -> 10342008, 31 Dec -> 13662008
    $day = sprintf("1%03d%d", date('z'), date('Y'));

    // you could of course get gifs/pngs as well.
    // i'm just doing this for simplicity
    $jpgs = glob($myDir . "*.jpg");
    mt_srand($day);
    return $jpgs[mt_rand(0, count($jpgs) - 1)];
}

Единственное, что есть возможность видеть одно и то же изображение два дня подряд, так как оно выбирает его случайно. Если вы хотите получить их последовательно, возможно, в алфавитном порядке, используйте это. (изменены только последние две строки)

function getImageOfTheDay() {
    $myDir = "path/to/images/";
    $day = sprintf("1%03d%d", date('z'), date('Y'));
    $jpgs = glob($myDir . "*.jpg");
    return $jpgs[$day % count($jpgs)];
}

Answer 8

Настройка каталога изображений. Выберите семь изображений и назовите их 0.jpg, 1.jpg, 2.jpg, 3.jpg, 4.jpg, 5.jpg, 6.jpg, Использование JavaScript-фреймворка mootools с тегом изображения в HTML с идентификатором «вращение изображения»:

var d=new Date();
var utc = d.getTime() + (d.getTimezoneOffset() * 60000);
var offset = -10;  // set this to your locale's UTC offset
var desiredTime = utc + (3600000*offset);
new dd = new Date(desiredTime); 
$('rotatingimage').setProperty('src', dd.getDay() + '.jpg'); 

Answer 9

Я предполагаю, что под «поворотом изображения» вы подразумеваете «изменить используемое изображение», а не «поворотное преобразование вокруг оси» - простой способ - создать хеш-таблицу, которая отображает день по модулю X на имя изображения.

$imgs = array("kitten.jpg", "puppy.gif","Bob_Dole.png");    
$day_index = 365 * date("Y") + date("Z")

...

<img src="<? $imgs[$day_index % count($imgs)] ?>" />

(извините, если я неправильно понял синтаксис, я действительно не знаю PHP))

Answer 10

Это зависит (ТМ) от того, что именно вы хотите достичь. Просто хотите отобразить «случайное» изображение? Может быть, этот фрагмент javascript поможет вам начать:

var date = new Date();
var day = date.getDate(); // thats the day of month, use getDays() for day of week

document.getElementById('someImage').src = '/images/foo/bar_' + (day % 10) + '.gif';